Vue 中 Cesium 地图旋转点位漂移解决方案

在 Vue 中解决 Cesium 地图旋转点位漂移的问题，可以采取以下步骤：

在 Vue 组件中引入 Cesium：

import * as Cesium from 'cesium';

在 Vue 组件的生命周期钩子函数中初始化 Cesium 地图：

mounted() {
  this.viewer = new Cesium.Viewer(this.$refs.cesiumContainer, {
    infoBox: false,
    navigationHelpButton: false,
    baseLayerPicker: false,
    imageryProvider: new Cesium.TileMapServiceImageryProvider({
      url: Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII')
    })
  });

  // 禁用默认的双击旋转
  this.viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
}

在 Vue 组件中定义一个方法来更新点位的位置：

methods: {
  updatePointPosition() {
    // 获取当前地图的旋转角度
    const heading = this.viewer.camera.heading;

    // 更新点位的位置
    const position = Cesium.Cartesian3.fromDegrees(lng, lat, height);
    const rotation = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(-heading));
    const modelMatrix = Cesium.Matrix4.fromRotationTranslation(rotation, position);
    this.entity.modelMatrix = modelMatrix;
  }
}

在 Vue 组件中监听地图的旋转事件，并调用更新点位位置的方法：

mounted() {
  // ...

  // 监听地图的旋转事件
  this.viewer.scene.camera.changed.addEventListener(() => {
    this.updatePointPosition();
  });
}

在 Vue 组件的模板中添加一个容器来显示 Cesium 地图：

<template>
  <div ref="cesiumContainer" style="width: 100%; height: 100%;"></div>
</template>

这样就可以在 Vue 中解决 Cesium 地图旋转点位漂移的问题。需要注意的是，lng、lat 和 height 是点位的经度、纬度和高度，你需要根据实际情况来替换它们。另外，this.entity 是 Cesium 中的一个实体对象，你需要根据自己的代码来替换它。