2022年2月28日遇到的问题

在使用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)
}