diff --git a/src/assets/js/cesium-map/measureDistance.js b/src/assets/js/cesium-map/measureDistance.js
index 12ede66..1788a91 100644
--- a/src/assets/js/cesium-map/measureDistance.js
+++ b/src/assets/js/cesium-map/measureDistance.js
@@ -304,15 +304,14 @@ export default class MeasureDistance {
showAirLine(line){
let degreesArr = []
for (let i = 0; i < line.points.length; i++) {
- degreesArr.push(line.points[i].lon)
- degreesArr.push(line.points[i].lat)
- degreesArr.push(line.points[i].alt)
+ let coord = new Cartesian3.fromDegrees(line.points[i].lon,line.points[i].lat,line.points[i].alt)
+ degreesArr.push(coord)
}
let airlineEntity = new Cesium.Entity({
name: line.name,
id: line.name+line.totalDistance,
polyline: {
- positions:Cesium.Cartesian3.fromDegreesArray(degreesArr),
+ positions: degreesArr,
width: 2,
material: Cesium.Color.ORANGE,
clampToGround: true,
@@ -322,9 +321,11 @@ export default class MeasureDistance {
}
addAirplaneEntity(modelPath,StrUavTypeID){
+ this.viewer.scene.globe.depthTestAgainstTerrain = true;
+ store.uav.ModelIDinMap = "ID: " + StrUavTypeID
let entity = this.viewer.entities.add({
name: StrUavTypeID,
- id: "ID: "+StrUavTypeID,
+ id: "ID: " + StrUavTypeID,
position: new Cesium.CallbackProperty(() => {
return new Cesium.Cartesian3.fromDegrees(this.dynamicData.lon, this.dynamicData.lat, this.dynamicData.alt)
}, false),
@@ -347,7 +348,8 @@ export default class MeasureDistance {
clampAnimations: true,
color: Cesium.Color.fromAlpha(Cesium.Color.RED, parseFloat(1.0)),
colorBlendMode: Cesium.ColorBlendMode['MIX'],
- colorBlendAmount: 0
+ colorBlendAmount: 0,
+ clampToGround: true,
}
});
this.viewer.trackedEntity = entity;
diff --git a/src/assets/js/websocketProtocol.ts b/src/assets/js/websocketProtocol.ts
index b7a374f..0cebea0 100644
--- a/src/assets/js/websocketProtocol.ts
+++ b/src/assets/js/websocketProtocol.ts
@@ -1,4 +1,5 @@
import {Airline, AirlinePoint, UavDynamicInfo} from "@/types/entityoptions.ts";
+import {useLayerStore} from "@/store/layerManagerStore.ts";
/**
* 处理来自中心指控websocket的数据，返回所需数据
@@ -39,32 +40,49 @@ function dataProcess_fromQT(websocketDataQT:any): UavDynamicInfo|null {
let data:UavDynamicInfo = {
alt: 0, groundSpeed: 0, heading: 0, lat: 0, lon: 0, uavId: "", uavType: ""
}
- data.uavId = websocketDataQT.uavId
- data.uavType = websocketDataQT.uavType
- data.heading = websocketDataQT.HeadAngle
- data.lon = websocketDataQT.lon
- data.lat = websocketDataQT.lat
- data.alt = websocketDataQT.height
- data.groundSpeed = websocketDataQT.groundSpeed //km/h
+ data.uavId = websocketDataQT.pos.uavId
+ data.uavType = websocketDataQT.pos.uavType
+ data.heading = websocketDataQT.pos.HeadAngle
+ data.lon = websocketDataQT.pos.lon
+ data.lat = websocketDataQT.pos.lat
+ data.alt = websocketDataQT.pos.height
+ data.groundSpeed = websocketDataQT.pos.groundSpeed //km/h
+
+ useLayerStore().navi.currentRouteID = websocketDataQT.navi.currentRouteID
+ useLayerStore().navi.nextRouteID = websocketDataQT.navi.nextRouteID
+ useLayerStore().navi.nextPoint = websocketDataQT.navi.nextPoint
+ useLayerStore().navi.distonext = websocketDataQT.navi.distonext
+
+ console.log(data.lon,data.lat, data.alt)
return data.lon==0? null: data
}
-function getAirline(data: any): Airline | null {
- let line: Airline = {totalDistance: 0, PtNum: 0, name: "", isClose: false, points: []}
- line.PtNum = data.PtNum
- line.name = data.Name
- line.isClose = data.isClose
- line.totalDistance = data.totalDistance
- for (let i = 0; i < data.ListPoints.length; i++) {
- let point: AirlinePoint = {
- alt: 0, lat: 0, lon: 0
- }
- line.points.push(point)
+function dataProcess_fromQT_route(websocketDataQT:any): Airline|null {
+ let data: Airline = {
+ code: 0, PtNum: 0, isClose: false, name: "", points: [], totalDistance: 0
}
- return line
-}
+ if(!websocketDataQT.route) return null
+ data.PtNum = websocketDataQT.route.length
+ for (let i = 1; i < websocketDataQT.route.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
+ 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
+}
function getUavTypeStr(type: number) : string{
switch (type) {
@@ -73,4 +91,4 @@ function getUavTypeStr(type: number) : string{
default: return 'test'
}
}
-export {dataProcess_fromQT,getAirline}
\ No newline at end of file
+export {dataProcess_fromQT,dataProcess_fromQT_route}
\ No newline at end of file
diff --git a/src/components/CollisionDetection.vue b/src/components/CollisionDetection.vue
new file mode 100644
index 0000000..6c0cf9d
--- /dev/null
+++ b/src/components/CollisionDetection.vue
@@ -0,0 +1,50 @@
+<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>
\ No newline at end of file
diff --git a/src/components/toolbar.vue b/src/components/toolbar.vue
index 0761401..d9dd4c4 100644
--- a/src/components/toolbar.vue
+++ b/src/components/toolbar.vue
@@ -9,22 +9,29 @@ import {RulerAlt} from '@vicons/carbon'
import {TerrainSharp} from '@vicons/material'
import {DrawPolygon} from '@vicons/fa'
import {useMessage} from 'naive-ui'
-import {ref} from "vue";
+import {nextTick, ref} from "vue";
import {useStaticStore} from "@/store/staticOptions.js";
-import {requestAirline} from "@/assets/js/request.js";
-import {dataProcess_fromQT, getAirline} from "@/assets/js/websocketProtocol.ts";
+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 {useLayerStore} from "@/store/layerManagerStore.ts";
+import {Cartesian3} from "cesium";
+import * as echarts from "echarts";
const message = useMessage();
let SceneValue;
let showModal = ref(false);
+let showDetection = ref(false);
let hasPlane = ref(false);
let store = useStaticStore();
+let lStore = useLayerStore();
-const spatialAnalyse= ref(null)
-const layerManager= ref(null)
+const spatialAnalyse = ref(null)
+const layerManager = ref(null)
+const collisionDetection = ref(null)
SceneValue = ref('untrace');
+let frameCount = 0
function handleSceneSelect(key){
if(!hasPlane.value) return;
@@ -32,7 +39,7 @@ function handleSceneSelect(key){
if(key === 'untrace') {
window.measureViewer.setNoTrack()
}else if(key === 'fallow') {
- window.viewer.trackedEntity = window.viewer.entities.getById('websocket-flying-plane');
+ window.viewer.trackedEntity = window.viewer.entities.getById(store.uav.ModelIDinMap);
}
}
let layerValue = ref('layer1');
@@ -40,7 +47,7 @@ let barIsOpen = ref(true);
function handleEditSelect(key) {
if(key === 'requestLine') {
- getUavAirline()
+
}
else{
// 航线管理页面
@@ -151,16 +158,53 @@ async function connectWebSocket() {
store.webskt.ws.onmessage = (event) => {
//收到消息后的处理流程....
- let data = dataProcess_fromQT(JSON.parse(event.data))
- console.log(data);
- // 添加飞机三维图标
- if (!hasPlane.value && data != null) {
- window.measureViewer.addAirplaneEntity(store.models.defaultAirPlane, data.uavId + data.uavType)
- SceneValue.value = 'fallow'
- hasPlane.value = true;
+ let sktData = JSON.parse(event.data)
+ // console.log(sktData);
+ frameCount++
+ if(sktData.type === 0){
+ let ycData = dataProcess_fromQT(sktData)
+ if (ycData != null) {
+ // 更新遥测数据（飞机位置）
+ window.measureViewer.updateDynamicData(ycData)
+ // 添加飞机三维图标
+ if(!hasPlane.value){
+ window.measureViewer.addAirplaneEntity(store.models.defaultAirPlane, 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){
+ 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)
+
+ }
+ })
+ }
+ }
}
- if (data != null) {
- window.measureViewer.updateDynamicData(data)
+ if(sktData.type === 1){
+ let routeData = dataProcess_fromQT_route(sktData)
+ lStore.navi.airlines.push(routeData)
+ console.log(routeData)
+ if(routeData != null){
+ window.measureViewer.showAirLine(routeData)
+ }
}
};
}
@@ -174,20 +218,6 @@ function closeWS(){
}
}
-/**
- * 请求航线接口
- */
-function getUavAirline() {
- if(sessionStorage.getItem('uavId')){
- requestAirline(sessionStorage.getItem('uavId')).then(rsp => {
- console.log(rsp.data)
- window.measureViewer.showAirLine(getAirline(rsp.data))
- })
- }else {
- message.warning('当前未连接飞机')
- }
-}
-
function manageLayer(){
layerManager.value?.open_closeSidebar()
}
@@ -273,6 +303,9 @@ function manageLayer(){
</n-button>
</n-row>
</n-space>
+ <n-space id="detectionGraph" v-show="showDetection">
+ <CollisionDetection ref="collisionDetection"></CollisionDetection>
+ </n-space>
<n-modal v-model:show="showModal"
style="width: 30%"
@@ -316,4 +349,13 @@ function manageLayer(){
border-radius: 7px;
background: rgba(21, 21, 21, 0.94);
}
+
+#detectionGraph{
+ position: absolute;
+ bottom: 2rem;
+ width: 100rem;
+ height: 15rem;
+ border-radius: 7px;
+ background: rgba(21, 21, 21, 0.94);
+}
</style>
diff --git a/src/store/layerManagerStore.ts b/src/store/layerManagerStore.ts
index bbf7a6d..e241b3a 100644
--- a/src/store/layerManagerStore.ts
+++ b/src/store/layerManagerStore.ts
@@ -1,4 +1,5 @@
import {defineStore} from "pinia";
+import {Airline} from "@/types/entityoptions.ts";
type layer = {
lName: string
lId: string
@@ -10,7 +11,14 @@ type layer = {
export const useLayerStore = defineStore('LayerStore', {
state: ()=>{
return {
- Layers: [] as layer[]
+ Layers: [] as layer[],
+ navi: {
+ airlines: [] as Airline[],
+ currentRouteID: undefined, //当前航线号
+ nextRouteID: undefined, //下一航线号
+ nextPoint: undefined, //下一航点号
+ distonext: undefined, //待飞距离
+ },
}
},
actions: {
diff --git a/src/store/staticOptions.js b/src/store/staticOptions.js
index 2f50462..e2593a9 100644
--- a/src/store/staticOptions.js
+++ b/src/store/staticOptions.js
@@ -53,6 +53,10 @@ export const useStaticStore = defineStore('staticOptions',{
defaultAirPlane: cesiumAirPlane,
},
hasPlane: false,
+ uav: {
+ ModelIDinMap: '', //地图中的飞机entity ID
+ },
+
analysisVars: {
//当前的空间分析类型，剖面1 通视2
analysisType: -1,
diff --git a/src/types/entityoptions.ts b/src/types/entityoptions.ts
index 633eca9..91c33a6 100644
--- a/src/types/entityoptions.ts
+++ b/src/types/entityoptions.ts
@@ -39,10 +39,15 @@ export type AirlinePoint = {
lon:number,
lat:number,
alt:number,
+ ch2:number,
+ ch1:number, //任务特征字, 2为闭合航线 0为开航线
+ speed:number, //航点特征字
+ nPt:number, //航点号
}
export type Airline = {
name: string,
+ code: number, //航线编号
PtNum: number,
isClose: boolean,
totalDistance: number,
diff --git a/src/utils/map/SpatialAnalysis.ts b/src/utils/map/SpatialAnalysis.ts
index 9070274..458d175 100644
--- a/src/utils/map/SpatialAnalysis.ts
+++ b/src/utils/map/SpatialAnalysis.ts
@@ -7,6 +7,7 @@
import {getDistance, getElevation} from "@/utils/map/geocomputation.ts";
import {Cartesian3, Viewer} from "cesium";
import * as echarts from "echarts";
+import {EChartsType} from "echarts";
type ProfileResult = {
distanceArray:number[],
elevationArray:number[],
@@ -245,30 +246,37 @@ export function drawEchartsProfileAnalyse(xData:number[], yData:number[]) {
/**
- * 绘制折线图（航线碰撞检测）
+ * 绘制地形碰撞检测剖面图
+ * @param myChart ECharts对象
* @param xData x数组
* @param yData y数组，以面积线绘制
- * @param yData2 y数组，以折线绘制
+ * @param height 水平辅助线的高度
*/
-export const drawEchartsAirlineDetect = (xData:number[],yData:number[],yData2:number[]) => {
- let myChart = echarts.init(document.getElementById('profileEChart'))
+export function drawEcharts_CollisionDetection(myChart: EChartsType, xData:number[], yData:number[], height:number) {
// 绘制图表
myChart.setOption({
- legend:{
+ legend: {
show: true,
type: 'plain',
- top: '7%',
+ top: '5%',
data:[
{
- name: 'groundLine',
+ name: '地形',
itemStyle: 'inherit',
lineStyle: 'inherit',
},
- {
- name: 'airLine',
- itemStyle: 'inherit',
- lineStyle: 'inherit',
- }]
+ { //视线图例
+ name: '飞机高度',
+ lineStyle: {
+ type: 'dotted',
+ width: 3,
+ color: '#f8364d'
+ },
+ itemStyle: {
+ fontSize: 18
+ }
+ }
+ ]
},
tooltip: {
show: true,
@@ -276,11 +284,11 @@ export const drawEchartsAirlineDetect = (xData:number[],yData:number[],yData2:nu
axisPointer: {
type: 'cross'
},
- formatter:'地表高度: {c0}<br>航线高度: {c1}'
+ formatter:'地表高度: {c0}'
},
xAxis: {
data: xData,
- name: '距离',
+ name: '距离/米',
nameTextStyle: {
fontWeight:'bolder',
fontSize: 14
@@ -293,7 +301,7 @@ export const drawEchartsAirlineDetect = (xData:number[],yData:number[],yData2:nu
symbolSize: [7, 10]
},
axisLabel: {
- formatter: '{value} m',
+ formatter: '{value}',
margin: 5,
},
axisTick: {
@@ -308,7 +316,7 @@ export const drawEchartsAirlineDetect = (xData:number[],yData:number[],yData2:nu
},
yAxis: {
type: 'value',
- name: '高度',
+ name: '高度/米',
nameTextStyle: {
fontWeight:'bolder',
fontSize: 14
@@ -316,7 +324,7 @@ export const drawEchartsAirlineDetect = (xData:number[],yData:number[],yData2:nu
nameLocation: 'end',
position: 'left',
axisLabel: {
- formatter: '{value} m'
+ formatter: '{value}'
},
axisLine: {
show: true,
@@ -324,23 +332,66 @@ export const drawEchartsAirlineDetect = (xData:number[],yData:number[],yData2:nu
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:'groundLine',
+ name:'地形',
type: 'line',
data: yData,
areaStyle: {
color: '#37a5fb',
opacity: 0.5
- }
+ },
+ markLine: {
+ name: "飞机高度",
+ data: [
+ {
+ yAxis: height,
+ itemStyle: {
+ normal: { color: '#c60c30' }
+ }
+ }
+ ],
+ symbol:['circle', 'arrow'],
+ label:{
+ formatter: "飞机高度",
+ show: true,
+ position: 'middle',
+ fontSize: 15,
+ fontWeight: 'bold',
+ color: '#e73d3d',
+ },
+ lineStyle: { //标注线样式
+ type: 'dashed',
+ color: 'red',
+ with: 10
+ }
+ },
},
{
- name:'airLine',
type: 'line',
- data: yData2,
+ symbol: 'none',
+ name: '飞机高度',
+ color: 'transparent'
}
]
- });
+ }, false);
}