在 Leaflet-Geoman 中编辑多边形后如何获取纬度值？答案

【问题标题】：How to get latlngs values after edit a polygon in Leaflet-Geoman?在 Leaflet-Geoman 中编辑多边形后如何获取纬度值？
【发布时间】：2021-10-18 19:04:57
【问题描述】：

假设我有一个 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

【问题讨论】：

标签： typescript leaflet leaflet-geoman

【解决方案1】：

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

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

但是你会遇到 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

【讨论】：