使用Geoman“编辑层”在传单弹出中更新Turf区域

Question

我有一个QGIS项目，我使用QGIS2WEB导出到一个网络地图。使用Turf，我有一个弹出窗口，显示我的网页地图中每个多边形的区域。使用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}]`)
}