重写Leaflet事件

Question

我尝试像这样重写boxzoom事件，

map.on('boxzoomend', function(e) {
    console.log('end')
})

但是，boxzoom仍会缩放，我不知道如何停止它，仅在控制台中打印文本。 我希望将boxzoom重写为以下内容

您能否提供重写事件的正确方法？ 谢谢。

Answer 1

缩放不是在boxzoomend事件中执行，而是在BoxZoom处理程序中执行。 让我引用src/map/handler/Map.BoxZoom.js的Leaflet源代码：

_onMouseUp: function (e) {

    ...

    this._map
        .fitBounds(bounds)
        .fire('boxzoomend', {boxZoomBounds: bounds});
},

实现所需功能的更好方法是创建一个扩展BoxZoom处理程序的新处理程序，修改所需的方法。

我建议您先阅读Leaflet教程，特别是在创建Leaflet插件之前。

这个想法是扩展BoxZoom处理程序：

L.Map.BoxPrinter = L.Map.BoxZoom.extend({

...修改_onMouseUp方法...

    _onMouseUp: function (e) {

...因此它不会缩放，而只是打印内容：

        ...
        console.log(bounds);
        this._map.fire('boxzoomend', {boxZoomBounds: bounds});
   }
}

并且如本教程所述，钩住处理程序并为其提供一些映射选项：

L.Map.mergeOptions({boxPrinter: true});
L.Map.addInitHook('addHandler', 'boxPrinter', L.Map.BoxPrinter);

在执行此操作时，默认情况下为所有地图实例禁用默认的BoxZoom处理程序：

L.Map.mergeOptions({boxZoom: false});

在这个工作示例中，整个过程看起来像。