feature: 增加刷新按钮

src/assets/js/RouteManageViewer.js

@@ -131,7 +131,7 @@ export default class RouteManageViewer {
                         depthFailMaterial: Cesium.Color.YELLOW
                     }
                     this.endDraw();
-                    resolve(this._Cartesian_degrees(this.positions))
+                    resolve([this._Cartesian_degrees(this.positions),[...this.vertexEntities,this.lineEntity]])
                 }
             }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
 

src/assets/js/measureViewer.js

@@ -151,7 +151,7 @@ export default class MeasureViewer {
             // console.log(dataSource);
             this.viewer.dataSources.add(dataSource);
             this.viewer.flyTo(dataSource);
-            useLayerStore().addLayer(kml_file.name,kmlDataPromise,undefined,true)
+            useLayerStore().addLayer(kml_file.name,kmlDataPromise,undefined,undefined,true)
         });
     }
 
@@ -171,7 +171,7 @@ export default class MeasureViewer {
         dataGeo.then((dataSources) => {
             console.log(dataSources);
             viewer.dataSources.add(dataSources);
-            useLayerStore().addLayer(js_file.name,dataGeo,undefined,true)
+            useLayerStore().addLayer(js_file.name,dataGeo,undefined,undefined,true)
 
             // 获取datasources中的实体
             let entities = dataSources.entities.values;
@@ -210,14 +210,7 @@ export default class MeasureViewer {
             alpha: 0.6
         });
         this.viewer.imageryLayers.add(imageLayer);
-        useLayerStore().addLayer(url,undefined,imageLayer,true)
+        useLayerStore().addLayer(url,undefined,imageLayer,undefined,true)
-    }
-
-    clearLayers(){
-        useLayerStore().Layers.forEach(layer=>{
-            this.viewer.imageryLayers.remove(layer?.imageLayer,true)
-            this.viewer.dataSources.remove(layer?.dataSource,true)
-        })
     }
 
     /**

src/components/LayerItem.vue

@@ -3,6 +3,7 @@ import {Menu} from "@vicons/ionicons5";
 import {useLayerStore} from "@/store/layerManagerStore.ts";
 import {ref} from "vue";
 let layerShow = ref(true)
+
 let layer: {name:string,id:string} = {
   name:'', id:''
 }
@@ -25,11 +26,20 @@ function handleLayerItem(key:any) {
           if(layer.imageLayer){
             window.viewer.imageryLayers.remove(layer.imageLayer)
           }
+					if(layer.entity.length>0){
+						layer.entity.forEach((item)=>{
+							console.log(window.viewer.entities.remove(item))
+						})
+						window.viewer.scene.requestRender()
+					}
+
+					useLayerStore().removeLayer(layer.lId)
           break
         }
         case 'lookAt': {
           if(layer.dataSource) window.viewer.flyTo(layer.dataSource)
           if(layer.imageLayer) window.viewer.flyTo(layer.imageLayer)
+					if(layer.entity.length>0) window.viewer.flyTo(layer.entity.at(-1))
 					break
         }
         case 'moveTop': {
@@ -55,9 +65,16 @@ function onCheck(checked: boolean) {
           layer.dataSource.then((ds)=>{
             ds.show = true
           })
+					window.viewer.flyTo(layer.dataSource);
         }
         if(layer.imageLayer)  layer.imageLayer.show = true
-        window.viewer.flyTo(layer.dataSource);
+				if(layer.entity.length>0){
+					layer.entity.forEach((item)=>{
+						window.viewer.entities.add(item)
+					})
+					window.viewer.scene.requestRender()
+				}
+				layer.show = true
       }
       else{ //取消选中  隐藏图层
         if(layer.dataSource) {
@@ -66,7 +83,12 @@ function onCheck(checked: boolean) {
           })
         }
         if(layer.imageLayer)  layer.imageLayer.show = false
+				if(layer.entity.length>0){
+					layer.entity.forEach((item)=>{
+						window.viewer.entities.remove(item)
+					})
 					window.viewer.scene.requestRender()
+				}
         layer.show = false
       }
     }

src/components/LayerManager.vue

@@ -34,8 +34,19 @@ let wmsConfig = {
 function addWMSLayer(){
   window.measureViewer.AddWMSLayer(wmsConfig.url)
 }
+//清空图层
 function clearLayers(){
-  window.measureViewer.clearLayers()
+	useLayerStore().Layers.forEach(layer=>{
+		window.viewer.imageryLayers.remove(layer?.imageLayer,true)
+		window.viewer.dataSources.remove(layer?.dataSource,true)
+		if(layer.entity.length>0){
+			layer.entity.forEach(entity=>{
+				window.viewer.entities.remove(entity)
+			})
+		}
+	})
+	window.viewer.scene.requestRender()
+	useLayerStore().clearLayers()
 }
 </script>
 

src/components/page/HomePage.vue

@@ -5,6 +5,7 @@ import BottomBar from "@/components/BottomBar.vue";
 import Toolbar from "@/components/toolbar.vue";
 import CollisionDetection from "@/components/CollisionDetection.vue";
 import {useMessage} from 'naive-ui'
+import {useStaticStore} from "@/store/staticOptions.js";
 
 export default defineComponent({
   name: "HomePage",
@@ -13,8 +14,32 @@ export default defineComponent({
     return {
       showDetection: false,
       graphHeight: 0,
-      message: useMessage()
+      message: useMessage(),
+			staticStore: useStaticStore(),
+			timeId: undefined,
+			msgbox: true,
     }
+  },
+	mounted() {
+		if(!window.navigator.onLine) {
+			this.message.warning('无法连接互联网，当前为离线模式')
+			this.staticStore.networkStatus.offlineMode = true
+		}else{
+			this.setNetworkTimer()
+		}
+
+		// 网络状态监测
+		window.addEventListener('online', () => {
+			this.message.success('网络已连接')
+			this.staticStore.networkStatus.offlineMode = false
+			this.setNetworkTimer()
+		})
+		window.addEventListener('offline', () => {
+			this.message.warning('无法连接互联网，已进入离线模式')
+			this.staticStore.networkStatus.offlineMode = true
+			// 	关闭网络检测定时器
+			this.timeId && clearInterval(this.timeId)
+		})
 	},
 	computed: {
     setPageStyle: function () {
@@ -31,6 +56,24 @@ export default defineComponent({
         this.showDetection = true
       }
     },
+		setNetworkTimer(){
+			this.timeId = setInterval(()=>{
+				// console.log(navigator['connection'].downlink)
+				if(navigator['connection'].downlink < 1){
+					this.staticStore.networkStatus.offlineMode = true
+					if(this.msgbox){
+						this.message.warning('检测到当前网络环境差，已切换至离线模式')
+						this.msgbox = false
+					}
+				}else{
+					this.staticStore.networkStatus.offlineMode = false
+					if(!this.msgbox){
+						this.msgbox = true
+						this.message.info('已切换至在线模式')
+					}
+				}
+			},3000)
+		}
   }
 })
 </script>

src/components/page/RouteManagePage.vue

@@ -277,6 +277,7 @@ function sendRouteToQT(routeUnicode: string|number){
 		if(sStore.webskt.ws?.readyState == WebSocket.OPEN){
 			console.log(selectedRoute)
 			sStore.webskt.ws.send(JSON.stringify(selectedRoute))
+			uiMsg.info('航线' + selectedRoute.name + '已下发')
 		}else {
 			uiMsg.info('请先开启WebSocket')
 		}

src/components/toolbar.vue

@@ -4,7 +4,7 @@
   创建人：Zhaipeixiu
 -->
 <script setup>
-import {ChevronBack,ChevronForward, CreateOutline, DuplicateSharp, EyeSharp, Layers, Settings} from '@vicons/ionicons5'
+import {ChevronBack,ChevronForward, CreateOutline, DuplicateSharp, EyeSharp, Layers, Settings,ReloadSharp} from '@vicons/ionicons5'
 import {RulerAlt} from '@vicons/carbon'
 import {TerrainSharp} from '@vicons/material'
 import {DrawPolygon} from '@vicons/fa'
@@ -201,7 +201,7 @@ async function connectWebSocket() {
           hasPlane.value = true;
         }
         // 加载和更新碰撞检测图(50帧更新一次) (只在联网模式下启用)
-        if(frameCount>50 && lStore.openDetect && window.navigator.onLine){
+        if(frameCount>50 && lStore.openDetect && !store.networkStatus.offlineMode){
           emit('resizeMap', detectDivHeight.value)
           showDetection.value = true
           frameCount = 0
@@ -271,6 +271,9 @@ function closeWS(){
 function manageLayer(){
   layerManager.value?.open_closeSidebar()
 }
+function refreshPage(){
+  window.location.reload()
+}
 
 /**
  * 绘制航线，目前只绘制任务航线
@@ -284,19 +287,19 @@ function startDrawRoute(routeParams) {
   drawLine.start().then(result => {
     // result是经纬度坐标数组，需转换为 AirlinePoint数组
     let AirlinePoints = []
-		result.forEach((pt,index) => {
+		result[0].forEach((pt,index) => {
 			let AirlinePoint = {lon:pt.lon, lat:pt.lat, alt:pt.alt, ch1:routeParams.isClose? 0:2, ch2:0x03, speed:0, nPt:index+1}
 			AirlinePoints.push(AirlinePoint)
 		})
 		AirlinePoints.at(-1).ch2 = 0x01;
     // 航线加入store
     let aRoute = {
-      code: routeParams.code, PtNum: result.length, isClose: routeParams.isClose, unicode: getUnicode(),
+      code: routeParams.code, PtNum: result[0].length, isClose: routeParams.isClose, unicode: getUnicode(),
 			name: routeParams.name, points: AirlinePoints, totalDistance: 0
     }
     useRouteStore().addRoute(aRoute)
-		console.log(useRouteStore().flyRoute)
+    // 航线加入图层管理
-    // fixme: 航线加入图层管理
+		lStore.addLayer(aRoute.name,undefined,undefined, result[1],true)
 
   }).catch(reject => {
     message.error(reject)
@@ -374,6 +377,16 @@ function startDrawRoute(routeParams) {
         </template>
       </n-button>
     </n-popselect>
+		<n-tooltip placement="bottom" trigger="hover">
+			<template #trigger>
+				<n-button tertiary type="warning" @click="refreshPage">
+					<template #icon>
+						<n-icon><ReloadSharp/></n-icon>
+					</template>
+				</n-button>
+			</template>
+			<span> 刷新页面 </span>
+		</n-tooltip>
     <n-button tertiary circle type="warning" @click="openCloseBar">
       <template #icon>
         <n-icon v-if="barIsOpen"><ChevronBack/></n-icon>

src/store/layerManagerStore.ts

@@ -5,6 +5,7 @@ type layer = {
     lId: string
     dataSource?: any
     imageLayer?: any
+    entity?: any[]
     show: boolean
 }
 
@@ -26,17 +27,27 @@ export const useLayerStore = defineStore('LayerStore', {
         }
     },
     actions: {
-        addLayer(lName: string, dataSource?:any, imageLayer?: any,show= true) {
+        addLayer(lName: string, dataSource?:any, imageLayer?: any,entity?: any[], show= true) {
             let time = new Date()
 
             let layer: layer = {
                 dataSource: dataSource,
                 imageLayer: imageLayer,
+                entity: entity,
                 lId: time.getTime().toString(),
                 lName: lName,
-                show: show
+                show: show,
             }
             this.Layers.push(layer)
+        },
+        removeLayer(lId: string) {
+            let i = this.Layers.findIndex((layer:layer) => layer.lId === lId)
+            if(i > -1){
+                this.Layers.splice(i, 1)
+            }
+        },
+        clearLayers(){
+            this.Layers = []
         }
     }
 })

src/store/staticOptions.js

@@ -11,6 +11,9 @@ export const useStaticStore = defineStore('staticOptions',{
                 password:"sysUser003",
                 token:"",
             },
+            networkStatus: {
+              offlineMode: false,   //离线模式
+            },
             menuOptions:{
                 EditOptions: [
                     {label: '绘制航线', key: 'createLine'},

vite.config.ts

@@ -40,7 +40,7 @@ export default defineConfig({
   server: {
     proxy: {
       '/onlinetest': {
-        target: 'http://172.10.0.195:10323/',
+        target: 'http://123.57.54.1:10323/',
         changeOrigin: true,
         rewrite: path => path.replace(/^\/onlinetest/,'')
       }