cesium加载动图方案二：通过gifler库实现

1、项目场景

实际开发中我们经常会有动图加载的需求，而Cesium
不支持纹理贴动图，怎么样基于Cesium实现动图的加载，值得我们研究一波。

---

2、解决方案

首先，查阅相关资料，容易得知：动图的格式有很多种，主要有gif、png、flv、swf等格式。而gif是我们最常见的动图格式，它的原理是通过对多帧图片按时间序列进行切换，从而达到动画的效果。

其次，了解了gif动图原理之后，考虑到Cesium的Billboard支持单帧纹理贴图，如果能够将gif动图进行解析，获得时间序列对应的每帧图片，然后按照时间序列动态更新Billboard的纹理，即可实现动图纹理效果。

然后，我们如何进行gif动图的解析？经过不懈的探寻，无独有偶，发现gifler第三方库和libgif一样，也能够将gif转化为一帧帧图像，正好能够满足我们的需求！！！

最后，顺利通过了首先，其次，然后，还不得马不停蹄的赶紧实现效果。

---

3、编码实现

/**
 * 加载gif
 */
function loadGif() {
  let url = '../../assets/images/minions.gif'
  let gif = gifler(url)

  let entity = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(point[0], point[1]),
    billboard: {
      scale: 0.25
    }
  })

  // 解析gif每帧图片，按时间序列进行切换
  gif.frames(document.createElement('canvas'), function (ctx, frame) {
    entity.billboard.image = new Cesium.CallbackProperty(() => {
      return frame.buffer.toDataURL()
    }, false)
  })
}

​完整demo可参见practicalCesiumDemos中loadGif2。

4、成果展示