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

<template>
  <vc-viewer ref="vcViewer" :animation="true" :showCredit="false" :shouldAnimate="true" :sceneModePicker="true" @ready="onViewerReady">
    <vc-layer-imagery>
      <vc-provider-imagery-tianditu mapStyle="img_c" :token="token" />
    </vc-layer-imagery>
    <vc-layer-imagery>
      <vc-provider-imagery-tianditu mapStyle="cva_c" :token="token" />
    </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">
import { ref, defineComponent } from 'vue'
import { useStore } from 'vuex'
export default defineComponent({
  setup: () => {
    const vcViewer                = ref(null)
    
		const token	                  = '436ce7e50d27eede2f2929307e6b33c0'

    const czml                    = ref('')
    const loadSatelliteOrbit      = ss => czml.value = '/CZML/' + ss + '.czml'

    const onViewerReady           = ({ viewer }) => {
      viewer.scene.debugShowFramesPerSecond = true
      // 移除默认的图层，提升加载速度
      const { imageryLayers } = viewer
      imageryLayers.remove(imageryLayers.get(0))

      // 限定缩放大小
      // viewer.scene.screenSpaceCameraController.maximumZoomDistance = 50000000   // 相机高度的最大值设定为 50000000 米
      // 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'
      })
    }

    let entities            = null
    const store             = useStore()
    const onDataSourceReady = ({ viewer, cesiumObject }) => {
      viewer.flyTo(cesiumObject)

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

      // 将卫星状态信息存储到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
      }
    })
    // 跟踪卫星
    const trackSatellite    = id => {
      const entity          = getEntityById(id)
      if (!entity) return

      const viewer          = vcViewer.value.getCesiumObject()
      viewer.selectedEntity = entity
      viewer.trackedEntity  = entity
    }
    const getEntityById     = id => {
      if (!entities) return null

      return entities.find(entity => entity.id === id)
    }
    
    return { vcViewer, token, czml, loadSatelliteOrbit, trackSatellite, onViewerReady, onDataSourceReady }
  }
})
</script>