在使用leaflet绘制地图时,经常会出现因为网太慢地图上有些空白加载不出来(如下图所示),此时只能对地图进行缩放或者移动让他重新加载
解决方法(来自我翻看官网文档时想到的):
(1)首先使用moveend事件(该事件为地图停止移动后触发的事件)对地图进行监听
(2)定义一个num变量,作用为地图向地图服务器重新请求的次数
(3)定义一个定时器
setInterval(() => {
// layer.isLoading() 当前视图内存在未加载的网格层图块时返回true
if (layer.isLoading()) {
// layer.redraw() 使图层清除所有切片并再次请求它们。
layer.redraw()
num++
} else {
clearInterval(globalTimer)
return
}
// 当请求次数超过三次时,结束请求
if (num > 2) {
clearInterval(globalTimer)
return
}
}, 5000)
(4)之前我以为这样就结束了,后来发现当我地图某块区域没加载时,进入定时器函数;此时我突然变到另一块地图区域,当前我视图内依然存在未加载的图块,然后上个定时器依然在工作。最终导致的结果是我进入某个区域时,会看到疯狂刷屏
(5)解决(4)的那个问题,定义一个全局的变量,让定时器函数赋值给那个变量(就是如同下面代码),只不过timer定义成全局的。
var timer = setInterval(function(){},5000)
在定时器前面加一个
if (globalTimer !== undefined) {
clearInterval(globalTimer)
} // globalTimer 为那个全局变量
当之前存在定时器时,会先关闭上一个,然后重新创建定时器
(6)我说的可能很混乱,最后把全部代码贴出来,看最终代码应该好理解
var globalTimer
map.on("moveend", function () {
mapRedraw()
})
function mapRedraw() {
if (globalTimer !== undefined) {
clearInterval(globalTimer)
}
let num = 0
globalTimer = setInterval(() => {
if (layer.isLoading()) {
layer.redraw()
num++
} else {
clearInterval(globalTimer)
return
}
if (num > 2) {
clearInterval(globalTimer)
return
}
}, 5000)
}