替换“drawend”上绘制的几何图形答案

【问题标题】：Replacing the drawn geometry on 'drawend'替换“drawend”上绘制的几何图形
【发布时间】：2016-01-26 15:36:23
【问题描述】：

我想要做的是在绘制后替换或更改特征的几何形状。例如：我画了一条线，画完之后我用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。但在地图上我仍然看到一条线正在显示。

我做错了什么？

【问题讨论】：

标签： javascript openlayers-3

【解决方案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);
});

【讨论】：

您好，谢谢您的回复。我发现了问题所在。你的答案是正确的，我的代码也有效，所以在 vectorSource.on('addfeature') 和 draw.on('drawend') 中都可以更改几何。问题是缓冲区的半径太小了，必须将值从 100 更改为 10000000，才能看到实际的缓冲区...：S

【解决方案2】：

我犯的错误是缓冲区值太低而不能被视为缓冲区，因此我只看到一条线（即使它是一个多边形）我不得不从100 to 10000000上调缓冲区值...

因此在draw.on('drawend') 和vectorSource.on('addfeature') 中都可以替换已绘制的几何图形。

编辑：

为了答案的完整性。我必须从100 to 10000000 更改缓冲区的原因是我忘记将几何图形转换为EPSG:4326，然后再将其传递给Turf 函数。 Turf 仅适用于 EPSG:4326。

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

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

    e.feature.getGeometry().transform('EPSG:3857', 'EPSG:4326');

    var bfc = bufferedFeatureCollection(radius, e.feature);
    bfc[0].getGeometry().transform('EPSG:4326', 'EPSG:3857');

    e.feature.setGeometry(bfc[0].getGeometry());

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

【讨论】：