074：vue+cesium 实现动态图片旋转

在Vue项目中使用Cesium实现动态图片旋转，你可以创建一个Vue组件，在该组件的模板中使用Cesium的Viewer来展示图片，并且可以通过编程方式控制图片的旋转。

以下是一个简单的例子：

<template>
  <div id="cesiumContainer" style="width: 100%; height: 100vh;"></div>
</template>
 
<script>
import Cesium from 'cesium/Cesium'
import 'cesium/Widgets/widgets.css'
 
export default {
  name: 'CesiumRotatingImage',
  data() {
    return {
      viewer: null,
      imageEntity: null
    }
  },
  mounted() {
    this.viewer = new Cesium.Viewer('cesiumContainer', {
      animation: false, // 是否显示动画控件
      baseLayerPicker: false, // 是否显示图层选择控件
      geocoder: false, // 是否显示地理编码器
      timeline: false, // 是否显示时间线控件
      navigationHelpButton: false, // 是否显示帮助按钮
      sceneModePicker: false, // 是否显示场景模式选择控件
      infoBox: false // 是否显示点击要素的信息
    })
 
    const canvas = document.createElement('canvas')
    canvas.width = 100
    canvas.height = 100
    const ctx = canvas.getContext('2d')
    ctx.fillStyle = 'red'
    ctx.beginPath()
    ctx.arc(50, 50, 40, 0, 2 * Math.PI)
    ctx.fill()
 
    const image = new Image()
    image.src = canvas.toDataURL('image/png')
 
    this.imageEntity = this.viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
      billboard: {
        image: image,
        scale: 2.0
      }
    })
 
    this.animate()
  },
  methods: {
    animate() {
      requestAnimationFrame(this.animate)
      this.imageEntity.orientation = Cesium.Quaternion.fromAxisAngle(Cesium.Cartesian3.UNIT_Z, Cesium.Math.toRadians(this.viewer.clock.currentTime.seconds * 360.0 / 60.0))
      this.viewer.scene.requestRender()
    }
  }
}
</script>

在这个例子中，我们首先在mounted钩子中创建了Cesium的Viewer实例，并通过创建一个canvas元素来绘制一个图片，然后将其作为实体(ImageEntity)添加到Cesium的场景中。在animate方法中，我们使用requestAnimationFrame来持续更新图片的旋转。Cesium.Quaternion.fromAxisAngle方法用于创建一个代表旋转的四元数，我们使用Z轴旋转，旋转的速度与当前的时间有关，从而实现动态旋转的效果。