Leaflet Geoman中图层添加元素的事件捕获方法咨询

我无法确定使用Leaflet.PM（Geoman插件）向图层添加标记、多边形等元素时会触发什么事件。

通过

map.on('pm:remove', (e) => { });

我可以检测到移除事件（来自之前添加到地图的多边形管理器），也能检测到edit事件。我尝试了pm:create和pm:add，但没有任何反应。

此外，将这些事件处理器（即使是有效的那些）绑定到图层时也不起作用：

layer.on(...)

即使通过编程方式将几何图形添加到图层（使用mygeometry.addTo(layer)），也无法触发上述任何事件处理器。

我知道可以为几何图形本身绑定事件监听器，目前我也在为标记的mouseover事件绑定监听器以显示包含标记信息的弹窗，但不确定这类监听器如何处理对象被删除的情况。

请问我应该监听哪个事件，以及如何在图层级别为任何绘制元素的创建/添加添加事件监听器？

解决方案 #

1. 监听绘制工具创建元素的事件 #

Leaflet.PM通过绘制工具创建元素时，会触发**pm:create事件**，该事件需绑定在map对象上，回调参数中包含创建的图层实例：

map.on('pm:create', (e) => {
  const newLayer = e.layer;
  // 将新创建的元素添加到目标图层组
  newLayer.addTo(yourTargetLayer);
});

2. 图层组级别监听元素添加/移除 #

若要在LayerGroup/FeatureGroup级别监听元素的增减，直接使用Leaflet原生的**layeradd和layerremove事件**即可，无论通过绘制工具还是编程方式添加元素，都会触发：

const yourTargetLayer = L.featureGroup().addTo(map);

// 监听元素添加到图层
yourTargetLayer.on('layeradd', (e) => {
  const addedLayer = e.layer;
  // 给新元素绑定mouseover事件
  addedLayer.on('mouseover', () => {
    addedLayer.bindPopup('标记详情').openPopup();
  });
});

// 监听元素从图层移除
yourTargetLayer.on('layerremove', (e) => {
  const removedLayer = e.layer;
  // 无需手动解绑元素事件，Leaflet会自动处理
});

3. 元素删除时的事件清理 #

当元素被Leaflet.PM删除或从图层中移除时，Leaflet会自动解绑该元素上所有已绑定的事件（如mouseover监听器），无需手动清理，避免内存泄漏。

4. 编程添加元素的事件触发 #

通过mygeometry.addTo(layer)编程方式添加元素时，同样会触发图层的layeradd事件，无需额外配置。

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