VUE3加载cesium，导入czml的星座后页面卡死BUG 修复

欢脱的小猴子2025-09-10 17:15

Vue3导入Cesium，使用 window.viewer代替viewer
项目需求

需要加载星座；2. 地球切到近景，对实体（非星座）需要点击弹出面板详情

卡顿原因

点击详情弹出面板，是通过监听MOUSE_MOVE事件，使用hanlder获取点击实体；在载入星座后，由于卫星数量几百颗导致handler时间过多卡死。

json 复制代码

const showPanelDetail = () => {
handler?.setInputAction((event) => {
//实体
let pickedEntity = window.viewer.scene.pick(event.endPosition)

if (
  Cesium.defined(pickedEntity) &&
  pickedEntity.id instanceof Cesium.Entity
) {
  detailPanelRef.value.isShowPanel = true
  Object.assign(detailPanelRef.value.screenPoint, event.endPosition)
  Object.assign(detailPanelRef.value.entityDetail, pickedEntity?.id?.info) //Object.assign才会动态变化
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE)

}

```

解决方式
- 加载星座的时候，移除handler
- 生成handler的时候，移除星座

json 复制代码

const addAllSatellite = (satelliteName) => {
  if (handler) {
    handler.destroy()
  }
  let type = satelliteType.find((item) => item.name === satelliteName).type
  initCZMLSatellites(window.viewer, type) //加载星座
}