first commit

master
yezhichao@hwasmart.com 2021-09-14 07:31:59 +08:00
commit d0f3fccb12
35 changed files with 4191 additions and 0 deletions

10
.gitignore vendored Normal file
View File

@ -0,0 +1,10 @@
node_modules
.DS_Store
dist
dist-ssr
*.local
.vscode
.idea
public/CZML

32
README.md Normal file
View File

@ -0,0 +1,32 @@
# Vite Electron Typescript Template
`vite 2` `vue 3` `electron 12`
## How to use
clone the repo via git and install dependencies:
```shell
git clone --depth 1 --single-branch https://github.com/hocili/vite-electron-typescript-template.git your-project-name
cd your-project-name
yarn
```
## Starting Development
Start the app in the `dev` environment:
```shell
yarn dev
```
```shell
yarn electron:dev
```
## Packaging for Production
To package apps for the local platform:
```shell
yarn electron:build
```
# TLE数据源
https://celestrak.com/NORAD/elements/
# CZML数据预览
https://cesium.com/cesiumjs/cesium-viewer/

2
TODO.MD Normal file
View File

@ -0,0 +1,2 @@
1. 深入研究TLE转CZML的规范要求解决持续运行中卫星轨道消失的问题
2. 定位2D视图下地图显示不出来的问题并解决

13
index.html Normal file
View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html class="w-h-full">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body class="w-h-full">
<div id="app" class="w-h-full"></div>
<script type="module" src="/src/render/main.ts"></script>
</body>
</html>

4
index.js Normal file
View File

@ -0,0 +1,4 @@
require('ts-node').register({
project:'./tsconfig.electron.json'
});
require('./src/main/app.ts')

53
package.json Normal file
View File

@ -0,0 +1,53 @@
{
"name": "global-navigation-satellite-system",
"description": "global-navigation-satellite-system",
"author": "hwasmart",
"version": "0.0.0",
"main": "dist/main/app.js",
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview --port 10001",
"electron:dev": "cross-env NODE_ENV=development electron index.js",
"electron:build": "rimraf dist && vite build && tsc -p tsconfig.electron.json && electron-builder"
},
"dependencies": {
"cesium": "^1.81.0",
"czml-writer": "^1.0.3",
"electron-store": "^8.0.0",
"got": "^11.8.2",
"vue": "^3.0.5",
"vue-cesium": "^3.0.1-beta.5.2",
"vuex": "^4.0.1"
},
"devDependencies": {
"@vitejs/plugin-vue": "^1.1.5",
"@vue/compiler-sfc": "^3.0.5",
"autoprefixer": "^10.2.5",
"cross-env": "^7.0.3",
"electron": "^12.0.0",
"electron-builder": "^22.10.5",
"postcss": "^8.2.10",
"rimraf": "^3.0.2",
"tailwindcss": "^2.1.1",
"ts-node": "^9.1.1",
"typescript": "^4.2.3",
"vite": "^2.0.5"
},
"build": {
"appId": "hwasmart.id",
"mac": {
"category": "hwasmart.app.category.type"
},
"files": [
"dist/main/**/*",
"dist/render/**/*"
],
"directories": {
"output": "dist/release"
},
"win": {
"icon": "public/favicon.ico"
}
}
}

6
postcss.config.js Normal file
View File

@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

BIN
public/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 72 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 302 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 83 KiB

BIN
public/image/logo/GPS.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 59 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.1 KiB

31
src/main/app.ts Normal file
View File

@ -0,0 +1,31 @@
import { app, BrowserWindow } from 'electron'
import { join } from "path"
const URL = (process.env.NODE_ENV === 'development') ? 'http://localhost:3000/' : 'gnss.cesium.hwasmart.com'
function createWindow() {
const win = new BrowserWindow({
fullscreen: true,
frame: false,
webPreferences: {
nodeIntegration: true,
preload: join(__dirname, 'preload.js')
}
})
win.loadURL(URL)
}
app.whenReady().then(createWindow)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})

20
src/main/preload.js Normal file
View File

@ -0,0 +1,20 @@
const {ipcRenderer, contextBridge} = require('electron')
contextBridge.exposeInMainWorld('ipcRenderer', {
send: (channel, data) => {
// whitelist channels
let validChannels = ['toMain']
if (validChannels.includes(channel)) {
ipcRenderer.send(channel, data)
}
ipcRenderer.send(channel, data)
},
receive: (channel, func) => {
let validChannels = ['fromMain']
if (validChannels.includes(channel)) {
// Deliberately strip event as it includes `sender`
ipcRenderer.on(channel, (event, ...args) => func(...args))
}
ipcRenderer.on(channel, (event, ...args) => func(...args))
}
})

38
src/render/App.vue Normal file
View File

@ -0,0 +1,38 @@
<template>
<div class="w-h-full">
<EarthView ref="earthView"/>
<FlagView ref="flagView" class="fixed bottom-0 right-0" />
<SatelliteTableView class="fixed left-0 right-0 bottom-0" @trackSatelliteSelected="onTrackSatelliteSelected" />
<SatelliteSystemSelectView class="fixed top-1" @satelliteSystemChanged="onSatelliteSystemChanged" />
</div>
</template>
<script lang="ts">
import { ref, defineComponent } from 'vue'
import FlagView from './components/FlagView.vue'
import EarthView from './components/EarthView.vue'
import SatelliteTableView from './components/SatelliteTableView.vue'
import SatelliteSystemSelectView from './components/SatelliteSystemSelectView.vue'
export default defineComponent({
setup () {
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)
}
return { earthView, flagView, onSatelliteSystemChanged, onTrackSatelliteSelected }
},
components: {
FlagView, EarthView, SatelliteSystemSelectView, SatelliteTableView
}
})
</script>

BIN
src/render/assets/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>>

9
src/render/main.css Normal file
View File

@ -0,0 +1,9 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.w-h-full {
@apply w-full h-full m-0 p-0
}
}

12
src/render/main.ts Normal file
View File

@ -0,0 +1,12 @@
import { createApp } from 'vue'
import VueCesium from 'vue-cesium'
import 'vue-cesium/lib/theme-default/index.css'
import App from './App.vue'
import store from './store'
import './main.css'
if (typeof (window as any).global === 'undefined') {
(window as any).global = window
}
createApp(App).use(store).use(VueCesium, {cesiumPath: 'node_modules/cesium/Build/Cesium/Cesium.js'}).mount('#app')

5
src/render/shims-vue.d.ts vendored Normal file
View File

@ -0,0 +1,5 @@
declare module '*.vue' {
import { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}

12
src/render/store/index.js Normal file
View File

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

View File

@ -0,0 +1,35 @@
const state = {
all: []
}
// getters
const getters = {
getSatelliteList: (state) => state.all
}
// actions
const actions = {
load ({ commit }, { satellites }) {
commit('set', satellites)
}
}
// mutations
const mutations = {
set (state, satellites) {
state.all = satellites
},
toggleShow (state, id) {
const satellite = state.all.find(satellite => satellite.id === id)
satellite.show = !satellite.show
}
}
export default {
namespaced: true,
state,
getters,
actions,
mutations
}

11
tailwind.config.js Normal file
View File

@ -0,0 +1,11 @@
module.exports = {
purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}

16
tsconfig.electron.json Normal file
View File

@ -0,0 +1,16 @@
{
"compilerOptions": {
"target": "esnext",
"module": "CommonJS",
"moduleResolution": "node",
"strict": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"allowJs": true,
"outDir": "dist/main"
},
"include": [
"src/main/app.ts",
"src/main/preload.js",
]
}

16
tsconfig.json Normal file
View File

@ -0,0 +1,16 @@
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"lib": ["esnext", "dom"],
"types": ["vite/client"]
},
"include": ["src/render/**/*.ts", "src/render/**/*.d.ts", "src/render/**/*.tsx", "src/render/**/*.vue"],
"exclude": ["src/app.ts"]
}

23
vite.config.ts Normal file
View File

@ -0,0 +1,23 @@
import { join } from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const outDir = join(__dirname, 'dist/render')
const renderDir = join(__dirname, 'src/render')
const publicDir = join(__dirname, 'public')
// https://vitejs.dev/config/
export default defineConfig({
publicDir,
base: './',
plugins: [vue()],
build: {
outDir,
emptyOutDir: true,
},
resolve: {
alias: {
'@': renderDir,
}
},
})

3502
yarn.lock Normal file

File diff suppressed because it is too large Load Diff