perf: 碰撞检测功能逻辑细化和UI优化

src/assets/js/measureDistance.js

@@ -119,6 +119,23 @@ export default class MeasureDistance {
         this.viewer.scene.requestRender()
     }
 
+    addPointEntity(position){
+        let pEntity = this.viewer.entities.add({
+            position: position,
+            type: "routeDetectPoint",
+            point: {
+                show: true,
+                pixelSize: 10,
+                color: Cesium.Color.ORANGERED,
+                outlineColor: Cesium.Color.WHITE,
+                outlineWidth: 2,
+                clampToGround: true,
+                heightReference:Cesium.HeightReference.CLAMP_TO_GROUND,
+                disableDepthTestDistance:99000000,
+            },
+        });
+        this.vertexEntities.push(pEntity)
+    }
     addKml(kml_file){
         let kmlDataPromise = Cesium.KmlDataSource.load(kml_file, {
             camera: this.viewer.scene.camera,
@@ -298,7 +315,7 @@ export default class MeasureDistance {
     }
 
     /**
-     * 显示飞行航线
+     * 显示航线
      * @param line Airline
      */
     showAirLine(line){
@@ -307,17 +324,34 @@ export default class MeasureDistance {
             let coord = new Cartesian3.fromDegrees(line.points[i].lon,line.points[i].lat,line.points[i].alt)
             degreesArr.push(coord)
         }
+        if(line.isClose)
+            degreesArr.push(new Cartesian3.fromDegrees(line.points[0].lon,line.points[0].lat,line.points[0].alt))
+
         let airlineEntity = new Cesium.Entity({
             name: line.name,
-            id: line.name+line.totalDistance,
+            id: line.name + line.totalDistance,
             polyline: {
                 positions: degreesArr,
-                width: 2,
+                width: 3,
                 material: Cesium.Color.ORANGE,
-                clampToGround: true,
-            },
+                clampToGround: false,
+            }
         })
         this.viewer.entities.add(airlineEntity)
+        for (let pt in degreesArr) {
+            let vertexEntity = new Cesium.Entity({
+                // id: "航点" + ,
+                position:  pt,
+                point: {
+                    color: Cesium.Color.FUCHSIA,
+                    pixelSize: 6,
+                    disableDepthTestDistance:99000000,
+                    // heightReference:Cesium.HeightReference.CLAMP_TO_GROUND,
+                }
+            });
+            this.viewer.entities.add(vertexEntity)
+        }
+
     }
 
     addAirplaneEntity(modelPath,StrUavTypeID){
@@ -334,7 +368,7 @@ export default class MeasureDistance {
                 return new Cesium.Transforms.headingPitchRollQuaternion(
                     new Cesium.Cartesian3.fromDegrees(this.dynamicData.lon, this.dynamicData.lat, this.dynamicData.alt),
                     new Cesium.HeadingPitchRoll(
-                        Cesium.Math.toRadians(this.dynamicData.heading-90),    // 0是正东，顺时针增加
+                        Cesium.Math.toRadians(this.dynamicData.heading-0),    // 0：调整该值（不同模型的正方向不同）
                         Cesium.Math.toRadians(0),
                         Cesium.Math.toRadians(0)
                     ))
@@ -342,8 +376,9 @@ export default class MeasureDistance {
 
             model: {
                 uri: modelPath,
+                scale: 0.001,
                 minimumPixelSize: 100,
-                maximumScale: 2000,
+                maximumScale: 1,
                 runAnimations: true,
                 clampAnimations: true,
                 color: Cesium.Color.fromAlpha(Cesium.Color.RED, parseFloat(1.0)),
@@ -359,6 +394,7 @@ export default class MeasureDistance {
         window.viewer.trackedEntity = null;
         window.viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
     }
+
     stopAreaMeasure(){
         if (!this.measAreaStatus) return;
         this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);

src/assets/js/websocketProtocol.ts

@@ -8,7 +8,7 @@ import {useLayerStore} from "@/store/layerManagerStore.ts";
  */
 function dataProcess(websocketDataCC:any): UavDynamicInfo|null {
     let data:UavDynamicInfo = {
-        alt: 0, groundSpeed: 0, heading: 0, lat: 0, lon: 0, uavId: "", uavType: ""
+        alt: 0, groundSpeed: 0, heading: 0, pitch: 0,lat: 0, lon: 0, uavId: "", uavType: ""
     }
     if(websocketDataCC.infoType===1) {
         let aUavInfo:any = websocketDataCC.info[0]  //目前只取第一个uav
@@ -37,15 +37,17 @@ function dataProcess(websocketDataCC:any): UavDynamicInfo|null {
  * @return UavDynamicInfo
  */
 function dataProcess_fromQT(websocketDataQT:any): UavDynamicInfo|null {
+
     let data:UavDynamicInfo = {
-        alt: 0, groundSpeed: 0, heading: 0, lat: 0, lon: 0, uavId: "", uavType: ""
+        alt: 0, groundSpeed: 0, heading: 0, pitch: 0, lat: 0, lon: 0, uavId: "", uavType: ""
     }
     data.uavId = websocketDataQT.pos.uavId
     data.uavType = websocketDataQT.pos.uavType
     data.heading = websocketDataQT.pos.HeadAngle
+    data.pitch = websocketDataQT.pos.FyAngle
     data.lon = websocketDataQT.pos.lon
     data.lat = websocketDataQT.pos.lat
-    data.alt = websocketDataQT.pos.height
+    data.alt = Number(websocketDataQT.pos.height) + useLayerStore().navi.hFactor
     data.groundSpeed = websocketDataQT.pos.groundSpeed   //km/h
 
     useLayerStore().navi.currentRouteID = websocketDataQT.navi.currentRouteID
@@ -53,8 +55,8 @@ function dataProcess_fromQT(websocketDataQT:any): UavDynamicInfo|null {
     useLayerStore().navi.nextPoint = websocketDataQT.navi.nextPoint
     useLayerStore().navi.distonext = websocketDataQT.navi.distonext
 
-    console.log(data.lon,data.lat, data.alt)
-
+    // console.log(data.lon,data.lat, data.alt)
+    //
     return data.lon==0? null: data
 }
 
@@ -63,24 +65,23 @@ function dataProcess_fromQT_route(websocketDataQT:any): Airline|null {
         code: 0, PtNum: 0, isClose: false, name: "", points: [], totalDistance: 0
     }
     if(!websocketDataQT.route)  return null
-    data.PtNum = websocketDataQT.route.length
-    for (let i = 1; i < websocketDataQT.route.length; i++) {
+    data.PtNum = websocketDataQT.route.points.length
+    data.isClose = websocketDataQT.route.isClose
+    for (let i = 1; i < websocketDataQT.route.points.length; i++) {
         let aPt: AirlinePoint = {alt: 0, ch1: 0, ch2: 0, lat: 0, lon: 0, nPt: 0, speed: 0}
-        aPt.lon = websocketDataQT.route[i].lon
-        aPt.lat = websocketDataQT.route[i].lat
-        aPt.alt = websocketDataQT.route[i].height
-        aPt.ch1 = websocketDataQT.route[i].ch1
-        aPt.ch2 = websocketDataQT.route[i].ch2
-        aPt.nPt = websocketDataQT.route[i].nPt
-        aPt.speed = websocketDataQT.route[i].nV
-        data.code = websocketDataQT.route[i].nL
+        aPt.lon = websocketDataQT.route.points[i].lon
+        aPt.lat = websocketDataQT.route.points[i].lat
+        aPt.alt = websocketDataQT.route.points[i].height
+        aPt.ch1 = websocketDataQT.route.points[i].ch1
+        aPt.ch2 = websocketDataQT.route.points[i].ch2
+        aPt.nPt = websocketDataQT.route.points[i].nPt
+        aPt.speed = websocketDataQT.route.points[i].nV
+        data.code = websocketDataQT.route.points[i].nL
         data.points.push(aPt)
     }
-    if(data.points[data.PtNum-2].ch1 ==2)
-        data.isClose = true
-
     data.name = "lineID-" + data.code.toString()
     console.log(data)
+
     return data.PtNum==0? null: data
 }
 

src/components/CollisionDetection.vue

@@ -1,50 +1,82 @@
 <script setup lang="ts">
 import {
   drawEcharts_CollisionDetection,
+  drawEcharts_CollisionDetection2,
   profileAnalyse
 } from "@/utils/map/SpatialAnalysis.ts";
 import {Cartesian3} from "cesium";
-import {nextTick, onMounted} from "vue";
+import {defineEmits, onMounted} from "vue";
 import * as echarts from "echarts";
 import {EChartsType} from "echarts";
-
+import {useLayerStore} from "@/store/layerManagerStore.ts";
+let l_store = useLayerStore()
 let myChart: EChartsType = undefined
-
+let myChart1: EChartsType = undefined
+let uavDisArr: number[] = []
+let uavHeightArr: number[] = []
+let terrainArr: number[] = []
+defineEmits(['shutdown']);
 onMounted(()=>{
   myChart = echarts.init(document.getElementById('detection-chart'))
-  // nextTick(()=>{
-  //
-  // })
+  myChart1 = echarts.init(document.getElementById('terrain-chart'))
+})
+window.addEventListener('resize',function(){
+  myChart.resize()
+  myChart1.resize()
 })
+const props = defineProps(['groundHeight'])
 /**
- * 绘制地形碰撞检测折线图
+ * 绘制地形碰撞检测折线图，差值间隔为1km
  * @param height 飞机高度，作为检测线
  * @param currentPos 当前飞机经纬度，作为原点
  * @param nextPos 下一航点经纬度，作为目标点
+ * @param max_dis 预先探测距离 m
  */
-const drawDetection = (height: number, currentPos:Cartesian3, nextPos: Cartesian3) => {
-  // 计算地形剖面
-  let res = profileAnalyse(window.viewer, [currentPos, nextPos], 10)
+const drawTerrain = (height: number, currentPos:Cartesian3, nextPos: Cartesian3, max_dis: number) => {
+  // 计算地形剖面，默认采样间隔为1km
+  let res = profileAnalyse(window.viewer, [currentPos, nextPos],1000)
   // 弹出图表窗口
-  nextTick(()=>{
-    drawEcharts_CollisionDetection(myChart, res.distanceArray, res.elevationArray, height)
-  })
+  drawEcharts_CollisionDetection(myChart1, res.distanceArray, res.elevationArray, height, max_dis)
+}
+
+/**
+ * 绘制地形碰撞检测折线图
+ * @param uavH 飞机高度
+ * @param uavDis 飞机当前位置与上一位置的距离 米
+ * @param terrainH 飞机当前地面投影点的地形高度
+ */
+const drawDetection = (uavH: number, uavDis:number, terrainH: number) => {
+  if(uavDisArr.length == 0){
+    uavDisArr.push(Math.round(uavDis))
+  }
+  else{
+    uavDisArr.push(Math.round(uavDis + uavDisArr[uavDisArr.length - 1]))
+  }
+
+  uavHeightArr.push(Math.round(uavH))
+  terrainArr.push(Math.round(terrainH))
+
+  // 更新ECharts图表
+  drawEcharts_CollisionDetection2(myChart, uavDisArr, terrainArr, uavHeightArr)
+
 }
 
 defineExpose({
   drawDetection,
+  drawTerrain,
 })
 
 </script>
 
 <template>
-<div id="detection-chart"></div>
+  <div class="chart" id="detection-chart"></div>
+  <div class="chart" id="terrain-chart"></div>
 </template>
 
 <style scoped>
-#detection-chart{
-  width: 50rem;
-  height: 15rem;
-  position: relative;
+.chart{
+  height: 25vh;
+  width: 33rem;
+  margin: 0 0 0 0;
 }
 </style>

src/components/HomePage.vue

@@ -3,33 +3,59 @@ import {defineComponent} from 'vue'
 import SceneViewer from "@/components/map/SceneViewer.vue";
 import BottomBar from "@/components/map/BottomBar.vue";
 import Toolbar from "@/components/toolbar.vue";
+import CollisionDetection from "@/components/CollisionDetection.vue";
+import {useMessage} from 'naive-ui'
 
 export default defineComponent({
   name: "HomePage",
-  components: {Toolbar, BottomBar, SceneViewer}
+  components: {CollisionDetection, Toolbar, BottomBar, SceneViewer},
+  data(){
+    return {
+      showDetection: false,
+      graphHeight: 0,
+      message: useMessage()
+    }
+  },
+  computed: {
+    setPageStyle: function () {
+      return this.showDetection? 100 - this.graphHeight : 100
+      }
+  },
+  methods: {
+    // 显示地形碰撞检测面板，resize地图窗口
+    resizeMap(height: number) {
+      if(height<0)
+        this.showDetection = false
+      else{
+        this.graphHeight = height
+        this.showDetection = true
+      }
+    },
+  }
 })
 </script>
 
 <template>
-  <div id="map">
+  <div id="map" :style="{height: setPageStyle+'vh'}">
     <SceneViewer id="scene-viewer"></SceneViewer>
     <BottomBar></BottomBar>
-    <toolbar></toolbar>
+    <toolbar ref="ToolBar" @resizeMap="resizeMap"></toolbar>
   </div>
+
 </template>
 
 <style>
 @import '../styles/cesium-compass.css';
 #map {
   width: 100vw;
-  height: 100vh;
   position: relative;
-  /* overflow: hidden; */
 }
 #scene-viewer {
   width: 100vw;
-  height: 100vh;
+  height: 100%;
   position: absolute;
   overflow: hidden;
 }
+
+
 </style>

src/components/map/SceneViewer.vue

@@ -21,7 +21,7 @@ import {
 } from '@/utils/map/TDTProvider'
 import { initViewer, perfViewer, showNavigator } from '@/utils/map/sceneViewer'
 import { flyToChina } from '@/utils/map/camera'
-import MeasureDistance from "@/assets/js/cesium-map/measureDistance";
+import MeasureDistance from "@/assets/js/measureDistance.js";
 
 const viewerDivRef = ref<HTMLDivElement>()
 let viewer: Viewer

src/components/toolbar.vue

@@ -4,35 +4,38 @@
   创建人：Zhaipeixiu
 -->
 <script setup>
-import {ChevronBack, CreateOutline, DuplicateSharp, EyeSharp, Layers, Settings} from '@vicons/ionicons5'
+import {ChevronBack,ChevronForward, CreateOutline, DuplicateSharp, EyeSharp, Layers, Settings} from '@vicons/ionicons5'
 import {RulerAlt} from '@vicons/carbon'
 import {TerrainSharp} from '@vicons/material'
 import {DrawPolygon} from '@vicons/fa'
 import {useMessage} from 'naive-ui'
-import {nextTick, ref} from "vue";
+import {ref, defineEmits} from "vue";
 import {useStaticStore} from "@/store/staticOptions.js";
 import {dataProcess_fromQT, dataProcess_fromQT_route} from "@/assets/js/websocketProtocol.ts";
 import SpatialAnalysis from "@/components/SpatialAnalysis.vue";
 import LayerManager from "@/components/map/LayerManager.vue";
-import CollisionDetection from "@/components/CollisionDetection.vue";
+import CollisionDetection from "./CollisionDetection.vue"
 import {useLayerStore} from "@/store/layerManagerStore.ts";
 import {Cartesian3} from "cesium";
-import * as echarts from "echarts";
+import {ByDirectionAndLen, getDistance, getElevation} from "@/utils/map/geocomputation.ts";
 
+
+const emit = defineEmits(['resizeMap'])
 const message = useMessage();
 let SceneValue;
 let showModal = ref(false);
-let showDetection = ref(false);
 let hasPlane = ref(false);
+let showDetection = ref(false);
 let store = useStaticStore();
 let lStore = useLayerStore();
-
+let groundHeight = ref(-1)
+let detectDivHeight = ref(25)
 const spatialAnalyse = ref(null)
 const layerManager = ref(null)
 const collisionDetection = ref(null)
 SceneValue = ref('untrace');
 let frameCount = 0
-
+let lastPos = undefined;  //飞机上一时点的坐标
 function handleSceneSelect(key){
   if(!hasPlane.value)   return;
 
@@ -44,9 +47,19 @@ function handleSceneSelect(key){
 }
 let layerValue = ref('layer1');
 let barIsOpen = ref(true);
-
+function openCloseBar() {
+  // 获取元素
+  let toolbar = document.querySelector('.panel-toolbar989834y34');
+  if(toolbar?.classList.contains('open')){  //关闭
+    toolbar?.classList.remove('open');
+  }
+  else {         // 打开
+    toolbar?.classList.add('open');
+  }
+  barIsOpen.value = !barIsOpen.value
+}
 function handleEditSelect(key) {
-  if(key === 'requestLine') {
+  if(key === 'createLine') {
 
   }
   else{
@@ -152,7 +165,7 @@ function measureArea() {
 async function connectWebSocket() {
   store.webskt.ws = new WebSocket('ws://'+store.webskt.ws_config.address+':'+store.webskt.ws_config.port);
   store.webskt.ws.onopen = function(event){
-    console.log("Connection open ...");
+    console.log("Connection open ...")
     store.webskt.ws.send("hello QT!")
   }
 
@@ -166,49 +179,72 @@ async function connectWebSocket() {
       if (ycData != null) {
         // 更新遥测数据（飞机位置）
         window.measureViewer.updateDynamicData(ycData)
+        lStore.validYCData = true
         // 添加飞机三维图标
         if(!hasPlane.value){
-          window.measureViewer.addAirplaneEntity(store.models.defaultAirPlane, ycData.uavId + ycData.uavType)
+          window.measureViewer.addAirplaneEntity(store.models.fp98, ycData.uavId + ycData.uavType)
           SceneValue.value = 'fallow'
           hasPlane.value = true;
         }
-        /************************测试代码（以下）******************/
-        // if(frameCount>50) {   //(50帧更新一次)
-        //   frameCount = 0
-        //   //TODO: 调用子组件函数、测试
-        //   let cartesianTarget = Cartesian3.fromDegrees(114.6, 37.8)
-        //   let cartesianCurr = Cartesian3.fromDegrees(ycData.lon, ycData.lat, ycData.alt)
-        //   collisionDetection.value?.drawDetection(ycData.alt, cartesianCurr, cartesianTarget)
-        // }
-
-        /************************测试代码（以上）******************/
-        // 加载和更新碰撞检测图(20帧更新一次)
-        if(lStore.navi.airlines.length>0 && frameCount>50){
+        // 加载和更新碰撞检测图(50帧更新一次)
+        if(frameCount>50 && lStore.openDetect){
+          emit('resizeMap', detectDivHeight.value)
+          showDetection.value = true
           frameCount = 0
-          lStore.navi.airlines.forEach(airline => {
-            if(airline.code === lStore.navi.currentRouteID){
-              let targetPos = airline.points[lStore.navi.nextPoint]
-              //TODO: 调用子组件函数、测试
-              let cartesianTarget = Cartesian3.fromDegrees(targetPos.lon, targetPos.lat,targetPos.alt)
-              let cartesianCurr = Cartesian3.fromDegrees(ycData.lon, ycData.lat,ycData.alt)
-              collisionDetection.value?.drawDetection(ycData.alt, cartesianCurr, cartesianTarget)
-
+          let currentPos = Cartesian3.fromDegrees(ycData.lon, ycData.lat,ycData.alt)
+          // 显示飞机当前位置的地表投影点海拔高度 和 飞机高度（折线图）
+          new Promise(resolve => {
+            // 计算对地高度 m
+            groundHeight.value = ycData.alt - getElevation(window.viewer, currentPos)
+            // 计算当前点与上一点的距离 米
+            if(lastPos===undefined){
+              lastPos = currentPos;
             }
+            let dis = getDistance(currentPos, lastPos) * 1000
+            lastPos = currentPos
+            resolve(dis)
+          }).then(res=>{
+            collisionDetection.value.drawDetection(ycData.alt, res, ycData.alt-groundHeight.value)
           })
+          // 当前飞机高度（折线图） 和飞机前方10公里处的地形高度（以飞机当前航向推算）
+          let max_dis = 5000
+          new Promise(resolve => {
+            // 计算前方5公里处的坐标点
+            let detectPos = ByDirectionAndLen(currentPos, ycData.heading, max_dis)
+            // 计算地形剖面
+            collisionDetection.value.drawTerrain(ycData.alt, currentPos, detectPos, max_dis)
+            resolve(detectPos)
+          })
+        }
       }
+      else{ //遥测解析错误或无数据
+        lStore.validYCData = false
       }
     }
     if(sktData.type === 1){
       let routeData = dataProcess_fromQT_route(sktData)
+      if(routeData != null){
         lStore.navi.airlines.push(routeData)
+        lStore.navi.currentRouteID = routeData.code
         console.log(routeData)
-      if(routeData != null){
         window.measureViewer.showAirLine(routeData)
       }
+
     }
   };
 }
 
+//关闭动态碰撞检测功能
+function shutDownDetec() {
+  if(lStore.openDetect){
+    emit('resizeMap', -1)
+  }else{
+    emit('resizeMap', detectDivHeight.value)
+  }
+  showDetection.value = !showDetection.value;
+  lStore.openDetect = !lStore.openDetect
+
+}
 /**
  * 关闭websocket连接
  */
@@ -225,7 +261,7 @@ function manageLayer(){
 </script>
 
 <template>
-  <n-space id="panel">
+  <n-space class="panel-toolbar989834y34">
     <n-row justify-content="space-between">
     <n-tooltip placement="bottom" trigger="hover" >
       <template #trigger>
@@ -256,6 +292,7 @@ function manageLayer(){
     </n-dropdown>
     <n-dropdown :options="store.menuOptions.EditOptions" @select="handleEditSelect">
     <n-button tertiary circle type="warning">
+    <!--航线绘制-->
       <template #icon>
         <n-icon><CreateOutline/></n-icon>
       </template>
@@ -287,25 +324,32 @@ function manageLayer(){
     </n-tooltip>
     <n-popselect v-model:value="SceneValue" :options="store.menuOptions.sceneOptions"
                  @update:value="handleSceneSelect" size="medium">
-<!--                 :disabled="!hasPlane" -->
-
       <n-button tertiary circle type="warning">
         <template #icon>
           <n-icon><EyeSharp/></n-icon>
         </template>
       </n-button>
     </n-popselect>
-    <n-button tertiary circle type="warning">
+    <n-button tertiary circle type="warning" @click="openCloseBar">
       <template #icon>
-<!--        ChevronBack,ChevronForward,-->
-        <n-icon><ChevronBack/></n-icon>
+        <n-icon v-if="barIsOpen"><ChevronBack/></n-icon>
+        <n-icon v-else><ChevronForward/></n-icon>
       </template>
     </n-button>
     </n-row>
   </n-space>
-  <n-space id="detectionGraph" v-show="showDetection">
-    <CollisionDetection ref="collisionDetection"></CollisionDetection>
-  </n-space>
+  <n-button id="bt_switch" size="small" :type="showDetection? 'error': 'success'" v-if="lStore.validYCData"
+            @click="shutDownDetec" :style="{bottom:'0vh'}">
+    {{showDetection? '关闭图表': '显示图表'}}
+  </n-button>
+
+  <n-collapse-transition v-show="showDetection">
+    <n-flex id="detectionGraph" justify="center"
+            :style="{height: detectDivHeight +'vh'}">
+      <CollisionDetection ref="collisionDetection" ></CollisionDetection>
+    </n-flex>
+  </n-collapse-transition>
+
 
   <n-modal v-model:show="showModal"
         style="width: 30%"
@@ -341,21 +385,31 @@ function manageLayer(){
   <LayerManager ref="layerManager"></LayerManager>
 </template>
 
-<style scoped>
-#panel{
+<style>
+.panel-toolbar989834y34{
   position: absolute;
   top: 10px;
   left: 2px;
   border-radius: 7px;
   background: rgba(21, 21, 21, 0.94);
+  transition: left 0.3s;
+}
+
+.panel-toolbar989834y34.open{
+  position: absolute;
+  left: -20rem;
 }
 
+#bt_switch{
+  position: absolute;
+  z-index: 2;
+}
 #detectionGraph{
   position: absolute;
-  bottom: 2rem;
-  width: 100rem;
-  height: 15rem;
+  bottom: -25vh;
+  width: 100vW;
   border-radius: 7px;
-  background: rgba(21, 21, 21, 0.94);
+  background: rgba(255, 255, 255, 0.8);
 }
+
 </style>

src/store/layerManagerStore.ts

@@ -1,5 +1,5 @@
 import {defineStore} from "pinia";
-import {Airline} from "@/types/entityoptions.ts";
+import {Airline, routeTerrain} from "@/types/entityoptions.ts";
 type layer = {
     lName: string
     lId: string
@@ -12,13 +12,17 @@ export const useLayerStore = defineStore('LayerStore', {
     state: ()=>{
         return {
             Layers: [] as layer[],
+            openDetect: true,
+            validYCData: false,
             navi: {
                 airlines: [] as Airline[],
-                currentRouteID: undefined,  //当前航线号
-                nextRouteID: undefined,     //下一航线号
-                nextPoint: undefined,       //下一航点号
-                distonext: undefined,       //待飞距离
+                currentRouteID: -1,  //当前航线号
+                nextRouteID: -1,     //下一航线号
+                nextPoint: -1,       //下一航点号
+                distonext: -1,       //待飞距离
+                hFactor: 3         //高度修正数
             },
+            routesTerrain: [] as routeTerrain[]
         }
     },
     actions: {

src/store/staticOptions.js

@@ -1,5 +1,7 @@
 import {defineStore} from "pinia";
 import cesiumAirPlane from "@/assets/models/Cesium_Air.glb";
+import fp985Plane from "@/assets/models/FP-985.gltf";
+import fp98Plane from "@/assets/models/fp-98.gltf";
 
 export const useStaticStore = defineStore('staticOptions',{
     state: ()=>{
@@ -11,7 +13,7 @@ export const useStaticStore = defineStore('staticOptions',{
             },
             menuOptions:{
                 EditOptions: [
-                    {label: '查询航线', key: 'requestLine'},
+                    {label: '绘制航线', key: 'createLine'},
                     {label: '航线管理', key: 'manage'}
                 ],
                 sceneOptions:[
@@ -51,6 +53,8 @@ export const useStaticStore = defineStore('staticOptions',{
             },
             models: {
                 defaultAirPlane: cesiumAirPlane,
+                fp985: fp985Plane,
+                fp98: fp98Plane
             },
             hasPlane: false,
             uav: {

src/styles/cesium-compass.css

@@ -49,7 +49,7 @@ screen and (max-height: 420px) {
 .navigation-controls {
     position: absolute;
     right: 1.8rem;
-    top: 65vh;
+    top: 55vh;
     width: 2rem;
     border: 1px solid rgba(255, 255, 255, 0.8);
     border-radius: .3rem .3rem .3rem .3rem;
@@ -107,7 +107,7 @@ screen and (max-height: 420px) {
     pointer-events: auto;
     position: absolute;
     right: 0;
-    top: 50vh;
+    top: 41vh;
     width: 6rem;
     height: 6rem;
     overflow: hidden;

src/types/entityoptions.ts

@@ -30,6 +30,7 @@ export type UavDynamicInfo = {
   uavType: string,
   uavFlightControlSn?: string,
   heading:number,
+  pitch:number,
   lon:number,
   lat:number,
   alt:number,
@@ -53,3 +54,9 @@ export type Airline = {
   totalDistance: number,
   points: AirlinePoint[],
 }
+
+export type routeTerrain = {
+  routeID: number,
+  distanceArray: number[],
+  elevationArray: number[],
+}

src/utils/map/SpatialAnalysis.ts

@@ -8,10 +8,12 @@ import {getDistance, getElevation} from "@/utils/map/geocomputation.ts";
 import {Cartesian3, Viewer} from "cesium";
 import * as echarts from "echarts";
 import {EChartsType} from "echarts";
+import {Airline} from "@/types/entityoptions.ts";
 type ProfileResult = {
  distanceArray:number[],
  elevationArray:number[],
 }
+
 /**
  * 两点间地形剖面分析数值计算
  * @param viewer 地图Viewer
@@ -74,6 +76,36 @@ export function profileAnalyse(viewer: Viewer, polyline:Cartesian3[], interval:
  return result
 }
 
+/**
+ * 折线段地形剖面分析数值计算（异步处理函数）
+ * @param viewer 地图Viewer
+ * @param route 航线
+ * @param interval 线段采样间隔 m为单位
+ * @return 从折线起点至终点剖面线的海拔高度数组
+ */
+export function profileAnalyse_promise(viewer: Viewer, route: Airline, interval: number){
+ return new Promise((resolve) => {
+  let result: ProfileResult = { distanceArray:[], elevationArray:[] }
+  let polyline = []
+  //航线转为坐标点数组
+  route.points.forEach(point => {
+   polyline.push(Cartesian3.fromDegrees(point.lon, point.lat,point.alt))
+  })
+  let temp_dis = 0  //每两点之间的距离
+  for (let i = 0; i <= polyline.length - 2; i++) {
+   let temp = elevationProfile(viewer, polyline[i], polyline[i+1], interval)
+   result.elevationArray = result.elevationArray.concat(temp.elevationArray)
+   temp.distanceArray.forEach(distance => {
+    result.distanceArray.push(distance+temp_dis)
+   })
+   if(temp.distanceArray.length > 0){
+    temp_dis += temp.distanceArray[temp.distanceArray.length-1]
+   }
+  }
+  resolve(result)
+ })
+}
+
 /**
  * 两点间通视分析（基于最大斜率的算法） <br>
  * 返回值：通视为true，不通视为false，异常返回undefined
@@ -251,10 +283,18 @@ export function drawEchartsProfileAnalyse(xData:number[], yData:number[]) {
  * @param xData x数组
  * @param yData y数组，以面积线绘制
  * @param height 水平辅助线的高度
+ * @param max_distance 预先探测距离
  */
-export function drawEcharts_CollisionDetection(myChart: EChartsType, xData:number[], yData:number[], height:number) {
+export function drawEcharts_CollisionDetection(myChart: EChartsType, xData:number[], yData:number[], height:number,max_distance:number) {
  // 绘制图表
  myChart.setOption({
+  /** 配置图标离容器上下左右的距离 */
+  grid: {
+   top: "20%",
+   right: "5%",
+   left:"10%",
+   bottom: "12%",
+  },
   legend: {
    show: true,
    type: 'plain',
@@ -287,13 +327,13 @@ export function drawEcharts_CollisionDetection(myChart: EChartsType, xData:numbe
    formatter:'地表高度: {c0}'
   },
   xAxis: {
+   max: Math.ceil(max_distance).toString(),
    data: xData,
-   name: '距离/米',
    nameTextStyle: {
     fontWeight:'bolder',
-    fontSize: 14
+    fontSize: 14,
    },
-   nameLocation: 'end',
+   nameLocation: 'bottom',
    axisLine:{
     onZero: false,
     show: true,    // 是否显示坐标轴轴线
@@ -301,7 +341,7 @@ export function drawEcharts_CollisionDetection(myChart: EChartsType, xData:numbe
     symbolSize: [7, 10]
    },
    axisLabel: {
-    formatter: '{value}',
+    formatter: '{value} m',
     margin: 5,
    },
    axisTick: {
@@ -317,6 +357,12 @@ export function drawEcharts_CollisionDetection(myChart: EChartsType, xData:numbe
   yAxis: {
    type: 'value',
    name: '高度/米',
+   max: (value:any)=>{
+    return Math.floor(Math.max(value.max,height) * 1.01)
+   },
+   min: (value:any)=>{
+    return Math.floor(value.min * 0.99)
+   },
    nameTextStyle: {
     fontWeight:'bolder',
     fontSize: 14
@@ -332,23 +378,6 @@ export function drawEcharts_CollisionDetection(myChart: EChartsType, xData:numbe
     symbolSize: [7, 10]
    }
   },
-  visualMap: {
-   type: 'piecewise',
-   show: false,
-   dimension: 1,
-   // seriesIndex: [0, 1], // 虽然可以指定多个series，但是线的颜色只能设置一条
-   seriesIndex: [0, 1],
-   pieces: [{
-    gt: height,
-    color: 'red'
-   }, {
-    lt: 0,
-    color: 'blue'
-   }],
-   outOfRange: { // 在选中范围外 的视觉元素，这里设置在正常范围内的图形颜色
-    color: 'blue',
-   },
-  },
   series: [
    {
     name:'地形',
@@ -362,7 +391,7 @@ export function drawEcharts_CollisionDetection(myChart: EChartsType, xData:numbe
      name: "飞机高度",
      data: [
       {
-       yAxis: height,
+       yAxis: height.toString(),
        itemStyle: {
         normal: { color: '#c60c30' }
        }
@@ -394,6 +423,120 @@ export function drawEcharts_CollisionDetection(myChart: EChartsType, xData:numbe
  }, false);
 }
 
+/**
+ *  绘制（更新）地形碰撞检测剖面图
+ * @param myChart ECharts对象
+ * @param xData x数组
+ * @param yData y数组，以面积线绘制
+ * @param yData2 y数组2，以折线绘制
+ */
+export function drawEcharts_CollisionDetection2(myChart: EChartsType, xData:number[], yData:number[], yData2: number[]) {
+ // 绘制图表
+ myChart.setOption({
+  /** 配置图标离容器上下左右的距离 */
+  grid: {
+   top: "20%",
+   right: "5%",
+   left:"10%",
+   bottom: "12%",
+  },
+  legend: {
+   show: true,
+   type: 'plain',
+   top: '5%',
+   data:[
+    {
+     name: '地表高度',
+     itemStyle: 'inherit',
+     lineStyle: 'inherit',
+    },
+    {
+     name: '飞机高度',
+     lineStyle: 'inherit',
+    }
+    ]
+  },
+  tooltip: {
+   show: true,
+   trigger: 'axis',
+   axisPointer: {
+    type: 'cross'
+   },
+   formatter:'地表高度: {c0}<br>飞机高度: {c1}'
+  },
+  xAxis: {
+   data: xData,
+   // name: '距离/米',
+   nameTextStyle: {
+    fontWeight:'bolder',
+    fontSize: 14
+   },
+   nameLocation: 'end',
+   axisLine:{
+    onZero: false,
+    show: true,    // 是否显示坐标轴轴线
+    symbol: ['none', 'arrow'],
+    symbolSize: [7, 10]
+   },
+   axisLabel: {
+    formatter: '{value}',
+    margin: 5,
+   },
+   axisTick: {
+    show: true,    // 是否显示坐标轴刻度
+    inside: true,     // 坐标轴刻度是否朝内，默认朝外
+    alignWithLabel: true,
+    lineStyle: {
+     color: '#000000',     //刻度线的颜色
+     type: 'solid',    //坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
+    },
+   }
+  },
+  yAxis: {
+   max: (value:any)=>{
+    return Math.floor(value.max * 1.01)
+   },
+   min: (value:any)=>{
+    return Math.floor(value.min * 0.99)
+   },
+   type: 'value',
+   name: '高度/米',
+   nameTextStyle: {
+    fontWeight:'bolder',
+    fontSize: 14
+   },
+   nameLocation: 'end',
+   position: 'left',
+   axisLabel: {
+    formatter: '{value}'
+   },
+   axisLine: {
+    show: true,
+    symbol: ['none', 'arrow'],
+    symbolSize: [7, 10]
+   }
+  },
+  series: [
+   {
+    name:'地表高度',
+    type: 'line',
+    data: yData,
+    areaStyle: {
+     color: '#37a5fb',
+     opacity: 0.5
+    },
+   },
+   {
+    name: '飞机高度',
+    type: 'line',
+    symbol: 'none',
+    color: 'red',
+    data: yData2,
+   }
+  ]
+ }, false);
+}
+
 
 /**
  *  绘制通视分析图 面积线和直线

src/utils/map/geocomputation.ts

@@ -5,7 +5,15 @@
  * @LastEditTime: 2024-04-01 14:05:43
  * @Description: 地理计算
  */
-import {Cartesian3, Cartographic, EllipsoidGeodesic, Math as Cesium_Math, Matrix4, Transforms, Viewer} from 'cesium'
+import {
+  Cartesian3,
+  Cartographic,
+  EllipsoidGeodesic,
+  Math as Cesium_Math, Matrix3,
+  Matrix4,
+  Transforms,
+  Viewer
+} from 'cesium'
 import {Angle} from "@/utils/map/angle.ts";
 
 /**
@@ -161,5 +169,19 @@ export function getElevation(viewer: Viewer, pos: Cartographic|Cartesian3|number
   }
 }
 
-
+/**
+ *  根据起始点、方位角、距离，计算下一点
+ * @param position  起始点
+ * @param angle 方位角 度（顺时针，正北为0，正东为90）
+ * @param distance 距离 米
+ * @constructor
+ */
+export function ByDirectionAndLen(position: Cartesian3, angle:number, distance:number){
+  let matrix = Transforms.eastNorthUpToFixedFrame(position);
+  let mz = Matrix3.fromRotationZ(2*Cesium_Math.PI - Cesium_Math.toRadians(angle || 0))
+  let rotationZ = Matrix4.fromRotationTranslation(mz);
+  Matrix4.multiply(matrix, rotationZ, matrix);
+  return Matrix4.multiplyByPoint(matrix, new Cartesian3(0, distance, 0),
+      new Cartesian3());
+}
 export { getClosestPoint, isOnLineSegment, getDistance, getAzimuth, getPolygonArea }