重寫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});

在這個工作示例中，整個過程看起來像。