创建卫星系统轨道视图

src/render/components/EarthView.vue

@@ -5,53 +5,17 @@
     </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" />
+    <SatelliteSystemView />
   </vc-viewer>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
-import { useStore } from 'vuex'
-import entity from '../api/entity'
 import earth from '../assets/earth.jpg'
+import SatelliteSystemView from './SatelliteSystemView.vue';
 
-// 卫星轨道数据处理
-const store = useStore()
-const czml  = computed(() => './CZML/' + store.getters["satelliteSystem/name"] + '.czml')
-const onDataSourceReady = ({ viewer, cesiumObject }) => {
-  viewer.flyTo(cesiumObject)
-  entity.load(cesiumObject.entities.values)
-
-  // 显示卫星导航系统的科普信息
-  viewer.selectedEntity = entity.find('Constellation')
-}
-
-// 显示/隐藏、跟踪卫星等交互操作
-let vcViewerInstance: any = null
-store.subscribeAction(({ type, payload }) => {
-  // 显示/隐藏卫星
-  if (type === 'satelliteSystem/toggleShow') {
-    const satellite = entity.get(payload)
-    if (!satellite) return
-
-    satellite.show  = !satellite.show
-  }
-
-  // 跟踪卫星
-  if (type === 'satelliteSystem/track') {
-    const satellite = entity.get(payload)
-    if (!satellite || !vcViewerInstance) return
-
-    vcViewerInstance.selectedEntity = satellite
-    vcViewerInstance.trackedEntity  = satellite
-  }
-})
 
 // 初始化视图参数
 const onViewerReady = ({ viewer }) => {
-  vcViewerInstance = viewer
-
   viewer.scene.debugShowFramesPerSecond = false
 
   // 限定缩放大小

src/render/components/SatelliteSystemView.vue

@@ -0,0 +1,45 @@
+<template>
+  <vc-datasource-czml v-if="czml" :czml="czml" @ready="onDataSourceReady" />
+</template>
+
+
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useStore } from 'vuex'
+import entity from '../api/entity'
+
+// 卫星轨道数据处理
+let vcViewerInstance: any = null
+const store = useStore()
+const czml  = computed(() => './CZML/' + store.getters["satelliteSystem/name"] + '.czml')
+const onDataSourceReady = ({ viewer, cesiumObject }) => {
+  if (!vcViewerInstance) vcViewerInstance = viewer
+
+  viewer.flyTo(cesiumObject)
+  entity.load(cesiumObject.entities.values)
+
+  // 显示卫星导航系统的科普信息
+  viewer.selectedEntity = entity.find('Constellation')
+}
+
+// 显示/隐藏、跟踪卫星等交互操作
+store.subscribeAction(({ type, payload }) => {
+  // 显示/隐藏卫星
+  if (type === 'satelliteSystem/toggleShow') {
+    const satellite = entity.get(payload)
+    if (!satellite) return
+
+    satellite.show  = !satellite.show
+  }
+
+  // 跟踪卫星
+  if (type === 'satelliteSystem/track') {
+    const satellite = entity.get(payload)
+    if (!satellite || !vcViewerInstance) return
+
+    vcViewerInstance.selectedEntity = satellite
+    vcViewerInstance.trackedEntity  = satellite
+  }
+})
+</script>