Cesium系列产品，实现gif 布告板（billboard）

实现思路以及原理：

1.billboard支持图片格式可以是图片地址也可以是base64图片内容；

2.获取gif图片的帧值更新对应image；

3.Cesium.CallbackProperty;

根据上面思路，我们可以找有没有现成获取gif帧换面的工具：buzzfeed/libgif-js

有了上面的工具就已经成功一半了；

libgif插件需要一个dom对象，所以我们在页面里面增加一个标签：

<script src="libgif.js"></script>
 <script src="rubbable.js"></script>
<img id="example1" src="images/Rotating_earth_(small).gif" rel:auto_play="1" width="467" height="375" rel:rubbable="1" />

实现如下：

function fnLoadGif(obj) {
 var superGif = new RubbableGif({
                    gif: obj.img
                });

 superGif.load(() => {
 var billboardEntity = viewer.entities.add({
                        position: Cesium.Cartesian3.fromDegrees(obj.position.x, obj.position.y, obj
                            .position.z),
                        billboard: {
                            image: new Cesium.CallbackProperty(() => {
 return superGif.get_canvas().toDataURL(
 "image/png");
                            }, false),
                            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                            heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
                            scaleByDistance: new Cesium.NearFarScalar(500, 1.0, 2000, 0.1)
                        }
                    });
                });
            }

fnLoadGif({
                img: document.querySelector("#example1"),
                position: {
                    x: 120.42867,
                    y: 31.32425,
                    z: 20
                }
            });