mapbox地图resize增加过渡动画避免不流畅显示背景底色

问题描述

在需要改变mapbox地图宽度或者高度的情况下，为了效果较好通常会加入css动画animation。但是在事件发生时调用map.reszie()方法时，地图resize也会比较生硬，显示出背景底色。

如下图：

原因分析：

很显然为了使地图过渡更自然，需要重复的调用resize方法。

解决方案：

以下是一段代码示例：

mapChange() {
  let handle = null;
  function resize() {
    this.map.resize();
  }
  resize.call(this);
  handle = setInterval(resize.bind(this), 15);
  setTimeout(() => {
    if (handle) clearInterval(handle);
  }, 300);
}

1. 在change事件发生时，调用map.resize()方法。
2. 使用setInterval定时器每隔15ms调用一下resize。
3. 当300ms后，清除掉定时器，在这个过程中，会调用20次左右resize方法。

当然也可以使用浏览器的requestAnimationFrame方法。