2

我已经构建了一个 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 = ' ';
      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 保存要素图层？

4

1 回答 1

5

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

var GEOJSON_PARSER = new OpenLayers.Format.GeoJSON();
var vectorLayerAsJson = GEOJSON_PARSER.write(vlayer.features);
于 2013-09-16T09:17:06.877 回答