Leaflet-Geoman 项目中动态更新绘制模式下的顶点坐标

在使用 Leaflet-Geoman 进行地图绘制时，开发者可能会遇到需要动态更新正在绘制形状的顶点坐标的需求。本文将深入探讨这一技术问题的解决方案。

问题背景

在 Leaflet-Geoman 的绘制模式下，当通过 setLatLngs() 方法修改工作层的坐标时，虽然路径线会更新，但顶点标记（vertices）却保持原位置不变。这与编辑模式下的行为不同，在编辑模式下可以通过重新启用绘制和图层来更新顶点。

技术分析

Leaflet-Geoman 的内部实现中，所有标记都存储在 layerGroup 和 markers 属性中。理论上，可以通过以下步骤更新顶点：

1. 清除 layerGroup 中的所有图层
2. 根据新坐标重新创建所有标记
3. 将新标记添加到图层组中

然而，直接采用这种方法会导致路径线也被清除，即使调用 updatePath() 方法也无法恢复。

有效解决方案

经过实践验证，以下方法可以成功更新绘制模式下的顶点坐标（除第一个顶点外）：

// 移除除第一个顶点外的所有顶点
while (map.pm.Draw.Line._markers.length > 1) {
    map.pm.Draw.Line._removeLastVertex();
}

// 根据新坐标添加顶点
newCoords.forEach((latlng) => {
    map.pm.Draw.Line._createVertex({latlng: latlng});
});

实现原理

这个解决方案的工作原理是：

1. 保留第一个顶点不变（这是当前实现的限制）
2. 逐步移除多余的顶点
3. 按照新坐标逐个创建新顶点

这种方法利用了 Leaflet-Geoman 的内部方法 _removeLastVertex 和 _createVertex，确保顶点标记与路径线保持同步更新。

注意事项

当前解决方案存在一个限制：无法修改第一个顶点的位置。如果业务场景中需要修改所有顶点，可能需要考虑其他方法或等待 Leaflet-Geoman 未来版本提供更完善的支持。

对于大多数应用场景，这种部分更新的方法已经能够满足需求，特别是当第一个顶点位置固定或不需要修改时。