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:检测地图何时完成缩放的主要内容,如果未能解决你的问题,请参考以下文章