使用地质人"edit layers"更新传单弹出窗口中的草坪 JS 区域

Question

我有一个QGIS项目，我使用QGIS2WEB导出到web地图。使用草皮JS，我有一个弹出显示每个多边形在我的网页地图的面积。使用Geoman，我希望能够编辑网络地图中的多边形，并在传单弹出框中自动更新面积计算。我可以用"剪切图层"来完成这个工作。但不包括"编辑图层"。下面是我的一段代码

var layer_TestLandscapeArea_1 = new L.geoJson(json_TestLandscapeArea_1, {
attribution: '',
interactive: true,
dataVar: 'json_TestLandscapeArea_1',
layerName: 'layer_TestLandscapeArea_1',
pane: 'pane_TestLandscapeArea_1',
style: style_TestLandscapeArea_1_0,
onEachFeature: function (feature, layer) {
area = (turf.area(feature)).toFixed(2);
center_lat = turf.center(feature).geometry.coordinates[1]
center_long = turf.center(feature).geometry.coordinates[0]
bbox = turf.bbox(feature).toString();
layer.bindPopup(`<b>Area: </b> ${area} </br> <b>Center(x,y): </b> (${center_long, center_lat}) </br> <b>Bbox: </b> [${bbox}]`)
}
});
bounds_group.addLayer(layer_TestLandscapeArea_1);
map.addLayer(layer_TestLandscapeArea_1);
setBounds();


// add Leaflet-Geoman controls with some options to the map  
map.pm.addControls({  
position: 'topleft',  
drawCircle: false,  
});  

Answer 1

您可以监听pm:edit事件，然后重新进行计算。

var layer_TestLandscapeArea_1 = new L.geoJson(json_TestLandscapeArea_1, {
attribution: '',
interactive: true,
dataVar: 'json_TestLandscapeArea_1',
layerName: 'layer_TestLandscapeArea_1',
pane: 'pane_TestLandscapeArea_1',
style: style_TestLandscapeArea_1_0,
onEachFeature: function (feature, layer) {
calc(layer);
layer.on('pm:edit',function(e){
calc(e.layer);
});
}
});

function calc(layer){
var feature = layer.feature;
area = (turf.area(feature)).toFixed(2);
center_lat = turf.center(feature).geometry.coordinates[1]
center_long = turf.center(feature).geometry.coordinates[0]
bbox = turf.bbox(feature).toString();
layer.bindPopup(`<b>Area: </b> ${area} </br> <b>Center(x,y): </b> (${center_long, center_lat}) </br> <b>Bbox: </b> [${bbox}]`)
}