Cesium中添加GIF图片

Cesium官方给了将视频投影到几何体的Demo，不得不说第一眼看到还是比较惊艳的，那么Cesium能不能将gif图片也投影到几何体呢，答案是不能像视频一样直接投影，但是如果我们借助一些其它工具，还是能实现这个功能的。
下面以billboard加载gif图片为例展开说明，如果你要投影到其它图形，原理都是一样的。
Cesium Billboard如何加载gif图片?

实现思路

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

准备工作

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

解析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)
        });
    })

}