基于leaflet-geoman实现仅2点直线绘制的优化及编辑配置咨询

• 整体改造方向：完全规避私有变量访问、重复图层初始化、多余模式切换的冗余逻辑，直接调用Leaflet-Geoman公开API实现完整能力，性能和可维护性都更优 *

针对原有问题的逐点优化 #

• 替换私有变量访问逻辑：不再读取workingLayer._rings这类内部私有属性，改用workingLayer.pm.getLatLngs()公开方法获取当前已添加的顶点坐标数组，判断顶点数量，后续版本升级不会出现兼容问题
• 解决绘制完成后图层不展示的问题：在顶点数达到2个的节点，先取出当前两个端点的坐标，手动实例化正式的L.Polyline图层挂载到地图上，再关闭绘制模式，避免临时workingLayer因为绘制中断被框架自动清理，不需要后续再切换可视化模式重新初始化
• 无缝支持端点拖动调整：在正式实例化的Polyline图层上，直接调用图层级的pm.enable()方法开启编辑能力，不需要销毁重建图层，渲染出的端点标记自动支持拖动、吸附能力
• 禁用线段拆分功能：完全可以通过公开配置实现，不需要额外hack逻辑：
  • 配置hideMiddleMarkers: true：自动隐藏两个端点之间的线段拆分操作点
  • 配置allowDragCreation: false：彻底禁止点击线段中间生成新顶点的能力，用户仅能拖动两个原有端点调整直线位置

优化后的完整实现代码 #

// 开启直线绘制模式，保留原有吸附配置
map.pm.enableDraw('Line', {
  snappable: true,
  snapDistance: 20,
});

map.on('pm:drawstart', (event) => {
  const { workingLayer } = event;
 
  workingLayer.on('pm:vertexadded', () => {
    // 通过公开API获取当前顶点集合，不触碰内部私有属性
    const currentLatLngs = workingLayer.pm.getLatLngs();
    if (currentLatLngs[0].length >= 2) {
      const endPoints = currentLatLngs[0];
      // 直接实例化正式可展示的直线图层，挂载到地图
      const lineLayer = L.polyline(endPoints, { color: '#3388ff' }).addTo(map);
      
      // 直接开启图层编辑能力，配置规则
      lineLayer.pm.enable({
        snappable: true,
        snapDistance: 20,
        hideMiddleMarkers: true,
        allowDragCreation: false,
      });
      
      // 完成图层创建和编辑开启后，再关闭全局绘制模式
      map.pm.disableDraw('Line');
    }
  });
});

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