Leaflet Draw切换圆形与矩形绘图工具后拖拽地图而非绘制形状问题

云上老周

2026-8-2

Leaflet Draw 圆形与矩形工具切换后无法绘制的问题修复

问题现象

切换Draw Circle和Draw Rectangle工具后，点击拖拽地图会触发地图平移，而非绘制对应形状
单独使用任一工具时功能正常，仅在两者间切换时出现异常
圆形/多边形、矩形/多边形切换无此问题，控制台无错误抛出

问题原因

Leaflet Draw在圆形与矩形工具间切换时，绘图状态的事件监听未彻底重置：两类工具均依赖mousedown+mousemove事件实现绘制逻辑，但切换时前一个工具的事件解绑不彻底，导致地图原生拖拽事件优先触发。

解决方案

通过监听工具切换事件，强制重置当前激活工具的状态，确保事件绑定正确：

// 初始化绘图控件
const drawControl = new L.Control.Draw({
  draw: {
    circle: { radius: 100 },
    rectangle: true
  }
}).addTo(map);

// 监听绘图工具切换事件
map.on('draw:toolchanger', () => {
  const activeMode = drawControl._activeMode;
  // 仅针对圆形和矩形工具执行重置
  if (activeMode && ['circle', 'rectangle'].includes(activeMode.mode)) {
    // 先禁用当前工具
    activeMode.disable();
    // 异步重新启用，确保事件绑定完全重置
    setTimeout(() => activeMode.enable(), 0);
  }
});