Question

我已经构建了一个OpenLayers地图，它从目录中读取切片数据（存储在z \ x \ y结构中，例如1/1 / 0.png）并将其显示在地图图层上。然后我创建一个矢量图层并为用户提供工具，以便在地图上绘制各种类型的形状（点，路径，多边形等）。以下是代码：

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 = '&nbsp;';
      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());

我想要实现的是将此注释图层保存在例如XML文件（形状和坐标），然后在每次用户访问此特定图像时将其作为注释图层加载。但是如何使用OpenLayers保存功能层？

Answer 1

使用OpenLayers.Format.GeoJSON.write()将矢量图层序列化为GeoJSON字符串：

var GEOJSON_PARSER = new OpenLayers.Format.GeoJSON();
var vectorLayerAsJson = GEOJSON_PARSER.write(vlayer.features);

如何在openlayers中保存要素图层

1 个答案: