识别 Leaflet Draw 取消按钮的点击事件

Question

问题

我正在使用leaflet draw来开发我的应用程序，并且已经启用了“删除”按钮。该删除按钮有三个选项：

1. 保存
2. 取消
3. 全部清除

如果用户单击保存，我希望调用函数foo()，但是，如果他们单击取消，我希望调用函数bar()。

实时演示

解决方案

我知道这可以通过简单地给它一个ID并添加事件监听器来实现，但我认为这并不如我想象的那样干净。

理想解决方案

Leaflet draw具有自己的方法来检测按钮何时被按下，但在我看来，它们只对更高级别的按钮进行此操作。例如:

draw:deletestop 编辑的类型。其中之一：remove当用户完成删除形状（删除模式）并保存时触发。

- Leaflet文档

这使我能够在用户选择任何三个选项之后调用foo()，即他们已经完成了删除按钮的交互处理。

我找不到一种方法来在文档中监听leaflet draw触发单个按钮被按下的事件。

- Ed Prince

Answer 1

Leaflet.draw的最新版本为0.4.14，您可以使用以下代码：

map.on('draw:toolbarclosed', function(){ //在这里添加您的代码 });

该代码与地图绘制工具栏关闭事件相关联。请注意保留HTML标签。

- mblais29

---

这并不一定意味着取消按钮被点击了。例如，在我的 L.Control.Draw 对象中，我有 repeatMode：true，这意味着每次添加一个点时都会触发它。 - Worm

Answer 2

取消/禁用功能的处理程序存储在您的L.Control.Draw实例中。因此，您可以在实例化L.Control.Draw对象后立即修改处理程序：

var myDrawControl = new L.Control.Draw();

myDrawControl._toolbars.edit.disable =  function () {
  if (!this.enabled()) {
    /* If you need to do something right as the
       edit tool is enabled, do it here right
       before the return */
    return;
  }

  this._activeMode.handler.revertLayers();
  /* If you need to do something when the
     cancel button is pressed and the edits
     are reverted, do it here. */
  L.Toolbar.prototype.disable.call(this);
};

该处理程序的源代码位于此处，虽然它工作得很好，但是您需要注意未来版本的Leaflet.Draw可能会更改处理程序的功能。

- Sean Brewer