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

Win*_*ron 28 javascript asynchronous leaflet

所以我用leafet.js制作这个应用程序.这个应用程序要求我必须手动将网格绘制到屏幕上,我已经注意了一个draw_grid()将一堆多边形绘制到屏幕上的功能.

我有这个函数,我打电话来触发传单地图的更改. zoom- 缩放整数,size是一个像{x:1,y:1}控制绘制到地图上的瓷砖大小的字典.(他们需要改变,因为在下面绘制瓷砖的单位是地图上的纬度,长点.

function changeZoom(zoom,size){
    map.setZoom(zoom); 
    setSize(size);   
    setTimeout(drawGrid,500)s;
Run Code Online (Sandbox Code Playgroud)

}

我必须使用setTimeout的原因是因为传单ignores任何绘图命令到地图上(我正在做一个图层),直到地图完成动画.

如何异步执行此操作?

Pat*_*k D 46

您可以map.zoomend此处使用API中描述的事件

map.on('zoomend', function() {
    drawGrid();
});
Run Code Online (Sandbox Code Playgroud)

一旦地图完成缩放动画,它将调用该drawGrid函数.

  • 在"滚动缩放"期间,此事件似乎仍然多次出现在我身上.是因为我正在使用触摸板吗? (3认同)

Cod*_*ike 14

在更新版的Leaflet中," zoomed"不再是一个事件.现在有" zoomstart"和" zoomend"事件:

map.on("zoomstart", function (e) { console.log("ZOOMSTART", e); });
map.on("zoomend", function (e) { console.log("ZOOMEND", e); });
Run Code Online (Sandbox Code Playgroud)