替換'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。但在地圖上我仍然看到一條線正在顯示。

我在做什麼錯？

Answer 1

我犯的錯誤是，緩衝區值太低，被看作是一個緩​​衝，因此我只看到了一本線（甚至做它是一個多邊形）我必須從100 to 10000000 ...

緩衝區值所以在draw.on('drawend')和vectorSource.on('addfeature')都可以替換已繪製的幾何。

編輯：

對於答案的完整性。我必須從100 to 10000000更改緩衝區的原因是，在將它傳遞到Turf函數之前，我忘記將幾何轉換爲EPSG:4326。草坪只適用於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); 
}); 

Answer 2

做這些修改的功能被添加到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); 
});