perf: 障碍物添加和航线绘制、websocket发送后端
parent
6572ef649d
commit
a8701993b3
@ -0,0 +1,168 @@
|
|||||||
|
import {DataSource} from "cesium";
|
||||||
|
import * as Cesium from 'cesium'
|
||||||
|
|
||||||
|
|
||||||
|
export default class RouteManageViewer {
|
||||||
|
constructor(viewer, isClose, height) {
|
||||||
|
this.viewer = viewer
|
||||||
|
this.scene = viewer.scene
|
||||||
|
this.routeParams = {
|
||||||
|
isClose: isClose,
|
||||||
|
height: height,
|
||||||
|
}
|
||||||
|
this.positions = []
|
||||||
|
this.temPositions = [] // 鼠标移动时产生的临时点
|
||||||
|
this.vertexEntities = [] // 节点元素
|
||||||
|
this.lineEntity = undefined // 折线元素
|
||||||
|
this.lineEntitys = [] // 折线元素数组，每完成一次航线绘制，将折线元素加入此数组
|
||||||
|
}
|
||||||
|
|
||||||
|
// -------------------------------------------//
|
||||||
|
//开始绘制
|
||||||
|
start() {
|
||||||
|
this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)
|
||||||
|
this.viewer.scene.globe.depthTestAgainstTerrain = true
|
||||||
|
|
||||||
|
//设置鼠标样式
|
||||||
|
this.viewer._element.style.cursor = 'crosshair';
|
||||||
|
this.viewer.enableCursorStyle = true;
|
||||||
|
this.temPositions = [];
|
||||||
|
this.positions = [];
|
||||||
|
return new Promise((resolve,reject) => {
|
||||||
|
//注册鼠标事件
|
||||||
|
//单击鼠标左键画点点击事件
|
||||||
|
this.handler.setInputAction(e => {
|
||||||
|
let position = this.viewer.scene.pickPosition(e.position);
|
||||||
|
if (!position) {
|
||||||
|
const ellipsoid = this.viewer.scene.globe.ellipsoid;
|
||||||
|
position = this.viewer.scene.camera.pickEllipsoid(e.position, ellipsoid);
|
||||||
|
}
|
||||||
|
//TODO: 海拔高度转Cartesain3 Z 值
|
||||||
|
if (position){
|
||||||
|
this.positions.push(position);
|
||||||
|
}
|
||||||
|
if (this.positions.length === 1) { //首次点击
|
||||||
|
this.createLineEntity();
|
||||||
|
}
|
||||||
|
this.createVertex();
|
||||||
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||||||
|
|
||||||
|
this.handler.setInputAction(e => {
|
||||||
|
if (this.positions.length < 3) {
|
||||||
|
this.endDraw();
|
||||||
|
this.clearDisEntity()
|
||||||
|
reject("航线不得少于三个航点！")
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this.lineEntity.polyline = {
|
||||||
|
positions: this.routeParams.isClose? this.positions.concat(this.positions[0]) : this.positions,
|
||||||
|
width: 2,
|
||||||
|
material: Cesium.Color.YELLOW,
|
||||||
|
depthFailMaterial: Cesium.Color.YELLOW
|
||||||
|
}
|
||||||
|
this.endDraw();
|
||||||
|
resolve(this._Cartesian_degrees(this.positions))
|
||||||
|
}
|
||||||
|
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
|
||||||
|
|
||||||
|
this.handler.setInputAction(e => {
|
||||||
|
let position = this.viewer.scene.pickPosition(e.endPosition);
|
||||||
|
if (!position) {
|
||||||
|
position = this.viewer.scene.camera.pickEllipsoid(e.startPosition, this.viewer.scene.globe.ellipsoid);
|
||||||
|
}
|
||||||
|
if (this.positions.length >= 1){
|
||||||
|
this.temPositions = this.positions.concat(position);
|
||||||
|
}
|
||||||
|
this.viewer.scene.requestRender()
|
||||||
|
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//结束绘制
|
||||||
|
endDraw() {
|
||||||
|
this.unRegisterEvents();
|
||||||
|
this.viewer._element.style.cursor = 'default';
|
||||||
|
this.viewer.enableCursorStyle = true;
|
||||||
|
this.lineEntitys.push(this.lineEntity)
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
//清空绘制
|
||||||
|
clearDisEntity() {
|
||||||
|
//清除折线
|
||||||
|
this.lineEntitys.forEach(item => {
|
||||||
|
this.viewer.entities.remove(item);
|
||||||
|
});
|
||||||
|
//清除节点
|
||||||
|
this.vertexEntities.forEach(item => {
|
||||||
|
this.viewer.entities.remove(item);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.positions = []
|
||||||
|
this.temPositions = [] // 鼠标移动时产生的临时点
|
||||||
|
this.vertexEntities = [] // 节点元素
|
||||||
|
this.lineEntity = undefined // 折线元素
|
||||||
|
this.lineEntitys = [] // 折线元素数组，每完成一次航线绘制，将折线元素加入此数组
|
||||||
|
}
|
||||||
|
|
||||||
|
//创建线对象
|
||||||
|
createLineEntity() {
|
||||||
|
this.lineEntity = this.viewer.entities.add({
|
||||||
|
polyline: {
|
||||||
|
positions: new Cesium.CallbackProperty(e => {
|
||||||
|
return this.temPositions;
|
||||||
|
}, false),
|
||||||
|
width: 2,
|
||||||
|
material: Cesium.Color.YELLOW,
|
||||||
|
clampToGround: true,
|
||||||
|
heightReference:Cesium.HeightReference.CLAMP_TO_GROUND,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
this.viewer.scene.requestRender()
|
||||||
|
}
|
||||||
|
//创建线节点
|
||||||
|
createVertex() {
|
||||||
|
let vertexEntity = new Cesium.Entity({
|
||||||
|
id: "Route" + this.positions[this.positions.length - 1],
|
||||||
|
position: this.positions[this.positions.length - 1],
|
||||||
|
point: {
|
||||||
|
color: Cesium.Color.FUCHSIA,
|
||||||
|
pixelSize: 8,
|
||||||
|
outlineColor: Cesium.Color.WHITE,
|
||||||
|
outlineWidth: 2,
|
||||||
|
disableDepthTestDistance:99000000,
|
||||||
|
heightReference:Cesium.HeightReference.CLAMP_TO_GROUND,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
this.vertexEntities.push(vertexEntity)
|
||||||
|
this.viewer.entities.add(vertexEntity)
|
||||||
|
}
|
||||||
|
|
||||||
|
//解除鼠标事件（测距）
|
||||||
|
unRegisterEvents() {
|
||||||
|
this.handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);
|
||||||
|
this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||||||
|
this.handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 笛卡尔坐标数组转为经纬度坐标数组
|
||||||
|
* @param cartesian3Arr 笛卡尔坐标数组
|
||||||
|
* @returns {*[]} 经纬度坐标数组
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
_Cartesian_degrees(cartesian3Arr){
|
||||||
|
let coords = []
|
||||||
|
cartesian3Arr.forEach((item) => {
|
||||||
|
// 将 Cartesian3 转换为 Cartographic
|
||||||
|
let cartographic = Cesium.Cartographic.fromCartesian(item, Cesium.Ellipsoid.WGS84);
|
||||||
|
coords.push({
|
||||||
|
lon: Cesium.Math.toDegrees(cartographic.longitude),
|
||||||
|
lat: Cesium.Math.toDegrees(cartographic.latitude),
|
||||||
|
alt: this.routeParams.height
|
||||||
|
})
|
||||||
|
})
|
||||||
|
return coords
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@ -0,0 +1,54 @@
|
|||||||
|
import { defineAsyncComponent, render, createVNode } from "vue";
|
||||||
|
export class routeDialog {
|
||||||
|
constructor() {
|
||||||
|
this.component = defineAsyncComponent(
|
||||||
|
() => import("@/components/RouteOptions.vue"));
|
||||||
|
this.vnode = null;
|
||||||
|
this.node = null;
|
||||||
|
this.props = {
|
||||||
|
width: "40%",
|
||||||
|
height: "auto",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
installRouteDialog() {
|
||||||
|
if (!this.vnode) {
|
||||||
|
const dialog = createVNode(this.component, this.props);
|
||||||
|
const container = document.createElement('div');
|
||||||
|
render(dialog, container);
|
||||||
|
this.vnode = dialog;
|
||||||
|
this.node = container.childNodes[0];
|
||||||
|
document.body.appendChild(this.node);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @returns {Promise<string>}
|
||||||
|
* @param points 经纬度坐标点数组
|
||||||
|
*/
|
||||||
|
show(points) {
|
||||||
|
// 发送信号，显示窗口
|
||||||
|
const event = new CustomEvent('route-dialog-show', { detail:
|
||||||
|
{ show: true, pts: points }
|
||||||
|
});
|
||||||
|
document.dispatchEvent(event);
|
||||||
|
return new Promise((resolve,reject) => {
|
||||||
|
document.addEventListener('route-dialog-confirm', event => {
|
||||||
|
if(event.detail==='cancel'){
|
||||||
|
reject('cancel')
|
||||||
|
}else{
|
||||||
|
resolve(event.detail);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const aDialog = new routeDialog();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 展示一个阻塞式对话框
|
||||||
|
* @returns {Promise<string>}
|
||||||
|
* @param point 经纬度坐标点数组
|
||||||
|
*/
|
||||||
|
export async function showRouteDialog(point) {
|
||||||
|
return aDialog.show(point);
|
||||||
|
}
|
||||||
@ -0,0 +1,79 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: zhaipx
|
||||||
|
* @Date: 2024-04-01 13:36:35
|
||||||
|
* @Description: 航线选项窗口
|
||||||
|
-->
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {defineEmits, ref} from "vue";
|
||||||
|
|
||||||
|
let emit = defineEmits(['routeDraw','cancelDraw'])
|
||||||
|
let routeParams = ref({
|
||||||
|
code: 0,
|
||||||
|
isClose: false,
|
||||||
|
height: 0,
|
||||||
|
routePts: []
|
||||||
|
})
|
||||||
|
let routeCode = [
|
||||||
|
{
|
||||||
|
label: "任务航线1",
|
||||||
|
value: 1,
|
||||||
|
},{
|
||||||
|
label: "任务航线2",
|
||||||
|
value: 2,
|
||||||
|
},{
|
||||||
|
label: "任务航线3",
|
||||||
|
value: 3,
|
||||||
|
},{
|
||||||
|
label: "任务航线4",
|
||||||
|
value: 4,
|
||||||
|
}
|
||||||
|
]
|
||||||
|
const done = ()=>{
|
||||||
|
emit("routeDraw", routeParams.value)
|
||||||
|
}
|
||||||
|
const cancel = ()=>{
|
||||||
|
emit("cancelDraw")
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<n-modal :mask-closable="false" preset="dialog" >
|
||||||
|
<template #header>
|
||||||
|
<div>航线参数设定</div>
|
||||||
|
</template>
|
||||||
|
<div>
|
||||||
|
<n-space>
|
||||||
|
<n-form ref="formRef" :model="routeParams"
|
||||||
|
label-placement="left"
|
||||||
|
label-width="auto"
|
||||||
|
require-mark-placement="right-hanging">
|
||||||
|
<n-form-item label="是否闭合">
|
||||||
|
<n-switch v-model:value="routeParams.isClose">
|
||||||
|
<template #checked>
|
||||||
|
是
|
||||||
|
</template>
|
||||||
|
<template #unchecked>
|
||||||
|
否
|
||||||
|
</template>
|
||||||
|
</n-switch>
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item label="航线名称">
|
||||||
|
<n-select v-model:value="routeParams.code" :options="routeCode" />
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item label="航线高度/m">
|
||||||
|
<n-input-number v-model:value="routeParams.height" placeholder=500 :step="100" />
|
||||||
|
</n-form-item>
|
||||||
|
</n-form>
|
||||||
|
</n-space>
|
||||||
|
<n-space justify="center">
|
||||||
|
<n-button @click="done" type="primary" size="small">确定</n-button>
|
||||||
|
<n-button @click="cancel" type="warning" size="small">取消</n-button>
|
||||||
|
</n-space>
|
||||||
|
</div>
|
||||||
|
</n-modal>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue