博客

Cesium添加GIF图

cesium是canvas画出来的界面，如果直接写入gif图的话，cesium只会识别到一帧的动图并显示一帧的的画面



通过libgif.js加上cesium实现动画的Cesium.CallbackProperty来实现gif在cesium中动态展示效果

1.libgif.js（

libgif项目地址

——————–

或github仓库

）

使用目的：通过libgif工具js将gif图拆解成一帧一帧的图片

2.Cesium.CallbackProperty

CallbackProperty是一个类，它在不断地自我调用，每当返回的对象有改变，就抛出改编后的值更新视图

通过CallbackProperty去处理libgif拆解的一帧一帧的图片，更新视图显示

代码

viewer = new Cesium.Viewer('cesiumContainer');
let gifimg = document.getElementById('one')//gif图片
let superGif = new SuperGif({
  gif: gifimg
});
superGif.load(function () {
  let material = new Cesium.ImageMaterialProperty({
    image: new Cesium.CallbackProperty(() => {
      return superGif.get_canvas().toDataURL('image/png');
    }, true),
    repeat: new Cesium.Cartesian2(1, 1)
  });
  viewer.entities.add({
    id: 'tttt',
    name: 'a',
    type: "marker",
    position: Cesium.Cartesian3.fromDegrees(120, 30, 0),
    ellipse: {
      semiMinorAxis: 150000.0,
      semiMajorAxis: 150000.0,
      material
    },
    label: {
      text: 'gif纹理',
      font: '20px 微软雅黑',
      style: Cesium.LabelStyle.FILL_AND_OUTLINE,
      outlineColor: new Cesium.Color.fromCssColorString("tranparent"),
      fillColor: new Cesium.Color.fromCssColorString("#fff"),
      scaleByDistance: new Cesium.NearFarScalar(1.5e2, 2.0, 1.5e7, 0.5),//控制缩放
      outlineWidth: 5,
      verticalOrigin: Cesium.VerticalOrigin.CENTER,
    },
  })
});