Cesium专栏-Billboard加载Gif图片

前段时间，在某些交流群里看到有朋友在问Billboard如何加载Gif图片，正好，Github上有一个类似的效果案例，但是无奈，案例的源码打包封装到Cesium里面了，而且Cesium的版本过于老旧，于是研究了一下，基于libgif-js做了一个Billboard加载Gif图片的案例，分享给有需要的朋友。

效果图

原始GIF图片

代码量也比较少，直接分享

var div = document.createElement("div");
var img = document.createElement("img");
div.appendChild(img);
img.src = "cheering_minions.gif";

img.onload = () => {
  var rub = new SuperGif({
    gif: img
  });

  rub.load(() => {
    var entity = viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(114, 30),
      billboard: {
        image: new Cesium.CallbackProperty(() => {
          return rub.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)
      }
    });

    viewer.trackedEntity = entity;
  });
}

libgif-js 具体的参数设置以及方法可以参考libgif-js的GitHub地址