识别何时单击 Leaflet Draw 取消按钮

Question

问题

我在我的应用程序中使用leaflet draw，并且我的“删除”按钮处于活动状态。移除按钮有三个选项：

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

我希望在用户单击 Save 时调用函数 foo()，但是，我希望在用户单击 Cancel 时调用函数 bar()。

Live demo

解决方案

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

理想的解决方案

Leaflet 绘制了自己的方法来检测按钮何时被按下，但在我看来，它们只为更高级别执行此操作。例如：

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

-Leaflet Docs

这允许我在用户选择了三个选项中的任何之后调用foo()，呈现他们只是完成了删除按钮交互的处理。

我无法在文档中找到一种方法来监听传单绘制在被按下的单个按钮上触发事件。

Answer 1

取消/禁用函数的处理程序存储为您的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);
};

处理程序的来源是here，虽然这很好用，但您必须小心可能会更改处理程序功能的未来版本的 Leaflet.Draw。

Answer 2

Leaflet.draw 0.4.14最新版你可以使用

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