如何在 Leaflet-Geoman 中编辑多边形后获取 latlngs 值？

Question

假设我有一个 geojson 数据：

let featureCollection: GeoJSON.FeatureCollection<any> = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      properties: {},
      geometry: {
        type: 'Polygon',
        coordinates: [
          [
            [103.80689620971681, 1.3101770944467952],
            [103.86285781860352, 1.3494769612490358],
            [103.916072845459,   1.2942167094566774],
            [103.86972427368165, 1.2540578798674866],
            [103.87229919433594, 1.3084609288747733],
            [103.83796691894533, 1.2660712704472294],
          ],
        ],
      },
    },
  ],
};

我尝试将该 geojson 值加载到地图中并与事件处理程序集成：

L.geoJSON(featureCollection, {
  onEachFeature: (feature: any, layer: L.Layer) => {
    layer.on('pm:edit', (e) => {
      console.log('loaded geojson - pm:edit', e);
    });
    layer.on('pm:rotateend', (e) => {
      console.log('loaded geojson - pm:rotateend', e.originLatLngs, e.newLatLngs);
    });
    map.addLayer(layer);
  },
});

然后我通过从工具栏UI中选择“编辑图层”修改了一个多边形，浏览器将触发pm:edit事件：

调试控制台将打印如下内容：

问题是：在pm:edit事件中，由于TypeScript的限制，我没有找到任何获取经纬度坐标的方法，但是控制台显示_latlngs 值（见输出图像）。此外，一些其他事件，如 pm:rotateend 能够支持获取坐标的方法

我要的是：如何获取pm:edit事件的经纬度值？

编辑：leaflet版本为^1.7.1，@geoman-io/leaflet-geoman-free版本为^2.11.2

Answer 1

在 pm:edit 事件中，有效载荷中有 layer。您可以从中使用 toLatLngs():

layer.on('pm:edit', (e) => {
   console.log(e.layer.getLatLngs())
});

BUT 你会遇到 TypeScript 的问题，因为 e.layer 来自 L.Layer 类型，所以你需要先转换/获取层的实例:

layer.on('pm:edit', (e) => {
  if(e.shape === 'Polygon'){
     (e.layer as Polygon).getLatLngs();
  }
});

更多信息在这里：https://github.com/geoman-io/leaflet-geoman/issues/945

如何在 Leaflet-Geoman 中编辑多边形后获取 latlngs 值？

How to get latlngs values after edit a polygon in Leaflet-Geoman?

leaflet

typescript

leaflet-geoman