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

Identify when Leaflet Draw cancel button is clicked

问题

我正在为我的应用程序使用 leaflet draw,并且 'remove' 按钮处于活动状态。删除按钮有三个选项:

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

我希望在用户单击 保存 时调用函数 foo(),但是,我希望在用户单击 [=] 时调用函数 bar() 40=]取消.

Live demo

解决方案

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

理想的解决方案

Leaflet 绘制了自己的方法来检测按钮何时被按下,但在我看来他们只在更高一级上这样做。例如:

draw:deletestop The type of edit this is. One of: remove Triggered when the user has finished removing shapes (remove mode) and saves.

- Leaflet Docs

这允许我在用户选择了三个选项中的 任何 之后调用 foo(),渲染他们已经简单地完成了删除按钮交互的处理。

我无法在文档中找到一种方法来侦听传单绘制在按下各个按钮时触发事件。

cancel/disable 函数的处理程序存储为 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 的未来版本,它可能会改变处理程序的功能。

最新版本Leaflet.draw0.4.14你可以用

map.on('draw:toolbarclosed', function(){ //Add code here});