Cesium从入门到放弃10：gif图片投影

Cesium官方给了将视频投影到几何体的Demo，不得不说第一眼看到还是比较惊艳的，那么Cesium能不能将gif图片也投影到几何体呢，答案是不能像视频一样直接投影，但是如果我们借助一些其它工具，还是能实现这个功能的。大概就是这个效果

下面以billboard加载gif图片为例展开说明，如果你要投影到其它图形，原理都是一样的。
Cesium Billboard如何加载gif图片?

1. 实现思路

将gif的每一帧解析出来，通过CallbackProperty动态修改图片

2.准备工作

libgif就是这篇文章要用到的一个工具，你可以通过npm i libgif --save安装它。

3.解析gif图片

import SuperGif from 'libgif'
function loadGif(url, imageArr = []) {
    const img = document.createElement('img');
    img.src = url
    // gif库需要img标签配置下面两个属性
    img.setAttribute('rel:animated_src', url)
    img.setAttribute('rel:auto_play', '0')
    document.body.appendChild(img)
    // 新建gif实例
    const rub = new SuperGif({ gif: img });
    return new Promise((resolve) => {
        rub.load(() => {
            for (let i = 1; i <= rub.get_length(); i++) {
                // 遍历gif实例的每一帧
                rub.move_to(i);
                imageArr.push(rub.get_canvas().toDataURL())
            }
            resolve(imageArr)
            // document.body.removeChild(img)
        });
    })

}

4.动态修改Biallboard图片

const gif=[]
const url='static/images/al.gif'
loadGif(url,gif)
viewer.entities.add({
      position:Cesium.Cartesian3.fromDegrees(100,40),
      billboard:{
        verticalOrigin:Cesium.VerticalOrigin.BASELINE,
          image:new Cesium.CallbackProperty(()=>{
            if(gif.length){
              if(i<speed*(gif.length-1)){
                i++
              }else{
                i=0
              }
              return gif[Math.floor(i/speed)]
            }else{
              return url//因为loadGif是异步的，在解析完成之前先使用原图
            }
          },false)
      }
})