通过Mars3d支持的gif动图加载方式

   

两种方式实现：

（一）

通过div的方式加载，但是效率不高，只能几个就卡死。

（二）

需求是把gif动图叠在太湖的区域显示，可以通过该方法尝试。

方法一：

// [终点]绘制台风当前位置gif点
    const gifGraphic = new mars3d.graphic.DivGraphic({
      position: [endItem.lon, endItem.lat],
      style: {
        html: `<img src="img/icon/typhoon.gif">`,
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.CENTER
      }
    })
    this.typhoonLayer.addGraphic(gifGraphic)

或者使用下述方法二：

// 利用第3方库（libgif.js）加载gif
function addDemoGraphic12(graphicLayer) {
  const gifImg = document.createElement("img")
  gifImg.setAttribute("rel:animated_src", "img/icon/typhoon.gif")
  gifImg.setAttribute("rel:auto_play", "1") // 设置自动播放属性

  // eslint-disable-next-line no-undef
  const superGif = new SuperGif({ gif: gifImg })

  superGif.load(function () {
    const graphic = new mars3d.graphic.BillboardEntity({
      position: new mars3d.LngLatPoint(116.3, 30.8, 1000),
      style: {
        image: new Cesium.CallbackProperty(() => {
          // 转成base64,直接加canvas理论上是可以的，这里设置有问题
          return superGif.get_canvas().toDataURL()
        }, false),
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.CENTER
      },
      attr: { remark: "示例12" }
    })
    graphicLayer.addGraphic(graphic)
  })
}

示例中的方法：

参考示例，和这个类似需要将gif图循环去改变，但是gif只显示了第一帧。效果不好。

http://mars3d.cn/editor-vue.html?id=graphic/entity/billboard

 示例中，示例14可以使动图动起来，但是只是改变显示的位置。

具体实现参考该教程实现：

Cesium笔记之加载GIF图_Spider.Wang的博客-CSDN博客_cesium加载gif