绘制完成时将触发事件，并将新多边形添加到openlayers 3中的要素列表中 [英] Fire an event when draw finishes and new polygon is added to the features list in openlayers 3

问题描述

我正在尝试使用OpenLayers 3创建交互式地图，客户端可以在地图上绘制多边形，然后检索绘制的多边形的坐标。我在 CodePEN 上找到了一个很好的小教程，我用它来进行绘制交互。这是我用来在地图上绘制新多边形的代码：

I am trying to create an interactive map with OpenLayers 3, where the client can draw polygons on the map, and then retrieve the coordinates of the polygons which were drawn. I've found a nice little tutorial on CodePEN, which I am using for the draw interaction. Here's the code I use to draw a new polygon on the map:

 var curMap = this;

 this.draw_interaction = new ol.interaction.Draw({
   source: this.vectorLayer.getSource(),
   type: /** @type {ol.geom.GeometryType} */ ('Polygon')
 });

 this.map.addInteraction(this.draw_interaction);

 // when a new feature has been drawn...
 this.draw_interaction.on('drawend', function(event) {
   curMap.map.removeInteraction(curMap.draw_interaction);
   var id = 'addedpoly '+curMap.vectorLayer.getSource().getFeatures().length;

   event.feature.setId(id);
   event.feature.setStyle(curMap.defaultPolyStyle);

   console.log(event.feature);
   curMap.saveData('GeoJSON'); 
 });

可以看出，整个代码都包含在一个javascript对象中，我在其中存储不同的绘图所需的一些值。添加新多边形后， this.saveData（）函数应该为我返回一个数组，其中包含所有添加的多边形坐标。但是，它不会执行此操作，而只返回在最后一个之前添加的多边形。这是该函数的代码：

As it can be seen, the whole code is wrapped in a javascript object, in which I store different kind of values needed for the drawing. The this.saveData() function should return an array for me after a new polygon is added, with ALL the added polygons coordinates. But instead of doing this, it only returns the polygons that were added before the last one. Here's the code for that function:

Map.prototype.saveData = function (data_type) {
    var format = new ol.format[data_type](), data, curMap = this;

    try {
        data =    format.writeFeatures(curMap.vectorLayer.getSource().getFeatures());
    } catch (e) {
        alert(e.name + ": " + e.message);
        return;
    }

    if (data_type === 'GeoJSON') {
        console.log(JSON.parse(data));
        data=JSON.parse(data);
        for (var i=0;i<data.features.length ;i++ )
        {
            if (data.features[i].geometry.type != 'Point') console.log(i, data.features[i]);
        }
        console.log(JSON.stringify(data, null, 4));
    } else {
        var serializer = new XMLSerializer();
        console.log(serializer.serializeToString(data));
    }
}

我假设新的多边形特征，这只是正在添加到功能列表中，就在 this.saveData（）函数触发后，这就是为什么永远不会捕获最后添加的多边形的原因。是否有一种方法，一个事件监听器可能会在将新功能添加到地图后立即强制触发 this.saveData（）函数？

I presume that the new polygon feature, which was just drawn, is being added to the feature list, just after the this.saveData() function fires, that's why the last added polygon is never catched. Is there a way, an event listener maybe, to force the firing of the this.saveData() function, right after a new feature was added to the map?

推荐答案

当功能（确实）添加到 ol.source.Vector 时收听而不是 drawend ，所以：

Listen when the feature is (really) added to ol.source.Vector instead of drawend, so:

this.vectorLayer.getSource().on('addfeature', function(event){
  // ...
});

这篇关于绘制完成时将触发事件，并将新多边形添加到openlayers 3中的要素列表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！