From 5e1601c8ea309a53685d514c428ca90c6c9d58c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8F=B6=E5=BF=97=E8=B6=85?= <yezhichao@hwasmart.com>
Date: Wed, 22 Dec 2021 18:46:05 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E5=9F=BA=E6=9C=AC=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/render/components/EarthView.vue | 142 +++++++++++++---------------
 1 file changed, 67 insertions(+), 75 deletions(-)

diff --git a/src/render/components/EarthView.vue b/src/render/components/EarthView.vue
index 82c4f9a..0398130 100644
--- a/src/render/components/EarthView.vue
+++ b/src/render/components/EarthView.vue
@@ -1,10 +1,9 @@
 <template>
-  <vc-viewer ref="vcViewer" class="vc-viewer" :animation="true" :showCredit="false" :shouldAnimate="true" :sceneModePicker="true" @ready="onViewerReady">
+  <vc-viewer class="vc-viewer" :animation="true" :showCredit="false" :shouldAnimate="true" :sceneModePicker="true" @ready="onViewerReady" @trackedEntityChanged="onTrackedEntityChanged">
     <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-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" />
@@ -13,87 +12,80 @@
   </vc-viewer>
 </template>
 
-<script lang="ts">
-import { ref, defineComponent } from 'vue'
+<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'
-export default defineComponent({
-  setup: () => {
-    const vcViewer                = ref(null)
-    
-		const token	                  = '436ce7e50d27eede2f2929307e6b33c0'
+// import 'vue-cesium/dist/index.css'
+import earth from '../assets/earth.jpg'
 
-    const czml                    = ref('')
-    const loadSatelliteOrbit      = ss => czml.value = './CZML/' + ss + '.czml'
+const store = useStore()
+const czml  = computed(() => './CZML/' + store.state.satelliteSystem.name + '.czml')
 
-    const onViewerReady           = ({ viewer }) => {
-      viewer.scene.debugShowFramesPerSecond = false
-      // 移除默认的图层，提升加载速度
-      const { imageryLayers } = viewer
-      imageryLayers.remove(imageryLayers.get(0))
+let entities            = null
+const getEntityById     = id => {
+  if (!entities) return null
 
-      // 限定缩放大小
-      // 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'
-      })
-    }
+  return entities.find(entity => entity.id === id)
+}
+const onDataSourceReady = ({ viewer, cesiumObject }) => {
+  viewer.flyTo(cesiumObject)
 
-    let entities            = null
-    const store             = useStore()
-    const onDataSourceReady = ({ viewer, cesiumObject }) => {
-      viewer.flyTo(cesiumObject)
+  entities = cesiumObject.entities.values
 
-      entities = cesiumObject.entities.values
-      // 显示卫星导航系统的科普信息
-      viewer.selectedEntity = entities.find(entity => entity.id.startsWith('Constellation'))
-      // viewer.selectedEntity = entities[entities.length - 1]
+  // 显示卫星导航系统的科普信息
+  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
+  // 将卫星状态信息存储到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 }
-  },
-  components: {
-    VcViewer, VcLayerImagery, VcProviderImageryTianditu, VcNavigation, VcDatasourceCzml
+    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>