'增加菜单栏'

README.md

@@ -3,3 +3,7 @@
 satellite-track使用TLE数据追踪卫星，使用cesium、vue、satelliteJS开发。
 
 ## [预览](https://jiangteng2019.github.io/satellite-track/)
+
+###说明
+1、为了节约性能，卫星轨道数据选择显示，而不全量显示；
+2、数据来源于celestrak

src/assets/menu.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1675301734191" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3414" width="48" height="48" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M868.7 126.6H157.3c-32.7 0-59.3 26.5-59.3 59.3 0 32.7 26.5 59.3 59.3 59.3h711.4c32.7 0 59.3-26.5 59.3-59.3 0-32.7-26.5-59.3-59.3-59.3z m0 652.2H157.3c-32.7 0-59.3 26.5-59.3 59.3 0 32.7 26.5 59.3 59.3 59.3h711.4c32.7 0 59.3-26.5 59.3-59.3s-26.5-59.3-59.3-59.3z m0-326.1H157.3c-32.7 0-59.3 26.5-59.3 59.3 0 32.7 26.5 59.3 59.3 59.3h711.4c32.7 0 59.3-26.5 59.3-59.3 0-32.7-26.5-59.3-59.3-59.3z" p-id="3415" fill="#edffff"></path></svg>

src/js/SatelliteEntity.js

@@ -13,7 +13,7 @@ class SatelliteEntity {
         this.satrec = twoline2satrec(this.tleLine1, this.tleLine2);
 
         this.totalSeconds = 864000;// 864000
-        this.stepSeconds = 150;
+        this.stepSeconds = 100;
         this.leadTime = parseInt(24 * 3600 / circle);
         this.trailTime = 0;
 
@@ -56,7 +56,7 @@ class SatelliteEntity {
             description: this.name,
             availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({ start: start, stop: stop })]),
             position: this._getPositionProperty(),
-            point: { pixelSize: 8, color: Cesium.Color.fromRandom({ alpha: 1.0 }) },
+            point: { pixelSize: 10, color: Cesium.Color.fromRandom({ alpha: 1.0 }) },
             path: new Cesium.PathGraphics({
                 width: 1,
                 show: false,

src/views/satellite-track/SatelliteTrack.scss

@@ -5,3 +5,46 @@
 .cesium-viewer-bottom {
     display: none;
 }
+
+.operate_container {
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    z-index: 999;
+
+    .menu_button {
+        box-sizing: border-box;
+        width: 32px;
+        height: 32px;
+        border-radius: 14%;
+        padding: 0;
+        vertical-align: middle;
+        z-index: 0;
+        display: inline-block;
+        position: relative;
+        background: #303336;
+        border: 1px solid #444;
+        color: #edffff;
+        fill: #edffff;
+        cursor: pointer;
+    }
+    .menu_button:hover {
+        color: #fff;
+        fill: #fff;
+        background: #48b;
+        border-color: #aef;
+        box-shadow: 0 0 8px #fff;
+    }
+}
+
+.el-drawer {
+    background-color: rgba($color: #303336, $alpha: 0.9);
+    color: #fff;
+    .el-drawer__header {
+        background-color: #303336;
+        color: inherit;
+    }
+    .el-checkbox {
+        color: inherit;
+    }
+}

src/views/satellite-track/SatelliteTrack.vue

@@ -1,5 +1,26 @@
 <template>
     <div id="cesiumContainer"></div>
+    <div class="operate_container">
+        <div class="menu_button" @click="drawer = !drawer">
+            <img src="../../assets/menu.svg" width="28" height="28" alt="">
+        </div>
+    </div>
+    <!-- 抽屉 -->
+    <el-drawer v-model="drawer" title="卫星选择" direction="ltr">
+        <el-row>
+            卫星
+        </el-row>
+        <el-checkbox-group v-model="checked" @change="handleSpacialInterestChange">
+            <el-checkbox v-for="(item, index) in options" :label="item.value">{{ item.label }}</el-checkbox>
+        </el-checkbox-group>
+
+        <el-row>
+            气象和地球资源卫星
+        </el-row>
+        <el-checkbox-group v-model="checked" @change="handleWeatherSatelliteChange">
+            <el-checkbox v-for="(item, index) in weatherSatellite" :label="item.value">{{ item.label }}</el-checkbox>
+        </el-checkbox-group>
+    </el-drawer>
 </template>
 
 <script setup>
@@ -8,7 +29,7 @@
 import * as Cesium from 'cesium';
 import "cesium/Build/Cesium/Widgets/widgets.css";
 
-import { onMounted, onBeforeMount } from 'vue';
+import { onMounted, onBeforeMount, ref } from 'vue';
 
 import "./SatelliteTrack.scss"
 
@@ -23,6 +44,83 @@ let viewer;
 const totalSeconds = 864000;
 const satelliteMap = new Map();
 
+// 响应式数据
+const drawer = ref(false);
+const checked = ref([]);
+const options = ref([
+    {
+        label: "Last 30 Days' Launches",
+        value: 1
+    },
+    {
+        label: 'Space Stations',
+        value: 2
+    },
+    {
+        label: '100 (or so) Brightest',
+        value: 3
+    },
+    {
+        label: 'Active Satellites',
+        value: 4
+    },
+    {
+        label: 'Analyst Satellites ',
+        value: 5
+    },
+    {
+        label: 'IRIDIUM 33 Debris',
+        value: 6
+    },
+    {
+        label: 'COSMOS 2251 Debris',
+        value: 7
+    }
+])
+
+const weatherSatellite = ref([
+{
+        label: 'Weather',
+        value: 1
+    },
+    {
+        label: 'NOAA',
+        value: 2
+    },
+    {
+        label: 'GOES',
+        value: 3
+    },
+    {
+        label: 'Earth Resources',
+        value: 4
+    },
+    {
+        label: 'Search & Rescue (SARSAT) ',
+        value: 5
+    },
+    {
+        label: 'Disaster Monitoring',
+        value: 6
+    },
+    {
+        label: 'TDRSS', 
+        value: 7
+    },
+    {
+        label: 'ARGOS Data Collection System',
+        value: 8
+    },
+    {
+        label: 'Planet',
+        value: 9
+    },
+    {
+        label: 'Spire',
+        value: 10
+    }
+])
+
 
 Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiYjZmMWM4Ny01YzQ4LTQ3MzUtYTI5Mi1hNTgyNjdhMmFiMmMiLCJpZCI6NjIwMjgsImlhdCI6MTYyNjY3MTMxNX0.5SelYUyzXWRoMyjjFvmFIAoPtWlJPQMjsVl2e_jQe-c';
 
@@ -115,6 +213,15 @@ function addCesiumEventListener() {
     }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
 }
 
+// 事件
+function handleSpacialInterestChange(e) {
+    console.log(e);
+}
+
+function handleWeatherSatelliteChange(e) {
+    console.log(e);
+}
+
 onMounted(async () => {
     initCesium();
     initTimeLine();