如何在Leaflet中限制用户仅绘制含两个点的Polyline？

Leaflet.draw本身没有直接设置折线最大点数的配置，但可以通过监听绘制事件手动控制流程，实现点击第二个点就自动完成线段绘制的效果，具体步骤和代码如下：

• 初始化地图和Leaflet.draw控件，只保留折线绘制工具（按需隐藏其他绘制类型）
• 监听draw:vertexadded事件，每次添加顶点后检查当前折线的点数
• 当点数达到2时，调用绘制管理器的stop()方法结束绘制，同时触发draw:created事件衔接后续逻辑

// 初始化地图
const map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

// 配置绘制控件，仅启用折线工具
const drawControl = new L.Control.Draw({
  draw: {
    polyline: true,
    polygon: false,
    rectangle: false,
    circle: false,
    marker: false
  }
});
map.addControl(drawControl);

// 获取折线绘制的处理器
const polylineHandler = map._drawControl._toolbars.draw._modes.polyline.handler;

// 监听顶点添加事件
map.on('draw:vertexadded', (e) => {
  const currentPolyline = e.layer;
  const points = currentPolyline.getLatLngs();
  
  // 收集到2个点时自动结束绘制
  if (points.length === 2) {
    polylineHandler.stop();
    // 触发绘制完成事件，和默认流程保持一致
    map.fire('draw:created', {
      layer: currentPolyline,
      layerType: 'polyline'
    });
  }
});

// 处理绘制完成后的逻辑（比如把线段添加到地图）
map.on('draw:created', (e) => {
  e.layer.addTo(map);
  // 这里可添加自定义逻辑，比如保存坐标、弹窗提示等
});

补充说明 #

• 这段代码针对Leaflet.draw常规版本编写，若使用不同版本，获取绘制处理器的路径可能略有调整，可通过控制台打印map._drawControl确认具体结构
• 触发draw:created事件是为了和默认绘制完成流程兼容，确保后续图层处理逻辑正常运行

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