如何使用openlayers 3将图层上的所有要素序列化为json

Question

我想允许用户使用openlayers 3在地图上绘制多边形,然后当用户按下"保存"时,我想将多边形的json放入隐藏字段,以便可以将其发送回服务器并保存在数据库中.

我有用于绘制多边形的代码(下图),然后我编写了一个简单的测试函数,当按下按钮时会触发该函数.getFeatures()调用失败.在firebug中,控制台中显示的消息是"TypeError:vectorsource.getFeatures不是函数".这是点击功能:

function map1_generateJSON()
{
    var geojson  = new ol.parser.GeoJSON;
    var features = vectorsource.getFeatures();
    var json     = geojson.write(features);
    alert(json);
}

我使用的openlayers基础是

<script type="text/javascript" src="http://ol3js.org/en/master/build/ol.js"></script>

这是显示地图的代码,允许用户绘制多边形(它主要是从Open Layers 3绘制特征示例中的标准openlayers示例之一复制而来).

var vectorsource    = new ol.source.Vector();
var vector = new ol.layer.Vector({
  source: vectorsource,
  style: new ol.style.Style({
    rules: [
      new ol.style.Rule({
        filter: 'renderIntent(\"selected\")',
        symbolizers: [
          new ol.style.Shape({
            fill: new ol.style.Fill({
              color: '#0099ff',
              opacity: 1
            }),
            stroke: new ol.style.Stroke({
              color: 'white',
              opacity: 0.75
            }),
            size: 14
          }),
          new ol.style.Fill({
            color: '#ffffff',
            opacity: 0.5
          }),
          new ol.style.Stroke({
            color: 'white',
            width: 5
          }),
          new ol.style.Stroke({
            color: '#0099ff',
            width: 3
          })
        ]
      }),
      new ol.style.Rule({
        filter: 'renderIntent(\"temporary\")',
        symbolizers: [
          new ol.style.Shape({
            fill: new ol.style.Fill({
              color: '#0099ff',
              opacity: 1
            }),
            stroke: new ol.style.Stroke({
              color: 'white',
              opacity: 0.75
            }),
            size: 14,
            zIndex: 1
          })
        ]
      })
    ],
    symbolizers: [
      new ol.style.Shape({
        fill: new ol.style.Fill({
        color: 'black',
        opacity: 1
        }),
        size: 14
      }),
      new ol.style.Fill({
        color: 'white',
        opacity: 0.2
      }),
      new ol.style.Stroke({
    color: 'black',
            width: 2
      })
    ]
  })
});

var map1_olmap = new ol.Map({
    layers: [new ol.layer.Tile({source: new ol.source.MapQuest({layer: 'osm'})}), vector],
    renderer: ol.RendererHint.CANVAS,
    target: map1,
    view: new ol.View2D({
        center: ol.proj.transform([-113.5, 53.533333], 'EPSG:4326', 'EPSG:3857'),
        zoom: 13
     })
});

var map1_draw;
function map1_addMapInteraction()
{
    map1_draw = new ol.interaction.Draw({
        layer: vector,
        type: 'Polygon'
    });
    map1_olmap.addInteraction(map1_draw);
}
map1_addMapInteraction();

Answer 1

尝试在 FireBug 中访问它是个好主意。如果您无法在FireBug中访问vectorsource.getFeatures()，请尝试在FireBug控制台中访问vectorsource ，然后检查它。

根据 OL3 源代码，ol.source.Vector 的原型确实有一个方法 getFeatures，因此您的页面上可能存在一些错误，导致您的作业无法执行等。FireBug 会告诉您它是什么（以及 var 矢量源中的内容）。