Leaflet-Draw绘图时如何通过代码调用取消按钮功能

方案一：前置拦截——禁用创建按钮+提示 #

直接在输入框内容变化时做判断，为空则禁用绘制按钮，从源头阻止绘图触发：

// 获取DOM元素
const areaInput = document.getElementById('area-number-input');
const drawBtn = document.getElementById('draw-polygon-btn');

// 监听输入框内容变化
areaInput.addEventListener('input', () => {
  const hasValue = !!areaInput.value.trim();
  drawBtn.disabled = !hasValue;
  if (!hasValue) {
    alert('请先填写AreaNumber再开始绘制');
  }
});

方案二：事件拦截——在draw:drawstart中取消绘图 #

如果已经触发了绘图事件，调用地图绘制工具的模式切换API终止当前绘制，核心代码如下（以Mapbox Draw为例）：

// 假设已初始化Mapbox Draw实例
const draw = new MapboxDraw({
  displayControlsDefault: false,
  controls: { polygon: true, trash: true }
});

// 监听绘图开始事件
map.on('draw:drawstart', () => {
  const areaInput = document.getElementById('area-number-input');
  if (!areaInput.value.trim()) {
    alert('请先填写AreaNumber再继续绘制');
    // 调用取消绘图：切换到选择模式，终止当前绘制流程
    draw.changeMode('simple_select');
    // 可选：清空临时绘制的图形
    draw.deleteAll();
  }
});

这里的draw.changeMode('simple_select')就等效于触发取消按钮的功能，会终止当前多边形绘制并回到默认选择状态。

如果用的是Leaflet Draw插件，取消逻辑类似：

map.on('draw:drawstart', (e) => {
  const areaInput = document.getElementById('area-number-input');
  if (!areaInput.value.trim()) {
    alert('请先填写AreaNumber再继续绘制');
    // 调用Leaflet Draw的取消方法
    e.layer._toolbars._activeMode.handler.disable();
  }
});

补充提示 #

• 可以用更友好的提示组件（如Toast）替换原生alert，提升体验；
• 两种方案可以结合使用，前置拦截避免无效操作，事件拦截做兜底处理。

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