SuperMap3D的billboard可以支持加载jpg、png等图片,但是在实际开发中可以会有需要加载gif动图的需求,遇到这种情况又该咋办呢?
我们都知道GIF动图实际上是由很多张图片一帧一帧拼凑起来的,那么是否可以把GIF拆成多张图片,然后再用billboard添加再根据图片顺序更新呢?经过在网上的查找,发现libgif.js插件具有将GIF拆分的功能。
<script type="text/javascript" src="./js/libgif.js"></script>
//创建dom
let gif = document.createElement('gif');
gif.src = "images/R-C.gif";
// 新建gif实例
let gifInstance = new SuperGif({ gif: gif } );
for (let i=1; i <= gifInstance.get_length(); i++) {
// 遍历gif实例的每一帧
gifInstance.move_to(i);
let imgImage = new Image();
//canvas生成base64图片数据
imgImage.src = gifInstance.get_canvas().toDataURL('image/png',0.8);
imgs.push(imgImage.src)
}
console.log(imgs)
//entity绘制
let gifEntity = viewer.entities.add({
position: SuperMap3D.Cartesian3.fromDegrees(116,30),
billboard: {
image: imgs[0],
scale: 0.5
}
});
viewer.clock.onTick.addEventListener(function(clock) {
let seconds = clock.currentTime.secondsOfDay;
let aa = Math.floor(seconds * 10.0) % imgs.length
// gifEntity.billboard.imageIndex = aa;
console.log(aa)
gifEntity._billboard.image._value = imgs[aa]
// console.log(aa)
});
1693884955312