如何使用 openlayers 3 将图层上的所有功能序列化为 json答案

【问题标题】：How can I serialize all features on a layer to json using openlayers 3如何使用 openlayers 3 将图层上的所有功能序列化为 json
【发布时间】：2014-01-11 02:26:27
【问题描述】：

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

我有绘制多边形工作的代码（如下），然后我编写了一个简单的测试函数，该函数在按下按钮时触发。 getFeatures() 调用失败。在 firebug 中，控制台中显示的消息是“TypeError: vectorsource.getFeatures is not a function”。这是点击功能：

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 draw features example 的标准 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();

【问题讨论】：

这个问题已经用v3.0.0-beta.5解决了。

标签： javascript serialization openlayers-3

【解决方案1】：

关于这条线

    var json     = geojson.write(features);

你需要

    var  json     = geojson.writeFeatures(features);

我正在尝试做同样的事情，但结果是一个对象而不是字符串。我需要一个字符串，以便将其存储到我的数据库中。

【讨论】：

您可以使用JSON.stringify(object);将其转换为字符串

【解决方案2】：

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

根据 OL3 源，ol.source.Vector 的原型确实有一个方法 getFeatures，所以你的页面上可能有一些错误，这会阻止你的分配执行。 FireBug 会告诉你它是什么（以及 var vectorsource 中有什么）。

【讨论】：