feat(*): 代码梳理与精简|删除冗余功能

src/http/index.js

@@ -6,8 +6,6 @@ function getTleDataFromExternal(path = "") {
     let uri = `${BASE_URL}/NORAD/elements/gp.php?GROUP=${path}&FORMAT=tle`;
     return axios.get(uri).then(res => {
         if (res.status === 200) {
-            ElMessage.success('获取TLE成功');
-            localStorage.setItem(path, res.data);  // 缓存TLE数据，减轻数据服务压力
             return Promise.resolve(res.data);
         } else {
             ElMessage.error('获取TLE失败');
@@ -16,6 +14,4 @@ function getTleDataFromExternal(path = "") {
     });
 }
 
-
-
 export { getTleDataFromExternal };

src/js/SatelliteEntity.js

@@ -51,6 +51,7 @@ class SatelliteEntity {
     createSatelliteEntity() {
         const start = Cesium.JulianDate.fromIso8601(new Date().toISOString());
         const stop = Cesium.JulianDate.addSeconds(start, this.totalSeconds, new Cesium.JulianDate());
+        const color = Cesium.Color.fromRandom({ alpha: 1.0 });
         let satelliteEntity = {
             name: this.name,
             description: this.name,
@@ -58,15 +59,15 @@ class SatelliteEntity {
             position: this._getPositionProperty(),
             point: {
                 pixelSize: 8,
-                color: Cesium.Color.fromRandom({ alpha: 1.0 }),
+                color: color,
                 // scaleByDistance: new Cesium.NearFarScalar(1.5e3, 1, 8.0e8, 0.5),
             },
             path: new Cesium.PathGraphics({
-                width: 1,
+                width: 0.5,
-                show: false,
+                show: true,
                 leadTime: this.leadTime,
                 trailTime: this.trailTime,
-                material: Cesium.Color.LIME,
+                material: color,
             }),
             label: {
                 text: this.name,
@@ -79,7 +80,7 @@ class SatelliteEntity {
                 horizontalOrigin: Cesium.VerticalOrigin.LEFT,
                 pixelOffset: new Cesium.Cartesian2(0, 5),
                 fillColor: Cesium.Color.WHITE,
-                distanceDisplayCondition: new Cesium.DistanceDisplayCondition(10.0, 5000000),
+                // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(10.0, 50000000),
             }
         }
         return satelliteEntity;

src/utils/index.js

@@ -0,0 +1,22 @@
+/**
+ * 比较两个数组之间的差异
+ * 
+ * @param {Array} oldArray - 旧的数组
+ * @param {Array} newArray - 新的数组
+ * @throws {Error} 如果oldArray或newArray不是数组，则抛出错误
+ * @returns {Object} 返回一个对象，包含两个属性：addedItems（新数组中新增的元素）和removedItems（旧数组中被移除的元素）
+ */
+function compareArrays(oldArray, newArray) {
+    // 验证参数类型，确保oldArray和newArray都是数组
+    if (!Array.isArray(oldArray) || !Array.isArray(newArray)) {
+        throw new Error('Both oldArray and newArray must be arrays.');
+    }
+    // 使用filter方法找出newArray中oldArray不包含的元素，即新增的元素
+    const addedItems = newArray.filter(x => !oldArray.includes(x));
+    // 使用filter方法找出oldArray中newArray不包含的元素，即被移除的元素
+    const removedItems = oldArray.filter(x => !newArray.includes(x));
+    // 返回新增的元素和被移除的元素
+    return { addedItems, removedItems };
+}
+
+export { compareArrays };

src/views/satellite-track/SatelliteTrack.vue

@@ -4,17 +4,8 @@
         <div class="menu_button" @click="drawer = !drawer" title="卫星星座选择">
             <img src="../../assets/menu.svg" width="28" height="28" alt="卫星星座选择">
         </div>
-        <div class="menu_button" @click="drawerImport = !drawerImport" title="自定义导入TLE数据">
-            <img src="../../assets/import.svg" width="28" height="28" alt="自定义导入TLE数据">
-        </div>
-        <div class="menu_button" @click="handleClearTLECache" title="清除TLE缓存">
-            <img src="../../assets/clean.svg" width="24" height="24" alt="清除TLE缓存">
-        </div>
-        <div class="menu_button" @click="clearSatelliteOrbit" title="清除轨道">
-            <img src="../../assets/hide.svg" width="24" height="24" alt="清除轨道">
-        </div>
     </div>
-    <!-- 抽屉1 -->
+
     <el-drawer v-model="drawer" title="卫星星座选择" direction="ltr">
         <el-checkbox-group v-model="checked" @change="handleSatelliteChange" :max=5>
             <template v-for="(item, index) in allSatellite" :key="index">
@@ -23,24 +14,6 @@
             </template>
         </el-checkbox-group>
     </el-drawer>
-    <!-- 抽屉2 -->
-    <el-drawer v-model="drawerImport" title="自定义卫星数据" direction="ltr">
-        <el-input v-model="tleData" type="textarea" placeholder="Please input tle data" :rows="20" />
-        <el-row class="add_satellite">
-            <el-button type="primary" @click="handleAddSatellite">
-                添加
-            </el-button>
-            <el-upload class="upload_button" :on-change="handleImportSatellite" :show-file-list="false" accept="txt" :limit="1" :auto-upload="false" ref="upload">
-                <template #trigger>
-                    <el-button type="default">导入</el-button>
-                </template>
-            </el-upload>
-            <el-button type="danger" @click="handleClearSatellite">
-                清空
-            </el-button>
-        </el-row>
-
-    </el-drawer>
 </template>
 
 <script setup>
@@ -48,45 +21,29 @@
 
 import * as Cesium from 'cesium';
 import "cesium/Build/Cesium/Widgets/widgets.css";
-
 import { onMounted, ref, watch } from 'vue';
-
 import "./SatelliteTrack.scss"
-
 import { getTleDataFromExternal } from '@/http/index'
-
 import SatelliteEntity from '@/js/SatelliteEntity';
-
 import { specialSatellite, weatherSatellite, communicationSatellite, navigationSatellite, scientificSatellite, miscellaneousSatellite } from "./satelliteType"
+import { compareArrays } from '@/utils';
 
-let allSatellite = [...specialSatellite, ...weatherSatellite, ...communicationSatellite, ...navigationSatellite, ...scientificSatellite, ...miscellaneousSatellite];
+const allSatellite = [...specialSatellite, ...weatherSatellite, ...communicationSatellite, ...navigationSatellite, ...scientificSatellite, ...miscellaneousSatellite];
-
 
 window.CESIUM_BASE_URL = import.meta.env.MODE === 'development' ? '/cesium' : '/satellite-track/cesium';
 
 let viewer;
+// 默认场景的时间跨度
 const totalSeconds = 86400;
-// 保存所有的卫星实例 
+// 保存分组的卫星实例 
 const satelliteMap = new Map();
-// 自定义的卫星
-const customSatelliteMap = new Map();
 // 响应式数据
 const drawer = ref(false);
+// 默认勾选
+const checked = ref(["last-30-days"]);
+// TLE缓存
+const tleCache = new Map();
 
-const drawerImport = ref(false);
-
-const checked = ref([1]);
-
-const clickedSatelliteArray = [];
-
-const upload = ref(null);
-
-let tleData = ref(`BEIDOU-3 G2             
-1 45344U 20017A   23037.82027362 -.00000136  00000+0  00000+0 0  9994
-2 45344   1.9879   4.6761 0000950 328.7503 178.5761  1.00272999 10962
-BEIDOU-3 G3             
-1 45807U 20040A   23037.85365455 -.00000347  00000+0  00000+0 0  9999
-2 45807   0.9369 314.6571 0008244 342.4957 257.2704  1.00264764  9772`);
 
 
 Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiYjZmMWM4Ny01YzQ4LTQ3MzUtYTI5Mi1hNTgyNjdhMmFiMmMiLCJpZCI6NjIwMjgsImlhdCI6MTYyNjY3MTMxNX0.5SelYUyzXWRoMyjjFvmFIAoPtWlJPQMjsVl2e_jQe-c';
@@ -99,12 +56,6 @@ function initCesium() {
         return Cesium.JulianDate.toIso8601(dataZone8).slice(0, 19);
     }
 
-    // mapBox 卫星地图
-    let mapBoxImgLayer = new Cesium.MapboxImageryProvider({
-        mapId: 'mapbox.satellite',
-        accessToken: 'pk.eyJ1Ijoiamlhbmd0ZW5nIiwiYSI6ImNqbGhhcDhzMjAxdncza294c2ZqcHFxNGIifQ.rjSmtZ5QzE2sJ-qDANh3WQ'
-    });
-
     //高德卫星地图
     let gaoDeSatelliteImgLayer = new Cesium.UrlTemplateImageryProvider({
         url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
@@ -113,13 +64,6 @@ function initCesium() {
         tilingScheme: new Cesium.WebMercatorTilingScheme(),
     });
 
-    // 高德地图路网图层
-    let gaoDeImageryProvider = new Cesium.UrlTemplateImageryProvider({
-        url: "http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8",
-        minimumLevel: 3,
-        maximumLevel: 18,
-    })
-
     viewer = new Cesium.Viewer('cesiumContainer', {
         baseLayerPicker: true,
         geocoder: false,
@@ -191,23 +135,6 @@ function parseTle(data = "") {
     return tles;
 }
 
-function parseTleWithSimpleSplit(data = "") {
-    if (data.length === 0) return;
-    let result = data.split("\n");
-    console.log(result)
-    let tles = [], i = 0, tem = [];
-    result.forEach(item => {
-        i++;
-        tem.push(item)
-        if (i === 3) {
-            tles.push(tem.join("\r\n"));
-            tem = [];
-            i = 0;
-        }
-    });
-    return tles;
-}
-
 function addCesiumEventListener() {
     let callback = viewer.screenSpaceEventHandler.getInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
     viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
@@ -218,9 +145,7 @@ function addCesiumEventListener() {
 
         }
         if (pickedFeature) {
-            pickedFeature.id.path.show = new Cesium.ConstantProperty(true);
+
-            pickedFeature.id.label.distanceDisplayCondition = undefined;
-            clickedSatelliteArray.push(pickedFeature);
         }
 
     }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
@@ -231,106 +156,18 @@ function handleSatelliteChange(e) {
 
 }
 
-function handleClearTLECache() {
-    ElMessageBox.confirm("清空TLE缓存后手动刷新页面将重新下载TLE数据，是否继续？", "提示", {
-        distinguishCancelAndClose: true,
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-    }).then(() => {
-        clearTLECache();
-    }).catch(() => {
-        console.log('取消');
-    })
-}
-
-function clearTLECache() {
-    // satelliteMap.forEach(satelliteSet => satelliteSet.forEach(sate => viewer.entities.remove(sate)));
-    // satelliteMap.clear();  // 一级缓存
-    localStorage.clear(); // 二级缓存
-    ElMessage.success('清除成功')
-}
-
-function clearSatelliteOrbit() {
-    if (clickedSatelliteArray.length) {
-        clickedSatelliteArray.forEach(item => {
-            item.id ? item.id.path.show = false : '';
-        })
-    }
-}
-
-function checkTleData(data) {
-    try {
-        if (!data.length) {
-            return false;
-        }
-        let dataArray = data.split('\n');
-        if (dataArray.length % 3 !== 0) {
-            return false;
-        }
-        dataArray.forEach((item, index) => {
-            if (index % 3 === 0 && !item) throw new Error(false);
-            if (index % 3 === 1 && item.length < 69) throw new Error(false);
-            if (index % 3 === 2 && item.length < 69) throw new Error(false);
-        })
-        return true;
-    } catch (error) {
-        console.log(error);
-        return false;
-    }
-}
-
-// 添加自定义卫星实例
-function handleAddSatellite() {
-    if (!checkTleData(tleData.value)) {
-        ElMessage.error('wrong TLE data');
-        return;
-    }
-    clearCustomSatelliteMap();
-    let result = parseTleWithSimpleSplit(tleData.value);
-    result.forEach(tle => {
-        let satellite = new SatelliteEntity(tle);
-        let cesiumSateEntity = satellite.createSatelliteEntity();
-        let result = viewer.entities.add(cesiumSateEntity);
-        customSatelliteMap.set(satellite.name, result)
-    });
-    viewer.zoomTo(viewer.entities);
-
-}
-
-async function handleImportSatellite(uploadFiles) {
-    upload.value.clearFiles();
-    if (uploadFiles.raw.type !== "text/plain") {
-        ElMessage.warning('请上传TXT格式的TLE数据');
-        return;
-    }
-    let data = await uploadFiles.raw.text();
-    tleData.value = data;
-}
-
-// 清空所有状态，输入框和cesium实例
-function handleClearSatellite() {
-    clearCustomSatelliteMap();
-    tleData.value = "";
-    upload.value.clearFiles();
-}
-
-// 清空卫星实例;
-function clearCustomSatelliteMap() {
-    customSatelliteMap.forEach(item => viewer.entities.remove(item));
-    customSatelliteMap.clear();
-}
-
-
-// 获取tle数据，从缓存中获取，若无请求数据
 
+// 获取tle数据，从缓存中获取，若无则请求数据
 async function getTleData(path) {
-    let data = localStorage.getItem(path);
+    let data = tleCache.get(path);
     if (data) {
         console.log(`%c 命中缓存,key值为${path}`, 'color:#0f0;');
         return data;
     } else {
         console.warn("未命中缓存，开始下载TLE数据");
-        return await getTleDataFromExternal(path);
+        const res = await getTleDataFromExternal(path);
+        tleCache.set(path, res);
+        return res;
     }
 }
 
@@ -362,16 +199,14 @@ function removeSatellite(path) {
     }
 }
 
-// 侦听器
 watch(checked, (newValue, oldValue) => {
-    let filterValue = newValue.concat(oldValue).filter((item, index, arr) => arr.indexOf(item) === arr.lastIndexOf(item));
+    const { addedItems, removedItems } = compareArrays(oldValue, newValue);
-    let satelliteClassify = allSatellite.find(item => item.value === filterValue[0]);
+    if (addedItems.length) {
-    // 勾选了卫星
+        // 默认只会有一次操作，也就是说addedItems, removedItems数组中的元素只会有一个，可以直接取第一个元素
-    if (newValue.length > oldValue.length) {
+        addSatellite(addedItems[0]);
-        addSatellite(satelliteClassify.group);
+    }
-    } else {
+    if (removedItems.length) {
-        //取消了勾选
+        removeSatellite(removedItems[0]);
-        removeSatellite(satelliteClassify.group);
     }
 })
 
@@ -381,7 +216,6 @@ onMounted(async () => {
     initCesium();
     initTimeLine();
     addCesiumEventListener();
-    addSatellite('last-30-days');
 })
 
 

src/views/satellite-track/satelliteType.js

@@ -7,27 +7,27 @@ let specialSatellite = [
     },
     {
         label: "Last 30 Days' Launches",
-        value: 1,
+        value: 'last-30-days',
         group: 'last-30-days'
     },
     {
         label: 'Space Stations',
-        value: 2,
+        value: 'stations',
         group: 'stations'
     },
     {
         label: '100 (or so) Brightest',
-        value: 3,
+        value: 'visual',
         group: 'visual'
     },
     {
         label: 'Active Satellites',
-        value: 4,
+        value: 'active',
         group: 'active'
     },
     {
         label: 'Analyst Satellites ',
-        value: 5,
+        value: 'analyst',
         group: 'analyst'
     }
 ];
@@ -41,52 +41,52 @@ let weatherSatellite = [
     },
     {
         label: 'Weather',
-        value: 6,
+        value: 'weather',
         group: 'weather'
     },
     {
         label: 'NOAA',
-        value: 7,
+        value: 'noaa',
         group: 'noaa'
     },
     {
         label: 'GOES',
-        value: 8,
+        value: 'goes',
         group: 'goes'
     },
     {
         label: 'Earth Resources',
-        value: 9,
+        value: 'resource',
         group: 'resource'
     },
     {
         label: 'Search & Rescue (SARSAT) ',
-        value: 10,
+        value: 'sarsat',
         group: 'sarsat'
     },
     {
         label: 'Disaster Monitoring',
-        value: 11,
+        value: 'dmc',
         group: 'dmc'
     },
     {
         label: 'TDRSS',
-        value: 12,
+        value: 'tdrss',
         group: 'tdrss'
     },
     {
         label: 'ARGOS Data Collection System',
-        value: 13,
+        value: 'argos',
         group: 'argos'
     },
     {
         label: 'Planet',
-        value: 14,
+        value: 'planet',
         group: 'planet'
     },
     {
         label: 'Spire',
-        value: 15,
+        value: 'spire',
         group: 'spire'
     }
 ];
@@ -100,97 +100,97 @@ let communicationSatellite = [
     },
     {
         label: 'Active Geosynchronous',
-        value: 16,
+        value: 'geo',
         group: 'geo'
     },
     {
         label: 'GEO Protected Zone',
-        value: 17,
+        value: 'gpz',
         group: 'gpz'
     },
     {
         label: 'GEO Protected Zone Plus',
-        value: 18,
+        value: 'gpz-plus',
         group: 'gpz-plus'
     },
     {
         label: 'Intelsat',
-        value: 19,
+        value: 'intelsat',
         group: 'intelsat'
     },
     {
         label: 'SES',
-        value: 20,
+        value: 'ses',
         group: 'ses'
     },
     {
         label: 'Iridium',
-        value: 21,
+        value: 'iridium',
         group: 'iridium'
     },
     {
         label: 'Iridium NEXT',
-        value: 22,
+        value: 'iridium-NEXT',
         group: 'iridium-NEXT'
     },
     {
         label: 'Starlink',
-        value: 23,
+        value: 'starlink',
         group: 'starlink'
     },
     {
         label: 'OneWeb',
-        value: 24,
+        value: 'oneweb',
         group: 'oneweb'
     },
     {
         label: 'Orbcomm',
-        value: 25,
+        value: 'orbcomm',
         group: 'orbcomm'
     },
     {
         label: 'Globalstar',
-        value: 26,
+        value: 'globalstar',
         group: 'globalstar'
     },
     {
         label: 'Swarm',
-        value: 27,
+        value: 'swarm',
         group: 'swarm'
     },
     {
         label: 'Amateur Radio',
-        value: 28,
+        value: 'amateur',
         group: 'amateur'
     },
     {
         label: 'Experimental Comm',
-        value: 29,
+        value: 'x-comm',
         group: 'x-comm'
     },
     {
         label: 'Other Comm',
-        value: 30,
+        value: 'other-comm',
         group: 'other-comm'
     },
     {
         label: 'SatNOGS',
-        value: 31,
+        value: 'satnogs',
         group: 'satnogs'
     },
     {
         label: 'Gorizont',
-        value: 32,
+        value: 'gorizont',
         group: 'gorizont'
     },
     {
         label: 'Raduga',
-        value: 33,
+        value: 'raduga',
         group: 'raduga'
     },
     {
         label: 'Molniya',
-        value: 34,
+        value: 'molniya',
         group: 'molniya'
     },
 ];
@@ -204,42 +204,42 @@ let navigationSatellite = [
     },
     {
         label: 'GNSS',
-        value: 35,
+        value: 'gnss',
         group: 'gnss'
     },
     {
         label: 'GPS Operational',
-        value: 36,
+        value: 'gps-ops',
         group: 'gps-ops'
     },
     {
         label: 'GLONASS Operational',
-        value: 37,
+        value: 'glo-ops',
         group: 'glo-ops'
     },
     {
         label: 'Galileo',
-        value: 38,
+        value: 'galileo',
         group: 'galileo'
     },
     {
         label: 'Beidou',
-        value: 39,
+        value: 'beidou',
         group: 'beidou'
     },
     {
         label: 'Satellite-Based Augmentation System',
-        value: 40,
+        value: 'sbas',
         group: 'sbas'
     },
     {
         label: 'Navy Navigation Satellite System (NNSS)',
-        value: 41,
+        value: 'nnss',
         group: 'nnss'
     },
     {
         label: 'Russian LEO Navigation',
-        value: 42,
+        value: 'musson',
         group: 'musson'
     },
 ];
@@ -253,22 +253,22 @@ let scientificSatellite = [
     },
     {
         label: 'Space & Earth Science',
-        value: 43,
+        value: 'science',
         group: 'science'
     },
     {
         label: 'Geodetic',
-        value: 44,
+        value: 'geodetic',
         group: 'geodetic'
     },
     {
         label: 'Engineering',
-        value: 45,
+        value: 'engineering',
         group: 'engineering'
     },
     {
         label: 'Education',
-        value: 46,
+        value: 'education',
         group: 'education'
     }
 ];
@@ -282,22 +282,22 @@ let miscellaneousSatellite = [
     },
     {
         label: 'Miscellaneous Military',
-        value: 47,
+        value: 'military',
         group: 'military'
     },
     {
         label: 'Radar Calibration',
-        value: 48,
+        value: 'radar',
         group: 'radar'
     },
     {
         label: 'CubeSats',
-        value: 49,
+        value: 'cubesat',
         group: 'cubesat'
     },
     {
         label: 'Other Satellites',
-        value: 50,
+        value: 'other',
         group: 'other'
     }
 ]