实现单机版

src/render/App.vue

@@ -2,11 +2,11 @@
   <div class="w-h-full">
     <EarthView ref="earthView"/>
 
-    <FlagView ref="flagView" class="fixed bottom-0 right-0" />
+    <FlagView class="fixed bottom-0 right-0" />
+    
+    <SatelliteSystemSelectView class="fixed top-1" />
     
     <SatelliteTableView class="fixed left-0 right-0 bottom-0" @trackSatelliteSelected="onTrackSatelliteSelected" />
-    
-    <SatelliteSystemSelectView class="fixed top-1" @satelliteSystemChanged="onSatelliteSystemChanged" />
   </div>
 </template>
 
@@ -18,11 +18,6 @@ import SatelliteTableView from './components/SatelliteTableView.vue'
 import SatelliteSystemSelectView from './components/SatelliteSystemSelectView.vue'
 
 const earthView                 = ref(null)
-const flagView                  = ref(null)
-const onSatelliteSystemChanged  = ss => {
-  if (earthView.value) earthView.value.loadSatelliteOrbit(ss)
-  if (flagView.value) flagView.value.show_flag(ss)
-}
 const onTrackSatelliteSelected  = id => {
   if (earthView.value) earthView.value.trackSatellite(id)
 }

src/render/api/entity.js

@@ -0,0 +1,23 @@
+import store from '../store'
+
+let entities = []
+
+const load   = (value)   => {
+  entities = value
+
+  console.log(entities, store, "==================");
+
+  // 将卫星状态信息存储到store中
+  const satellites = filter('Satellite')
+  const satellite_state_arr = satellites.map(({ id, show }) => { return { id, show } })
+  store.commit('satellites/set', satellite_state_arr)
+}
+
+const get    = id      => entities.find(entity => entity.id === id)
+
+const find   = keyword => entities.find(entity => entity.id.startsWith(keyword))
+
+const filter = keyword => entities.filter(entity => entity.id.startsWith(keyword))
+
+
+export default { get, load, find }

src/render/components/EarthView.vue

@@ -19,6 +19,8 @@ import { VcViewer, VcLayerImagery, VcProviderImageryTianditu, VcNavigation, VcDa
 // 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')
 
@@ -30,41 +32,43 @@ const getEntityById     = id => {
 }
 const onDataSourceReady = ({ viewer, cesiumObject }) => {
   viewer.flyTo(cesiumObject)
-
-  entities = cesiumObject.entities.values
+  entity.load(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)
+  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 entity = getEntityById(payload)
-    if (!entity) return
+    const satellite = entity.get(payload)
+    if (!satellite) return
 
-    entity.show  = !entity.show
+    satellite.show  = !satellite.show
+  }
+
+  if (type === 'satellites/track') {
+    const satellite = entity.get(payload)
+    if (!satellite || !vcViewerInstance) return
+
+    vcViewerInstance.selectedEntity = satellite
+    vcViewerInstance.trackedEntity  = satellite
   }
 })
-
-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)
+  if (!entity) store.commit('trackedSatellite/set', null)
 }
 
 const onViewerReady = ({ viewer }) => {

src/render/components/FlagView.vue

@@ -5,15 +5,11 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { computed } from 'vue'
+import { useStore } from 'vuex'
 
-const src       = ref('')
-const show_flag = (flag_name: string) => {
-  if (!flag_name) return
-
-  src.value = './image/flag/' + flag_name + '.png'
-}
-defineExpose({ show_flag })
+const store = useStore()
+const src   = computed(() => './image/flag/' + store.state.satelliteSystem.name + '.png')
 </script>
 
 <style scoped>

src/render/components/SatelliteSystemSelectView.vue

@@ -1,37 +1,29 @@
 <template>
-	<!-- TODO: 将卫星列表视图融入到下拉列表中 -->
-	<div>
-		<select class="cesium-button" v-model="selected">
-			<option
-					v-for = "(value, key) in option_dic"
-					:key = "key"
-					:value = "key">
-					{{ value }}
-			</option>
-		</select>
-	</div>
+  <div>
+    <select class="cesium-button" v-model="selected">
+      <option
+        v-for = "(value, key) in option_dic"
+        :key = "key"
+        :value = "key">
+        {{ value }}
+      </option>
+    </select>
+  </div>
 </template>
 
-<script lang="ts">
-import { ref, watch, onMounted, defineComponent } from 'vue'
-export default defineComponent({
-	setup: (_, { emit }) => {
-		const selected	 = ref(null)
-		const option_dic = {
-			'beidou'  : '中国北斗卫星导航系统',
-			'gps-ops' : '美国全球定位系统',
-			'glo-ops' : '俄罗斯格洛纳斯卫星导航系统',
-			'galileo' : '欧盟研制伽利略卫星导航系统'
-		}
+<script lang="ts" setup>
+import { useStore } from 'vuex'
+import { ref, watch, onMounted } from 'vue'
 
-		onMounted(() => selected.value = Object.keys(option_dic)[0])
+const store    = useStore()
+const selected = ref('')
+watch(selected, (value) => store.commit('satelliteSystem/set', value))
+onMounted(() => selected.value = Object.keys(option_dic)[0])
 
-		watch(selected, (value) => {
-			emit('satellite-system-changed', value)
-		})
-
-		return { selected, option_dic }
-	}
-    
-})
+const option_dic = {
+  'beidou'  : '中国北斗卫星导航系统',
+  'gps-ops' : '美国全球定位系统',
+  'glo-ops' : '俄罗斯格洛纳斯卫星导航系统',
+  'galileo' : '欧盟研制伽利略卫星导航系统'
+}
 </script>

src/render/components/SatelliteTableView.vue

@@ -23,10 +23,10 @@
             <td class="border border-gray-900"> {{ index + 1 }} </td>
             <td class="border border-gray-900"> {{ id }} </td>
             <td class="border border-gray-900">
-              <input :checked="show" type="checkbox" class="w-6 h-6 cursor-pointer" @change="onSatelliteTableCheckboxChanged(id)" />
+              <input :checked="show" type="checkbox" class="w-6 h-6 cursor-pointer" @change="onShowStateCheckboxChanged(id)" />
             </td>
             <td class="border border-gray-900">
-              <button @click="$emit('track-satellite-selected', id)">
+              <button @click="onTrackButtonClicked(id)">
                 <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
                 </svg>
@@ -39,27 +39,22 @@
 </div>
 </template>
 
-<script lang="ts">
-import { ref, computed, defineComponent } from 'vue'
+<script lang="ts" setup>
 import { useStore } from 'vuex'
+import { ref, computed, watch } from 'vue'
 
 
-export default defineComponent({
-  setup: () => {
-    const show           = ref(false)
+const show           = ref(false)
     
-    const store          = useStore()
-    const satelliteTable = ref(null)
-    const satellites     = computed(() => {
-      if (satelliteTable.value) satelliteTable.value.scrollTop = 0
+const store                      = useStore()
+const satellites                 = computed(() => store.state.satellites.all)
+const onTrackButtonClicked       = id => store.commit('satellites/track', id)
+const onShowStateCheckboxChanged = id => store.commit('satellites/toggleShow', id)
 
-      return store.state.satellites.all
-    })
-    
-    const onSatelliteTableCheckboxChanged = id => store.commit('satellites/toggleShow', id)
-    
-    return { show, satelliteTable, satellites, onSatelliteTableCheckboxChanged }
-  }
+// 表格数据更新时，滚动条回到最顶部
+const satelliteTable = ref(null)
+watch(satellites, () => {
+  if (satelliteTable.value) satelliteTable.value.scrollTop = 0
 })
 </script>
 
@@ -95,12 +90,11 @@ td {
 ::-webkit-scrollbar-thumb {
     border-radius: 10px;
     -webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
-    background-color: #1f2937;
+    background-color: #4fbee2;
 }
 
 ::-webkit-scrollbar-track {
     -webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
-    /* border-radius: 10px; */
     background-color: #111827;
 }
 

src/render/main.ts

@@ -1,6 +1,12 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+
+import VueCesium from 'vue-cesium'
+import 'vue-cesium/dist/index.css'
+
 import store from './store'
 import './main.css'
 
-createApp(App).use(store).mount('#app')
+const cesiumPath = (process.env.NODE_ENV === 'development' ? './node_modules/cesium/Build/Cesium/Cesium.js': './Cesium/Cesium.js')
+
+createApp(App).use(VueCesium, { cesiumPath: cesiumPath }).use(store).mount('#app')

src/render/store/index.js

@@ -1,12 +1,14 @@
 import { createStore } from 'vuex'
 import satellites from './modules/satellites'
+import satelliteSystem from './modules/satelliteSystem'
 
 
 const debug = process.env.NODE_ENV !== 'production'
 
 export default createStore({
   modules: {
-    satellites
+    satellites,
+    satelliteSystem
   },
   strict: debug
 })

src/render/store/modules/satelliteSystem.js

@@ -0,0 +1,30 @@
+const state = {
+  name: ''
+}
+
+// getters
+// const getters = {
+//   get: (state) => state.name
+// }
+
+// actions
+const actions = {
+  set ({ commit }, { satelliteSystem }) {
+    commit('set', satelliteSystem)
+  }
+}
+
+// mutations
+const mutations = {
+  set (state, satelliteSystem) {
+    state.name = satelliteSystem
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  // getters,
+  actions,
+  mutations
+}

src/render/store/modules/satellites.js

@@ -3,16 +3,16 @@ const state = {
 }
 
 // getters
-const getters = {
-  getSatelliteList: (state) => state.all
-}
+// const getters = {
+//   getSatelliteList: (state) => state.all
+// }
 
 // actions
-const actions = {
-  load ({ commit }, { satellites }) {
-    commit('set', satellites)
-  }
-}
+// const actions = {
+//   load ({ commit }, { satellites }) {
+//     commit('set', satellites)
+//   }
+// }
 
 // mutations
 const mutations = {
@@ -23,13 +23,15 @@ const mutations = {
   toggleShow (state, id) {
     const satellite = state.all.find(satellite => satellite.id === id)
     satellite.show = !satellite.show
-  }
+  },
+
+  track () {}
 }
 
 export default {
   namespaced: true,
   state,
-  getters,
-  actions,
+  // getters,
+  // actions,
   mutations
 }

src/render/store/modules/trackedSatellite.js

@@ -0,0 +1,30 @@
+const state = {
+  id:  null
+}
+
+// getters
+// const getters = {
+//   get: (state) => state.value
+// }
+
+// actions
+const actions = {
+set ({ commit }, { trackedSatelliteId }) {
+    commit('set', trackedSatelliteId)
+  }
+}
+
+// mutations
+const mutations = {
+  set (state, trackedSatelliteId) {
+    state.id = trackedSatelliteId
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  // getters,
+  actions,
+  mutations
+}