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

Posted

技术标签:

【中文标题】Leaflet.js:检测地图何时完成缩放【英文标题】:Leaflet.js: detecting when map finishes zooming 【发布时间】:2013-09-04 08:37:40 【问题描述】:

所以我正在用leafet.js 制作这个应用程序。 这个应用程序要求我必须手动在屏幕上绘制网格, 我已经在 draw_grid() 函数中处理了该函数,该函数将一堆多边形绘制到屏幕上。

我有这个函数,我正在调用它来触发传单地图的更改。 zoom - 缩放整数,size 是一个类似x:1,y:1 的字典,用于控制绘制到地图上的图块的大小。 (它们需要更改,因为绘制图块的单位是地图上的纬度、经度点。

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

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

如何改为异步执行此操作?

【问题讨论】:

【参考方案1】:

您可以使用map.zoomend 事件,API 中描述了here

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

地图完成缩放动画后,会调用drawGrid函数。

【讨论】:

在“滚动放大”期间,这个事件似乎仍然对我触发了很多次。是因为我用的是触控板吗? 有没有办法检查多个事件,比如“平移”和“缩放”?我还检查了“加载”事件没有被触发。 @SamSelikoff 似乎与触摸板无关。如果没有滚动超高速,也会通过鼠标滚轮发生。也找不到任何去抖动选项。因此,逻辑需要手动实现。【参考方案2】:

在较新版本的 Leaflet 中,“zoomed”不再是一个事件。现在有“zoomstart”和“zoomend”事件:

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

【讨论】:

【参考方案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");
    );

【讨论】:

以上是关于Leaflet.js:检测地图何时完成缩放的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Swift 中检测缩放对地图的影响

leaflet.js加载谷歌离线地图

leaflet.js加载谷歌离线地图

【可视化】python地图可视化_Folium

Leaflet.js 地图不占用全宽 [React.js]

Leaflet.js 将地图集中在一组标记上