<script setup lang="ts">
import {
  drawEcharts_CollisionDetection,
  profileAnalyse
} from "@/utils/map/SpatialAnalysis.ts";
import {Cartesian3} from "cesium";
import {nextTick, onMounted} from "vue";
import * as echarts from "echarts";
import {EChartsType} from "echarts";

let myChart: EChartsType = undefined

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

defineExpose({
  drawDetection,
})

</script>

<template>
<div id="detection-chart"></div>
</template>

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