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 uavDisArr: number[] = []
let uavHeightArr: number[] = []
let terrainArr: number[] = []
onMounted(()=>{
  myChart = echarts.init(document.getElementById('detection-chart'))
})

const props = defineProps(['groundHeight'])
/**
 * 绘制地形碰撞检测折线图
 * @param height 飞机高度，作为检测线
 * @param currentPos 当前飞机经纬度，作为原点
 * @param nextPos 下一航点经纬度，作为目标点
 */
const drawDetection = (height: number, currentPos:Cartesian3, nextPos: Cartesian3) => {
  // 计算地形剖面
  let res = profileAnalyse(window.viewer, [currentPos, nextPos], 10)
  // 弹出图表窗口
  drawEcharts_CollisionDetection(myChart, res.distanceArray, res.elevationArray, height)

}

/**
 * 绘制地形碰撞检测折线图
 * @param uavH 飞机高度
 * @param uavDis 飞机当前位置与上一位置的距离 米
 * @param terrainH 飞机当前地面投影点的地形高度
 */
const drawDetection2 = (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,
  drawDetection2,
})

</script>

<template>
  <n-space>
    <span style="font-weight: bolder">
      飞机对地高度：{{props.groundHeight}}
    </span>
    <div id="detection-chart"></div>
  </n-space>
</template>

<style scoped>
#detection-chart{
  width: 50rem;
  height: 15rem;
  position: relative;
}
</style>