cesium加载动图方案一：通过libgif库实现

1、项目场景

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

---

2、解决方案

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

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

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

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

---

3、编码实现

/**
 * 加载gif
 */
function loadGif() {
  let url = '../../assets/images/minions.gif'
  let gifDiv = document.createElement('div')
  let gifImg = document.createElement('img')

  // gif库需要img标签配置下面两个属性
  gifImg.setAttribute('rel:animated_src', url)
  gifImg.setAttribute('rel:auto_play', '1') // 设置自动播放属性
  gifDiv.appendChild(gifImg)

  let superGif = new SuperGif({
    gif: gifImg
  })
  superGif.load(function () {
    viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(point[0], point[1]),
      billboard: {
        image: new Cesium.CallbackProperty(() => {
          // 转成base64,直接加canvas理论上是可以的，这里设置有问题
          return superGif.get_canvas().toDataURL()
        }, false),
        scale: 0.25
      }
    })
  })
}

​完整demo可参见practicalCesiumDemos中loadGif1。

4、成果展示