Leaflet.js：检测地图何时完成缩放

Question

所以我用 leafet.js 制作这个应用程序。

这个应用程序要求我必须手动在屏幕上绘制网格， 我已经在

draw_grid()

函数中进行了处理，该函数将一堆多边形绘制到屏幕上。

我有一个函数，我调用它来触发传单地图的更改。

zoom

- 缩放整数，

size

是一个类似于

{x:1,y:1}

的字典，控制绘制在地图上的图块的大小。 （它们需要更改，因为绘制图块的单位是地图上的纬度、经度点。

function changeZoom(zoom,size){
    map.setZoom(zoom); 
    setSize(size);   
    setTimeout(drawGrid,500)s;
}

我必须使用

setTimeout

的原因是因为传单忽略地图上的任何绘图命令（我将其作为图层执行），直到地图完成动画。

如何异步执行此操作？

Answer 1

您可以使用

map.zoomend

事件，如 API 中所述此处

map.on('zoomend', function() {
    drawGrid();
});

地图完成缩放动画后，就会调用

drawGrid

函数。

Answer 2

在新版本的Leaflet中，“

zoomed

”不再是一个事件。现在有“

zoomstart

”和“

zoomend

”事件：

map.on("zoomstart", function (e) { console.log("ZOOMSTART", e); });
map.on("zoomend", function (e) { console.log("ZOOMEND", e); });

Answer 3

这是管理单击的传单缩放控件的最佳方式

    /*Zoom Control Click Managed*/
    var bZoomControlClick = false;
    mymap.on('zoomend',function(e){
        var currZoom = mymap.getZoom();
        if(bZoomControlClick){
            console.log("Clicked "+currZoom);
        }
        bZoomControlClick = false;
    });     
    var element = document.querySelector('a.leaflet-control-zoom-in');
    L.DomEvent.addListener(element, 'click', function (e) {
        bZoomControlClick = true;
        $(mymap).trigger("zoomend");
    });
    var element1 = document.querySelector('a.leaflet-control-zoom-out');
    L.DomEvent.addListener(element1, 'click', function (e) {
        bZoomControlClick = true;
        $(mymap).trigger("zoomend");
    });