feature: 实现两个曲线图同时动态绘制

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,
@@ -377,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
@@ -38,11 +38,12 @@ function dataProcess(websocketDataCC:any): UavDynamicInfo|null {
  */
 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 = Number(websocketDataQT.pos.height) + useLayerStore().navi.hFactor

src/components/CollisionDetection.vue

@@ -11,26 +11,28 @@ 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[] = []
 onMounted(()=>{
   myChart = echarts.init(document.getElementById('detection-chart'))
+  myChart1 = echarts.init(document.getElementById('terrain-chart'))
 })
 
 const props = defineProps(['groundHeight'])
 /**
- * 绘制地形碰撞检测折线图
+ * 绘制地形碰撞检测折线图，差值间隔为1km
  * @param height 飞机高度，作为检测线
  * @param currentPos 当前飞机经纬度，作为原点
  * @param nextPos 下一航点经纬度，作为目标点
+ * @param max_dis 预先探测距离 m
  */
-const drawDetection = (height: number, currentPos:Cartesian3, nextPos: Cartesian3) => {
+const drawTerrain = (height: number, currentPos:Cartesian3, nextPos: Cartesian3, max_dis: number) => {
   // 计算地形剖面
-  let res = profileAnalyse(window.viewer, [currentPos, nextPos], 10)
+  let res = profileAnalyse(window.viewer, [currentPos, nextPos], max_dis/1000)
   // 弹出图表窗口
-  drawEcharts_CollisionDetection(myChart, res.distanceArray, res.elevationArray, height)
-
+  drawEcharts_CollisionDetection(myChart1, res.distanceArray, res.elevationArray, height, max_dis)
 }
 
 /**
@@ -39,7 +41,7 @@ const drawDetection = (height: number, currentPos:Cartesian3, nextPos: Cartesian
  * @param uavDis 飞机当前位置与上一位置的距离 米
  * @param terrainH 飞机当前地面投影点的地形高度
  */
-const drawDetection2 = (uavH: number, uavDis:number, terrainH: number) => {
+const drawDetection = (uavH: number, uavDis:number, terrainH: number) => {
   if(uavDisArr.length == 0){
     uavDisArr.push(Math.round(uavDis))
   }
@@ -57,24 +59,28 @@ const drawDetection2 = (uavH: number, uavDis:number, terrainH: number) => {
 
 defineExpose({
   drawDetection,
-  drawDetection2,
+  drawTerrain,
 })
 
 </script>
 
 <template>
-  <n-space>
-    <span style="font-weight: bolder">
-      飞机对地高度：{{props.groundHeight}}
-    </span>
-    <div id="detection-chart"></div>
-  </n-space>
+  <div class="chart" id="detection-chart"></div>
+  <div class="chart" id="terrain-chart"></div>
+<!--  <n-grid x-gap="12" :cols="2">-->
+<!--    <n-gi class="chart">-->
+<!--      <div id="detection-chart"></div>-->
+<!--    </n-gi>-->
+<!--    <n-gi class="chart">-->
+<!--      <div id="terrain-chart"></div>-->
+<!--    </n-gi>-->
+<!--  </n-grid>-->
 </template>
 
 <style scoped>
-#detection-chart{
-  width: 50rem;
+.chart{
   height: 15rem;
-  position: relative;
+  width: 33rem;
+  margin: 1rem 0 -4rem 0;
 }
 </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

@@ -17,7 +17,7 @@ import LayerManager from "@/components/map/LayerManager.vue";
 import CollisionDetection from "@/components/CollisionDetection.vue";
 import {useLayerStore} from "@/store/layerManagerStore.ts";
 import {Cartesian3} from "cesium";
-import {getDistance, getElevation} from "@/utils/map/geocomputation.ts";
+import {ByDirectionAndLen, getDistance, getElevation} from "@/utils/map/geocomputation.ts";
 
 const message = useMessage();
 let SceneValue;
@@ -172,12 +172,12 @@ async function connectWebSocket() {
           SceneValue.value = 'fallow'
           hasPlane.value = true;
         }
-        console.log(frameCount)
         // 加载和更新碰撞检测图(50帧更新一次)
         if(frameCount>50){
           showDetection.value = true
           frameCount = 0
           let currentPos = Cartesian3.fromDegrees(ycData.lon, ycData.lat,ycData.alt)
+          // 显示飞机当前位置的地表投影点海拔高度 和 飞机高度（折线图）
           new Promise(resolve => {
             // 计算对地高度 m
             groundHeight.value = ycData.alt - getElevation(window.viewer, currentPos)
@@ -189,7 +189,18 @@ async function connectWebSocket() {
             lastPos = currentPos
             resolve(dis)
           }).then(res=>{
-            collisionDetection.value.drawDetection2(ycData.alt, res, ycData.alt-groundHeight.value)
+            collisionDetection.value.drawDetection(ycData.alt, res, ycData.alt-groundHeight.value)
+          })
+          // 当前飞机高度（折线图） 和飞机前方10公里处的地形高度（以飞机当前航向推算）
+          let max_dis = 5000
+          new Promise(resolve => {
+            // 计算前方10公里处的坐标点
+            let detectPos = ByDirectionAndLen(currentPos, ycData.heading, max_dis)
+            // 计算地形剖面
+            collisionDetection.value.drawTerrain(ycData.alt, currentPos, detectPos, max_dis)
+            resolve(detectPos)
+          }).then(res=>{
+            window.measureViewer.addPointEntity(res)
           })
         }
       }
@@ -200,20 +211,7 @@ async function connectWebSocket() {
         lStore.navi.airlines.push(routeData)
         lStore.navi.currentRouteID = routeData.code
         console.log(routeData)
-
         window.measureViewer.showAirLine(routeData)
-
-        //计算航线的地形剖面，并存储到store中
-        // FIXME: 当前逻辑有待更新
-        /*
-        profileAnalyse_promise(window.viewer, routeData,100).then((result) => {
-          let routeTerr = {}
-          routeTerr.routeID = routeData.code
-          routeTerr.distanceArray = result.distanceArray
-          routeTerr.elevationArray = result.elevationArray
-          lStore.routesTerrain.push(routeTerr)
-        })
-        */
       }
 
     }
@@ -314,9 +312,9 @@ function manageLayer(){
     </n-button>
     </n-row>
   </n-space>
-  <n-space id="detectionGraph" v-show="showDetection">
+  <n-flex id="detectionGraph" justify="center" v-show="showDetection">
     <CollisionDetection ref="collisionDetection" :groundHeight="groundHeight"></CollisionDetection>
-  </n-space>
+  </n-flex>
 
   <n-modal v-model:show="showModal"
         style="width: 30%"
@@ -364,9 +362,9 @@ function manageLayer(){
 #detectionGraph{
   position: absolute;
   bottom: 2rem;
-  width: 100rem;
+  width: 100%;
   height: 15rem;
   border-radius: 7px;
-  background: rgba(255, 255, 255, 0.94);
+  background: rgba(255, 255, 255, 0.8);
 }
 </style>

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,

src/utils/map/SpatialAnalysis.ts

@@ -283,8 +283,9 @@ 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({
   legend: {
@@ -319,13 +320,14 @@ export function drawEcharts_CollisionDetection(myChart: EChartsType, xData:numbe
    formatter:'地表高度: {c0}'
   },
   xAxis: {
+   max: max_distance,
    data: xData,
-   name: '距离/米',
    nameTextStyle: {
     fontWeight:'bolder',
-    fontSize: 14
+    fontSize: 14,
+    padding:[0,0,-520,0]
    },
-   nameLocation: 'end',
+   nameLocation: 'bottom',
    axisLine:{
     onZero: false,
     show: true,    // 是否显示坐标轴轴线
@@ -333,7 +335,7 @@ export function drawEcharts_CollisionDetection(myChart: EChartsType, xData:numbe
     symbolSize: [7, 10]
    },
    axisLabel: {
-    formatter: '{value}',
+    formatter: '{value} m',
     margin: 5,
    },
    axisTick: {
@@ -349,6 +351,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
@@ -364,23 +372,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:'地形',
@@ -394,7 +385,7 @@ export function drawEcharts_CollisionDetection(myChart: EChartsType, xData:numbe
      name: "飞机高度",
      data: [
       {
-       yAxis: height,
+       yAxis: height.toString(),
        itemStyle: {
         normal: { color: '#c60c30' }
        }
@@ -448,14 +439,7 @@ export function drawEcharts_CollisionDetection2(myChart: EChartsType, xData:numb
     },
     {
      name: '飞机高度',
-     lineStyle: {
-      type: 'dotted',
-      width: 3,
-      color: '#f8364d'
-     },
-     itemStyle: {
-      fontSize: 18
-     }
+     lineStyle: 'inherit',
     }
     ]
   },
@@ -469,7 +453,7 @@ export function drawEcharts_CollisionDetection2(myChart: EChartsType, xData:numb
   },
   xAxis: {
    data: xData,
-   name: '距离/米',
+   // name: '距离/米',
    nameTextStyle: {
     fontWeight:'bolder',
     fontSize: 14

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 }