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'

import entity from '../api/entity'

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)
  entity.load(cesiumObject.entities.values)

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

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
// })


// 显示/隐藏卫星
store.subscribe(({ type, payload }) => {
  if (type === 'satellites/toggleShow') {
    const satellite = entity.get(payload)
    if (!satellite) return

    satellite.show  = !satellite.show
  }

  if (type === 'satellites/track') {
    const satellite = entity.get(payload)
    if (!satellite || !vcViewerInstance) return

    vcViewerInstance.selectedEntity = satellite
    vcViewerInstance.trackedEntity  = satellite
  }
})
const onTrackedEntityChanged = entity => {
  if (!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>