1、项目场景
实际开发中我们经常会有动图加载的需求,而Cesium
不支持纹理贴动图,怎么样基于Cesium实现动图的加载,值得我们研究一波。
2、解决方案
首先,查阅相关资料,容易得知:动图的格式有很多种,主要有gif、png、flv、swf等格式。而gif是我们最常见的动图格式,它的原理是通过对多帧图片按时间序列进行切换,从而达到动画的效果。
其次,了解了gif动图原理之后,考虑到Cesium的Billboard支持单帧纹理贴图,如果能够将gif动图进行解析,获得时间序列对应的每帧图片,然后按照时间序列动态更新Billboard的纹理,即可实现动图纹理效果。
然后,我们如何进行gif动图的解析?经过不懈的探寻,无独有偶,发现gifler第三方库和libgif一样,也能够将gif转化为一帧帧图像,正好能够满足我们的需求!!!
最后,顺利通过了首先,其次,然后,还不得马不停蹄的赶紧实现效果。
3、编码实现
/**
* 加载gif
*/
function loadGif() {
let url = '../../assets/images/minions.gif'
let gif = gifler(url)
let entity = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(point[0], point[1]),
billboard: {
scale: 0.25
}
})
// 解析gif每帧图片,按时间序列进行切换
gif.frames(document.createElement('canvas'), function (ctx, frame) {
entity.billboard.image = new Cesium.CallbackProperty(() => {
return frame.buffer.toDataURL()
}, false)
})
}
完整demo可参见practicalCesiumDemos中loadGif2。