Leaflet-Geoman中pm:edit事件未触发的问题求助

问题根源 #

1. 通过L.geoJSON加载的图层默认未启用Geoman编辑功能，无法触发任何编辑相关事件
2. pm:edit是图层级事件，不能在map实例上监听；map级别的编辑变更事件是pm:update

修复步骤 #

1. 给加载的GeoJSON图层启用编辑权限

修改加载数据的代码，为每个图层开启Geoman编辑：

var shapeField = document.getElementById('shape-field').value;
var savedPolygonData = shapeField ? JSON.parse(shapeField) : null;

if (savedPolygonData) {
  L.geoJSON(savedPolygonData).eachLayer(function (layer) {
    allLayers.push(layer);
    layer.addTo(map);
    // 启用图层的编辑、拖拽、删除功能，可根据需求调整参数
    layer.pm.enable({
      edit: true,
      drag: true,
      remove: true,
      rotate: false
    });
  });
}

2. 替换事件监听为正确的事件

将原来的pm:edit监听替换为pm:update（map级别，捕获所有图层的编辑变更）：

map.on('pm:create', function (e) {
  alert('something is created');
});

// 监听所有图层的编辑更新
map.on('pm:update', function (e) {
  alert('something is edited');
  // 可通过e.layer获取当前被编辑的图层
});

map.on('pm:remove', function (e) {
  alert('something is removed');
});

如果需要监听单个图层的编辑开始/结束动作，可以在加载图层时绑定事件：

L.geoJSON(savedPolygonData).eachLayer(function (layer) {
  // ... 其他代码
  layer.on('pm:editstart', function() {
    console.log('图层编辑开始');
  });

  layer.on('pm:editend', function() {
    console.log('图层编辑结束');
  });
});

内容的提问来源于stack exchange，提问作者SsPay