first commit

2021-09-14 07:31:59 +08:00
commit d0f3fccb12
35 changed files with 4191 additions and 0 deletions
--- a/src/render/components/EarthView.vue
+++ b/src/render/components/EarthView.vue
@@ -0,0 +1,91 @@
+<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 }) => {
+      // 移除默认的图层，提升加载速度
+      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>
--- a/src/render/components/FlagView.vue
+++ b/src/render/components/FlagView.vue
@@ -0,0 +1,41 @@
+<template>
+	<div v-show="!!src">
+		<img @mouseup="onMouseUp" @mousedown="onMouseDown" :src="src">
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+export default defineComponent({
+  setup: () => {
+    const src     	= ref('/image/flag/Beidou.png')
+    const show_flag = (flag_name) => {
+			if (!flag_name) return
+
+			src.value = '/image/flag/' + flag_name + '.png'
+    }
+
+		let exit_timeout = null
+		const exit			 = () => {
+      window.opener = window;
+      window.open('', '_self', '');
+      window.close();
+    }
+		const onMouseUp = () => {
+			if (exit_timeout) clearTimeout(exit_timeout)
+		}
+
+		const onMouseDown = () => {
+			exit_timeout = setTimeout(exit, 10000)
+		}
+
+    return { src, show_flag, onMouseUp, onMouseDown }
+  }
+})
+</script>
+
+<style scoped>
+img {
+  width: 169px;
+}
+</style>
--- a/src/render/components/HelloWorld.vue
+++ b/src/render/components/HelloWorld.vue
@@ -0,0 +1,65 @@
+<template>
+  <h1>{{ msg }}</h1>
+
+  <p>
+    Recommended IDE setup:
+    <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
+    +
+    <a
+      href="https://marketplace.visualstudio.com/items?itemName=octref.vetur"
+      target="_blank"
+    >Vetur</a>
+    or
+    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
+    (if using
+    <code>&lt;script setup&gt;</code>)
+  </p>
+
+  <p>See <code>README.md</code> for more information.</p>
+
+  <p>
+    <a href="https://vitejs.dev/guide/features.html" target="_blank">Vite Docs</a> |
+    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
+  </p>
+
+  <button @click="count++">count is: {{ count }}</button>
+  <p>
+    Edit
+    <code>components/HelloWorld.vue</code> to test hot module replacement.
+  </p>
+</template>
+
+<script lang="ts">
+import { ref, defineComponent } from 'vue'
+export default defineComponent({
+  name: 'HelloWorld',
+  props: {
+    msg: {
+      type: String,
+      required: true
+    }
+  },
+  setup: () => {
+    const count = ref(0)
+    return { count }
+  }
+})
+</script>
+
+<style scoped>
+a {
+  color: #42b983;
+}
+
+label {
+  margin: 0 0.5em;
+  font-weight: bold;
+}
+
+code {
+  background-color: #eee;
+  padding: 2px 4px;
+  border-radius: 4px;
+  color: #304455;
+}
+</style>
--- a/src/render/components/SatelliteSystemSelectView.vue
+++ b/src/render/components/SatelliteSystemSelectView.vue
@@ -0,0 +1,37 @@
+<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>
+</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' : '欧盟研制伽利略卫星导航系统'
+		}
+
+		onMounted(() => selected.value = Object.keys(option_dic)[0])
+
+		watch(selected, (value) => {
+			emit('satellite-system-changed', value)
+		})
+
+		return { selected, option_dic }
+	}
+    
+})
+</script>
--- a/src/render/components/SatelliteTableView.vue
+++ b/src/render/components/SatelliteTableView.vue
@@ -0,0 +1,107 @@
+<template>
+<div>
+  <div id="satellite-table-container" class="text-white absolute bottom-0 text-center">
+    <button @click="show = !show" class="rounded border-blue-900 bg-blue-900">
+      <svg v-if="show" xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 13l-7 7-7-7m14-8l-7 7-7-7" />
+      </svg>
+      <svg v-else xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 11l7-7 7 7M5 19l7-7 7 7" />
+      </svg>
+    </button>
+    <table ref="satelliteTable" v-show="show" class="text-center">
+        <thead class="text-2xl">
+          <th class="py-3 bg-blue-900 border border-gray-900"
+              v-for="label, index in ['序号', '卫星名称', '显示/隐藏', '跟踪']"
+              :key="label"
+              :style="{width: index == 1 ? '37.5vw' : '12.5vw'}">
+              {{ label }}
+          </th>
+        </thead>
+        <tbody class="text-lg odd:bg-gray-50">
+          <tr v-for="{ id, show }, index in satellites" :key="id">
+            <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)" />
+            </td>
+            <td class="border border-gray-900">
+              <button @click="$emit('track-satellite-selected', 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>
+              </button>
+            </td>
+          </tr>
+        </tbody>
+    </table>
+  </div>
+</div>
+</template>
+
+<script lang="ts">
+import { ref, computed, defineComponent } from 'vue'
+import { useStore } from 'vuex'
+
+
+export default defineComponent({
+  setup: () => {
+    const show           = ref(false)
+    
+    const store          = useStore()
+    const satelliteTable = ref(null)
+    const satellites     = computed(() => {
+      if (satelliteTable.value) satelliteTable.value.scrollTop = 0
+
+      return store.state.satellites.all
+    })
+    
+    const onSatelliteTableCheckboxChanged = id => store.commit('satellites/toggleShow', id)
+    
+    return { show, satelliteTable, satellites, onSatelliteTableCheckboxChanged }
+  }
+})
+</script>
+
+<style scoped>
+#satellite-table-container {
+  left: 12.5vw;
+  right: 12.5vw;
+}
+
+table {
+  display: block;
+  height: 360px;
+  overflow: auto;
+}
+
+tr:nth-child(odd) {
+  background-color: rgb(17, 24, 39);
+}
+
+tr:nth-child(even) {
+  background-color:rgb(31, 41, 55)
+}
+
+td {
+  padding: 5px 0;
+}
+
+::-webkit-scrollbar
+{
+  width: 12px;
+}
+
+::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    -webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
+    background-color: #1f2937;
+}
+
+::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
+    /* border-radius: 10px; */
+    background-color: #111827;
+}
+
+</style>>