vue+cesium实现地球自转效果

介绍:

        项目需要展示地球自转并能在特定节点停止。本文深入探讨了如何利用Vue和Cesium实现地球自转效果。

一、实现效果

二、核心代码

/*
 * @Description: 地球自转效果
 * @Version: 1.1
 * @Author: i24499
 * @Date: 2024-08-24 15:37:25
 * @LastEditors: i24499
 * @LastEditTime: 2024-10-09 10:15:13
 */

/**
* 地球自转
*/
earthRotation() {
  // 注意Viewer的初始化配置一定要将shouldAnimate设置为true，否则无效
  const viewer = new Cesium.Viewer("cesiumContainer", {
    shouldAnimate: true, //控制模型动画
  });
  viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(0, 0, 18000000), // 调整相机高度
    orientation: {
      heading: Cesium.Math.toRadians(0.0), // 方向
      pitch: Cesium.Math.toRadians(-90.0), // 俯仰角度
      roll: 0 // 翻转角度
    }
  })
  let previousTime = Cesium.JulianDate.clone(viewer.clock.currentTime) // 上一个时刻的时间

  // 调整速度的因子
  let speedFactor = 30 // 调整这个值来改变自转速度（越小旋转速度越快）

  /*
    通过调整时钟倍速也可以调整自转速度
    viewer.clock.multiplier = 2.0 // 将倍速设置为2，地球自转速度加快一倍
    viewer.clock.multiplier = 0.5 // 将倍速设置为0.5，地球自转速度减慢一半
    */

  this.onTickCallback = () => {
    let currentTime = viewer.clock.currentTime // 获取当前时间
    // 计算时间间隔
    let delta = Cesium.JulianDate.secondsDifference(currentTime, previousTime) / speedFactor
    // 更新上一个时刻的时间为当前时间
    previousTime = Cesium.JulianDate.clone(currentTime)
    // 实现地球自转效果，绕Z轴旋转，正负可控制自转方向（+ 逆时针，- 顺时针）
    viewer.scene.camera.rotate(Cesium.Cartesian3.UNIT_Z, -1 * delta)
  }
  // 开启地图自转效果
  viewer.clock.onTick.addEventListener(this.onTickCallback)
}

三、取消自转

viewer.clock.onTick.removeEventListener(this.onTickCallback)