重写传单事件

Rewrite Leaflet event(重写传单事件)

问题描述

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

I try to rewrite the boxzoom event, like this,

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

但是，boxzoom 仍然缩放，我不知道如何停止它，只是在控制台中打印文本.我希望将boxzoom重写为如下

However, the boxzoom still zoomed and I have no idea how to stop it and just print text in console. I hope to rewrite boxzoom as the following

1. 停止缩放
2. 在控制台中打印文本

你能提供重写事件的正确方法吗?谢谢.

Can you provide correct way to rewrite the event? Thank you.

推荐答案

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

The zooming is not performed in the boxzoomend event, but rather in the BoxZoom handler. Let me quote the Leaflet source code from src/map/handler/Map.BoxZoom.js:

_onMouseUp: function (e) {

    ...

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

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

A better way to achieve the functionality you want is to create a new handler that extends the BoxZoom handler, modifying the methods that you need.

我建议您阅读 传单教程，尤其是 在此之前创建 Leaflet 插件.

I recommend that you read the Leaflet tutorials, specially the ones on creating Leaflet plugins before doing this.

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

The idea is to extend the BoxZoom handler:

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

...修改 _onMouseUp 方法...

...modifying the _onMouseUp method...

    _onMouseUp: function (e) {

...所以它不是缩放，而是打印东西:

...so that instead of zooming, it just prints things:

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

正如教程所解释的，挂钩处理程序并为其提供一些地图选项:

And as the tutorial explains, hook the handler and provide some map options for it:

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

当我们这样做时，默认禁用所有地图实例的默认 BoxZoom 处理程序:

While we're at it, disable the default BoxZoom handler for all map instances by default:

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

整个事情看起来像 这个工作示例.

这篇关于重写传单事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！