global-navigation-satellite-system/src/render/components/EarthView.vue

<template>
  <vc-viewer class="vc-viewer" :animation="true" :showCredit="false" :shouldAnimate="true" :sceneModePicker="true" @ready="onViewerReady" @trackedEntityChanged="onTrackedEntityChanged">
    <vc-layer-imagery>
      <vc-provider-imagery-singletile
        :url="earth"
      ></vc-provider-imagery-singletile>
    </vc-layer-imagery>
    
    <vc-navigation :offset="[10, 40]" :position="'top-left'" :printOpts="false" :locationOpts="false" :otherOpts="false" />

    <vc-datasource-czml v-if="czml" :czml="czml" @ready="onDataSourceReady" />
  </vc-viewer>
</template>

<script lang="ts" setup>
import { ref, computed, watch } from 'vue'
import { useStore } from 'vuex'
import { VcViewer, VcLayerImagery, VcProviderImageryTianditu, VcNavigation, VcDatasourceCzml } from 'vue-cesium'
// import 'vue-cesium/dist/index.css'
import earth from '../assets/earth.jpg'

const store = useStore()
const czml  = computed(() => './CZML/' + store.state.satelliteSystem.name + '.czml')

let entities            = null
const getEntityById     = id => {
  if (!entities) return null

  return entities.find(entity => entity.id === id)
}
const onDataSourceReady = ({ viewer, cesiumObject }) => {
  viewer.flyTo(cesiumObject)

  entities = cesiumObject.entities.values

  // 显示卫星导航系统的科普信息
  viewer.selectedEntity = entities.find(entity => entity.id.startsWith('Constellation'))

  // 将卫星状态信息存储到store中
  const satellites = entities.filter(entity => entity.id.startsWith('Satellite'))
  const satellite_state_arr = satellites.map(({ id, show }) => { return { id, show } })
  store.commit('satellites/set', satellite_state_arr)
}
// 显示/隐藏卫星
store.subscribe(({ type, payload }) => {
  if (type === 'satellites/toggleShow') {
    const entity = getEntityById(payload)
    if (!entity) return

    entity.show  = !entity.show
  }
})

let vcViewerInstance     = null
const trackedSatelliteId = computed(() => store.state.trackedSatellite.id)
watch(trackedSatelliteId, (value) => {
  const entity = getEntityById(value)

  if (!entity || !vcViewerInstance) return
  
  vcViewerInstance.selectedEntity = entity
  vcViewerInstance.trackedEntity  = entity
})

const onTrackedEntityChanged = entity => {
  console.log(entity, '==============');
  store.commit('trackedSatellite/set', null)
}

const onViewerReady = ({ viewer }) => {
  vcViewerInstance = viewer

  viewer.scene.debugShowFramesPerSecond = false

  // 限定缩放大小
  viewer.scene.screenSpaceCameraController.minimumZoomDistance = 10000000   // 相机高度的最小值设定为 10000000 米
  
  // 修改infobox的样式
  const infoBox = viewer.infoBox.frame;
  infoBox.setAttribute('sandbox', 'allow-same-origin allow-scripts allow-popups allow-forms')
  infoBox.setAttribute('src', '') //必须设置src为空 否则不会生效
  infoBox.addEventListener('load', function () {
    const infoBoxDescriptionElement              = infoBox.contentWindow.document.getElementsByClassName('cesium-infoBox-description')[0]
    infoBoxDescriptionElement.style.fontSize     = 'larger'
    infoBoxDescriptionElement.style.paddingLeft  = '20px'
    infoBoxDescriptionElement.style.paddingRight = '20px'
  })
}
</script>

<style>
.vc-viewer .cesium-viewer .cesium-viewer-animationContainer svg > g > g text:not(:last-of-type) {
  display: none;
}
</style>