GCSGUI/src/components/CollisionDetection.vue

<script setup lang="ts">
import {
  drawEcharts_CollisionDetection,
  drawEcharts_CollisionDetection2,
  profileAnalyse
} from "@/utils/map/SpatialAnalysis.ts";
import {Cartesian3} from "cesium";
import {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[] = []
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 drawTerrain = (height: number, currentPos:Cartesian3, nextPos: Cartesian3, max_dis: number) => {
  // 计算地形剖面
  let res = profileAnalyse(window.viewer, [currentPos, nextPos], max_dis/1000)
  // 弹出图表窗口
  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 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>
.chart{
  height: 15rem;
  width: 33rem;
  margin: 1rem 0 -4rem 0;
}
</style>