Cesium從入門到放棄：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)
      }
})