canvas + Cesium 动画图片材质

      let osm = Cesium.createOpenStreetMapImageryProvider({
        url: "https://a.tile.openstreetmap.org/",
      })
      let viewer = new Cesium.Viewer(this.$refs.cesiumContainer, {
        imageryProvider: osm,
        contextOptions: {
          webgl: {
            alpha: true,
          },
        },
        selectionIndicator: false,
        animation: false, //是否显示动画控件
        baseLayerPicker: false, //是否显示图层选择控件
        geocoder: false, //是否显示地名查找控件
        timeline: false, //是否显示时间线控件
        sceneModePicker: false, //是否显示投影方式控件
        navigationHelpButton: false, //是否显示帮助信息控件
        infoBox: false, //是否显示点击要素之后显示的信息
        fullscreenButton: false,
      })
      //取消双击事件
      viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
        Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
      )
      //设置homebutton的位置
      Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
        110.15,
        34.54,
        110.25,
        34.56
      ) //Rectangle(west, south, east, north)
      //设置初始位置
      viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(110.2, 34.55, 3000000),
      })

      //开启深度检测
      viewer.scene.globe.depthTestAgainstTerrain = true

      let rotation = Cesium.Math.toRadians(30)
      let curCanvas = "a"
      function getRotationValue() {
        rotation += 0.005
        return rotation
      }

      function drawCanvas(time, result) {
        let canvas = document.getElementById("canvas-" + curCanvas)
        let context = canvas.getContext("2d")
        context.clearRect(0, 0, canvas.width, canvas.height)
        context.font = "italic 40pt Calibri"
        context.fillStyle = "red"
        context.fillText(
          Cesium.JulianDate.toDate(Cesium.JulianDate.now()).getTime(),
          20,
          100
        )
        curCanvas = curCanvas === "a" ? "b" : "a"
        return canvas
      }

      let i = 0
      viewer.entities.add({
        name: "Rotating rectangle with rotating texture coordinate",
        rectangle: {
          coordinates: new Cesium.CallbackProperty(function () {
            i = i + 0.01
            return Cesium.Rectangle.fromDegrees(
              -90.0,
              30.0 + i,
              -70.0,
              35.0 + i
            )
          }, false),
          material: new Cesium.ImageMaterialProperty({
            image: new Cesium.CallbackProperty(drawCanvas, false),
            transparent: true,
          }),
          rotation: new Cesium.CallbackProperty(getRotationValue, false),
          stRotation: new Cesium.CallbackProperty(getRotationValue, false),
        },
      })
      viewer.zoomTo(viewer.entities)