I have built an OpenLayers map which reads tile data from a directory (stored in z\x\y structure e.g. 1/1/0.png) and presents it on a map layer. Then I create a vector layer and provide the user with tools in order to draw various types of shapes (point, path, polygon etc.) on the map. Below is the code:
function initialiseMap() {
var options = {
controls: [],
maxExtent: new OpenLayers.Bounds(0.0, -72448.0, 142848.0, 0.0),
maxResolution: 1024.000000,
numZoomLevels: 10
};
map = new OpenLayers.Map(imageEditorID, options);
imageLayer = new OpenLayers.Layer.TMS(imgURL, "", {
url: '',
serviceVersion: '.',
layername: '.',
alpha: true,
type: 'png',
getURL: overlay_getTileURL,
transitionEffect: 'resize'
});
map.addLayer(imageLayer);
var vlayer = new OpenLayers.Layer.Vector("Editable");
map.addLayer(vlayer);
var overview = new OpenLayers.Control.OverviewMap({
maximized: true,
maximizeTitle: 'Show the overview map',
minimizeTitle: 'Hide the overview map'
});
var zoomToDrawControl = new OpenLayers.Control.ZoomBox({
title: "Zoom Tool: zoom clicking and dragging",
text: "Zoom"
});
var hand = new OpenLayers.Control.NavToolbar({
title: "Take Image Control",
text: "Panning Hand"
});
var panel = new OpenLayers.Control.Panel({
defaultControl: zoomToDrawControl,
createControlMarkup: function (control) {
var button = document.createElement('button'),
iconSpan = document.createElement('span'),
textSpan = document.createElement('span');
iconSpan.innerHTML = ' ';
button.appendChild(iconSpan);
if (control.text) {
textSpan.innerHTML = control.text;
}
button.appendChild(textSpan);
return button;
}
});
panel.addControls([
hand, zoomToDrawControl,
new OpenLayers.Control.DrawFeature(vlayer, OpenLayers.Handler.Point, {
title: 'Draw a point',
text: 'Point',
'displayClass': 'olControlDrawFeaturePoint'
}),
new OpenLayers.Control.DrawFeature(vlayer, OpenLayers.Handler.Path, {
title: 'Draw a line',
text: 'Line',
'displayClass': 'olControlDrawFeaturePath'
}),
new OpenLayers.Control.DrawFeature(vlayer, OpenLayers.Handler.Polygon, {
title: 'Draw a polygon',
text: ' Free Polygon',
'displayClass': 'olControlDrawFeaturePolygon'
}),
new OpenLayers.Control.DrawFeature(vlayer, OpenLayers.Handler.RegularPolygon, {
title: 'Draw a regular polygon',
text: 'Regular Polygon',
'displayClass': 'olControlDrawFeatureRegularPolygon'
}),
new OpenLayers.Control.ZoomToMaxExtent({
title: "Zoom to the max extent",
text: "World"
})
]);
map.addControl(panel);
map.addControl(overview);
map.zoomToExtent(mapBounds);
map.addControl(new OpenLayers.Control.Navigation({
dragPanOptions: {
enableKinetic: true
}
}));
map.addControl(new OpenLayers.Control.PanZoomBar());
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition());
map.addControl(new OpenLayers.Control.KeyboardDefaults());
map.addControl(new OpenLayers.Control.ArgParser());
map.addControl(new OpenLayers.Control.Attribution());
The thing I want to achieve is to save this annotation layer in e.g. an XML file (shapes and coordinates) and subsequently to load it as annotation layer each time the user accesses this specific image. But how can I SAVE features layer using OpenLayers?
