SuperMap iClient3D for WebGL加载GIF动图

---

前言

SuperMap3D的billboard可以支持加载jpg、png等图片，但是在实际开发中可以会有需要加载gif动图的需求，遇到这种情况又该咋办呢？

---

一、思路

我们都知道GIF动图实际上是由很多张图片一帧一帧拼凑起来的，那么是否可以把GIF拆成多张图片，然后再用billboard添加再根据图片顺序更新呢？经过在网上的查找，发现libgif.js插件具有将GIF拆分的功能。

二、使用步骤

1.引入libgif.js

<script type="text/javascript" src="./js/libgif.js"></script>

2.创建gif实例

		//创建dom
        let gif = document.createElement('gif');
        gif.src = "images/R-C.gif";
        // 新建gif实例
        let gifInstance = new SuperGif({ gif: gif } );

3.解析gif动图并存入数组使用entity加载

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

4.播放gif动图

            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