Cesium笔记之加载GIF图

Ceisum 的 BillboardGraphics 方法支持加载并显示 jpeg png 等格式的图片资源。实际开发中我们经常会有 GIF 图加载的需求，而 Cesium 没有直接支持 GIF 格式的图片格式，那么怎么加载 GIF 图呢?

1.解决思路

GIF 图是通过时间轴叠加 N 张图片实现图片的动态变化。因此如果能够通过某种方式将 GIF 图再解构成一张张的图片，并通过 Cesium 的 BillboardGraphics 按照时间顺序更新图片，即能实现 GIF 图的加载！

经过调研发现，第三方库 libgif 能够将 GIF 转化为 一组图片对象（DataUrl），能够完全满足需求！

2.具体实现

首先创建图层：

/*
* 初始化地图
*/
function initMap() {
  window.viewer = new Cesium.Viewer('map', {
    animation: false,
    fullscreenButton: false,
    baseLayerPicker: false,
    geocoder: false,
    homeButton: false,
    infoBox: false,
    sceneModePicker: false,
    selectionIndicator: false,
    timeline: false,
    navigationHelpButton: false,
    imageryProvider: Cesium.createTileMapServiceImageryProvider({
      url : '../lib/Cesium/Assets/Textures/NaturalEarthII',
      fileExtension: 'jpg'
    })
  });

  // 去除版权信息
  viewer._cesiumWidget._creditContainer.style.display = 'none';

  // 显示帧率插件
  viewer.scene.debugShowFramesPerSecond = true;
}

其次调用 libgif 库实现图片解构，同时循环更新 Cesium 图片对象的 数据源：

/*
* gif测试
*/
function testGif() {
  const gifDiv = document.createElement('div');
  const gifImg = document.createElement('img');

  // gif库需要img标签配置下面两个属性
  gifImg.setAttribute('rel:animated_src', '../res/images/timg.gif')
  gifImg.setAttribute('rel:auto_play', '0')
  gifDiv.appendChild(gifImg);

  // 新建gif实例
  var rub = new SuperGif({ gif: gifImg } );

  rub.load(function () {
    var img_list = [];

    // 获取 gif 图的每一帧图片
    for (var i=1; i <= rub.get_length(); i++) {
      // 遍历gif实例的每一帧
      rub.move_to(i);
      img_list.push(rub.get_canvas().toDataURL())
    }

    let flag = 0;
    let len = img_list.length;
    // 创建图片实体
    let gif_entity = viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
      billboard: {
        image: img_list[0], // default: undefined
        show: true, // default
        scale: 0.3 // default: 1.0
      }
    });

    // 循环更新 billboard
    setInterval(() => {
      flag++;
      if (flag >= len) {
        flag = 0;
      }
      gif_entity.billboard.image = img_list[flag];
    }, 1000 / 30);
  });
}

3.最终效果

4.总结

以上只是提供一个实现 GIF 图加载的思路，大家有更好的解决办法可以进一步交流！

注：示例代码可参见 CesiumLoadGIF。

---

created by @SpiderWang
转载请注明作者及链接