6

我想允许用户使用 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();
4

3 回答 3

3

关于这条线

    var json     = geojson.write(features);

你需要

    var  json     = geojson.writeFeatures(features);

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

于 2014-05-01T15:15:47.687 回答
0

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

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

于 2014-01-15T23:23:19.000 回答
0

我有同样的问题，它将在下一个版本中访问，因为它在一些最新示例中使用，另请参见以下链接：

于 2014-03-12T09:09:33.250 回答