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)
}
})