javascript - 替换 'drawend' 上绘制的几何图形

Question

我想做的是在绘制特征后替换或更改特征的几何形状。例如:我画一条线，画完后，我用 Turf.js 修改几何图形，在绘制的线周围创建一个缓冲区，并显示缓冲的线(多边形)而不是线。

var draw = new ol.interaction.Draw({
    source: vectorSource,
    type: 'LineString'
});

draw.on('drawend', function(e) {

    //Sending the LineString to a Turf function with a buffer value and getting a Polygon in return
    var bfc = bufferedFeatureCollection(100, e.feature);

    //Replacing the LineString geometry with a Polygon geometry
    e.feature.setGeometry(bfc[0].getGeometry());

    //Removes and terminates the draw action.... 
    map.removeInteraction(this);
});

现在从 console.log() 中，我可以看到 feature.geometry 已从 ol.geom.linestring 更改为ol.geom.polygon。但在 map 上我仍然看到显示一条线。

我做错了什么？

Answer 1

将功能添加到 ol.source.Vector 后进行这些修改，所以:

vectorSource.on('addfeature', function(evt){
    //Sending the LineString to a Turf function with a buffer value and getting a Polygon in return
    var bfc = bufferedFeatureCollection(100, evt.feature);

    //Replacing the LineString geometry with a Polygon geometry
    evt.feature.setGeometry(bfc[0].getGeometry());

    //Removes and terminates the draw action.... 
    map.removeInteraction(draw);
});