无法用include()方法覆盖Leaflet的BoxZoom._onPointerUp方法

问题描述 #

尝试用L.Map.BoxZoom.include()重载_onPointerUp方法，以在框选缩放时捕获按键事件，但自定义代码始终不执行，断点无法触发，原函数依然运行。试过以下操作均无效：

• 使用include()覆盖或直接修改prototype函数
• 在L.Map.addInitHook内部/外部执行修改
• 在插件定义内部/外部执行修改
• 在document.onload内部执行修改
  此前用include()成功添加过新函数，首次修改现有方法遇到问题。

尝试的重载代码：

L.Map.BoxZoom.include({
    _onPointerUp: function (evt) {
        if (evt.button !== 0) { return; }
        this._finish();
        if (!this._moved) { return; }
        this._clearDeferredResetState();
        this._resetStateTimeout = setTimeout(this._resetState.bind(this), 0);
        const bounds = new LatLngBounds(
            this._map.containerPointToLatLng(this._startPoint),
            this._map.containerPointToLatLng(this._point));

        if (evt.originalEvent.key == 'x') { // 新增按键判断逻辑
            console.log("boxzoom + x");
        }
        else { // 保留原缩放行为
            this._map
                .fitBounds(bounds)
                .fire('boxzoomend', { boxZoomBounds: bounds });
        }
    }
});

解决方案 #

1. 确保重载代码执行在地图初始化之前 #

Leaflet的BoxZoom等handler是在地图初始化时动态实例化的，若在地图创建后才修改原型，已存在的BoxZoom实例不会同步更新方法。必须把重载代码放在L.map()调用之前执行。

2. 直接修改原型链（替代include） #

部分场景下include()可能因Leaflet内部继承逻辑失效，直接修改原型更可靠：

// 必须在L.map()之前执行
L.Map.BoxZoom.prototype._onPointerUp = function (evt) {
    if (evt.button !== 0) { return; }
    this._finish();
    if (!this._moved) { return; }
    this._clearDeferredResetState();
    this._resetStateTimeout = setTimeout(this._resetState.bind(this), 0);
    const bounds = new L.LatLngBounds(
        this._map.containerPointToLatLng(this._startPoint),
        this._map.containerPointToLatLng(this._point));

    // 兼容按键判断
    const key = evt.originalEvent?.key || evt.originalEvent?.keyCode;
    if (key === 'x' || key === 88) {
        console.log("boxzoom + x");
    } else {
        this._map
            .fitBounds(bounds)
            .fire('boxzoomend', { boxZoomBounds: bounds });
    }
};

3. 地图初始化后直接替换实例方法 #

若必须在地图初始化后修改，可通过addInitHook获取已实例化的BoxZoom对象并替换方法：

L.Map.addInitHook(function() {
    // 保存原方法，方便后续调用
    const originalOnPointerUp = this.boxZoom._onPointerUp;
    this.boxZoom._onPointerUp = function (evt) {
        // 自定义按键判断逻辑
        const key = evt.originalEvent?.key || evt.originalEvent?.keyCode;
        if (key === 'x' || key === 88) {
            console.log("boxzoom + x");
            return; // 跳过原缩放逻辑
        }
        // 执行原方法逻辑
        originalOnPointerUp.call(this, evt);
    };
});

这种方式无需修改原型，直接针对已创建的handler实例生效。

4. 修复按键事件获取逻辑 #

原代码中evt.originalEvent.key可能存在未兼容originalEvent不存在的情况，建议添加可选链判断，并兼容keyCode以提升兼容性。

内容的提问来源于stack exchange，提问作者Geth44