From d20068f8f1c0d1f7f4077c2fdd7d46e0f5216285 Mon Sep 17 00:00:00 2001
From: GuLiMmo <2820890765@qq.com>
Date: Mon, 04 Mar 2024 17:21:53 +0800
Subject: [PATCH] 航线绘制封装、kmz文件操作封装、航线编辑修改
---
src/pages/page-web/projects/components/route-edit/index.vue | 359 +++++------------------------------------------------------
1 files changed, 35 insertions(+), 324 deletions(-)
diff --git a/src/pages/page-web/projects/components/route-edit/index.vue b/src/pages/page-web/projects/components/route-edit/index.vue
index 0d6b76a..4a2ec48 100644
--- a/src/pages/page-web/projects/components/route-edit/index.vue
+++ b/src/pages/page-web/projects/components/route-edit/index.vue
@@ -7,6 +7,9 @@
</template>
返回
</a-button>
+ <div class="save-button">
+ <SaveOutlined />
+ </div>
<setting>
<template #show>
<a-button type="text" class="setting-btn">
@@ -60,16 +63,15 @@
</template>
<script setup lang="ts">
-import _, { divide } from 'lodash'
+import _ from 'lodash'
import * as Cesium from 'cesium'
import setting from './components/setting.vue'
import { ref, reactive, defineEmits, defineProps, watch, onMounted } from 'vue'
-import { ArrowLeftOutlined, CaretDownOutlined } from '@ant-design/icons-vue'
+import { ArrowLeftOutlined, CaretDownOutlined, SaveOutlined } from '@ant-design/icons-vue'
import { cesiumOperation } from '/@/hooks/use-cesium-tsa'
import { useMyStore } from '/@/store'
-import { analyzeKmzFile, getKmlParams } from '/@/utils/cesium/kmz'
import ImageTrailMaterial from '/@/utils/cesium/ImageTrailMaterial'
-import { getPolylineLength } from '/@/utils/cesium/mapUtils'
+import useMapDraw from '/@/utils/cesium/use-map-draw'
const store = useMyStore()
const { appContext }: any = getCurrentInstance()
const global = appContext.config.globalProperties
@@ -102,73 +104,14 @@
return new URL(`/src/assets/icons/${name}`, import.meta.url).href
}
+const ellipsoid = global.$viewer.scene.globe.ellipsoid
+
const emits = defineEmits(['backFn'])
const props = defineProps<{
- details: any
+ isCreateWayline: boolean
}>()
const filePath = computed(() => store.state.waylineTool.kmzPath)
-
-// 对应事件
-const eventList = reactive<eventParmas[]>([
- {
- key: 'takePhoto',
- name: '单拍',
- icon: getResource('waylinetool/camera.png'),
- },
- {
- key: 'startRecord',
- name: '开始录像',
- icon: getResource('waylinetool/camera-on.png'),
- },
- {
- key: 'stopRecord',
- name: '结束录像',
- icon: getResource('waylinetool/camera-off.png'),
- },
- {
- key: 'time',
- name: '开始等时间隔拍照',
- icon: getResource('waylinetool/shoot1.png'),
- },
- {
- key: 'distance',
- name: '开始等距间隔拍照',
- icon: getResource('waylinetool/shoot2.png'),
- },
- {
- key: 'zoom',
- name: '变焦',
- icon: getResource('waylinetool/fd.png'),
- },
- {
- key: 'customDirName',
- name: '创建新文件夹',
- icon: getResource('waylinetool/create-file.png'),
- },
- {
- key: 'gimbalRotate',
- distinguish: 'Yaw',
- name: '云台俯仰角',
- icon: getResource('waylinetool/holderyaw.png'),
- },
- {
- key: 'gimbalYawRotate',
- name: '云台偏航角',
- distinguish: 'pitch',
- icon: getResource('waylinetool/holdertilt.png'),
- },
- {
- key: 'rotateYaw',
- name: '飞行器偏航',
- icon: getResource('waylinetool/droneyaw.png'),
- },
- {
- key: 'hover',
- name: '悬停等待',
- icon: getResource('waylinetool/xt.png'),
- },
-])
const tragetPointArr = ref<tragetPoint[]>([])
@@ -179,83 +122,13 @@
let mouseRightClickEvent: any = null
-// 初始化KML，判断当中存在多少事件
-const initKML = () => {
- analyzeKmzFile(filePath.value).then((kmlRes) => {
- // 所有航点
- const points = getKmlParams(kmlRes, false, {
- name: 'Placemark',
- findRegx: '([\\s\\S]*?)',
- mode: 'g',
- })
- points?.forEach((point: string, index: number) => {
- // 当前点位事件
- const pointActions = getKmlParams(point, true, {
- name: 'actionGroup',
- findRegx: '([\\s\\S]*?)',
- mode: 'g',
- })
- const eventArr: eventParmas[] = []
- if (pointActions) {
- const actions =
- getKmlParams(pointActions[0], true, {
- name: 'action',
- findRegx: '([\\s\\S]*?)',
- mode: 'g',
- }) || []
- actions?.forEach((action) => {
- eventList.forEach((event: any) => {
- if (!event.distinguish) {
- action.includes(event.key) && eventArr.push(event)
- } else {
- const pitchAngle =
- getKmlParams(action, true, {
- name: 'gimbalPitchRotateAngle',
- findRegx: '([\\s\\S]*?)',
- }) || []
- const yawAngle =
- getKmlParams(action, true, {
- name: 'gimbalYawRotateAngle',
- findRegx: '([\\s\\S]*?)',
- }) || []
- if (!!Number(pitchAngle[1]) && event.distinguish === 'pitch') {
- eventArr.push(event)
- }
- if (!!Number(yawAngle[1]) && event.distinguish === 'yaw') {
- eventArr.push(event)
- }
- }
- })
- // 判断一共有多少个拍照模式
- const actionFunc = getKmlParams(point, true, {
- name: 'actionActuatorFunc',
- findRegx: 'takePhoto',
- mode: 'g',
- })
- if (actionFunc) {
- ;(waylineDetails[3] as any).value++
- }
- })
- tragetPointArr.value[index].eventList = eventArr
- }
- // 获取当前是否存在拍照模式
- const pointShootMode = getKmlParams(point, true, {
- name: 'shootType',
- findRegx: '([\\s\\S]*?)',
- mode: 'g',
- })
- if (pointShootMode) {
- pointShootMode.forEach((type: string) => {
- eventList.forEach((item: any) => {
- type.includes(item.key) && eventArr.push(item)
- })
- })
- }
- })
- })
-}
-
// 绘制地图上的东西
+let mapDraw = null
+// 航线详情
+const waylineDetails = ref<waylineDetails[]>([])
+// 样式
+const kmlEntities = ref<Cesium.Entity[]>([])
+
const initDrawRoute = () => {
const options = {
camera: global.$viewer.scene.camera,
@@ -269,193 +142,23 @@
.add(Cesium.KmlDataSource.load(filePath.value, options))
.then((res: any) => {
kmlDataSource = res
- createMapMarker(kmlDataSource)
- initKML()
+ mapDraw = useMapDraw(kmlDataSource, [], filePath.value, global)
+ const {
+ drawWayline,
+ waylineDetails: details,
+ waylinePointsEvent,
+ kmlEntities: entities,
+ } = mapDraw
+ drawWayline()
+ waylineDetails.value = details
+ tragetPointArr.value = waylinePointsEvent.value
+ kmlEntities.value = entities.value
+
if (!mouseRightClickEvent) {
// 添加右键事件
addMapPointEvent()
}
})
-}
-
-const kmlEntity = ref<any>([])
-const waylineDetails = reactive<
- {
- title: string
- value: string | number
- }[]
->([
- {
- title: '航线长度',
- value: '0',
- },
- {
- title: '预计执行时间',
- value: '0',
- },
- {
- title: '航点',
- value: 0,
- },
- {
- title: '照片',
- value: 0,
- },
-])
-// 样式
-const kmlEntities = ref<Cesium.Entity[]>([])
-const ellipsoid = global.$viewer.scene.globe.ellipsoid
-const createMapMarker = async (
- dataSource:
- | {
- entities: { values: { _children: any }[] }
- show: boolean
- }
- | any,
- entitiesList: Cesium.Entity[] = [],
-) => {
- dataSource.show = false
- let kmlEntityArr = [...entitiesList]
- // kmlEntity.value = dataSource.entities.values
- if (dataSource) {
- kmlEntityArr = dataSource.entities.values[0]._children
- kmlEntities.value = kmlEntityArr
- }
- const cartesianArr: any[] = []
- let btmStartPoint = null
- // 获取所有的点位
- const kmlRes = await analyzeKmzFile(filePath.value)
- // 所有航点
- const points: string[] | any = getKmlParams(kmlRes, false, {
- name: 'Placemark',
- findRegx: '([\\s\\S]*?)',
- mode: 'g',
- })
- // 获取当前航线全局速度
- const getGlobalSpeed: any = getKmlParams(kmlRes, true, {
- name: 'autoFlightSpeed',
- findRegx: '([\\s\\S]*?)',
- })
- const speed = Number(getGlobalSpeed[1])
- // 修改点位样式信息等
- for (let i = 0; i < kmlEntityArr.length; i++) {
- const entity: any = kmlEntityArr[i]
- // 将cartographic3D坐标转换为正常坐标
- const c3Position = entity.position._value
- const c2Postion = ellipsoid.cartesianToCartographic(c3Position)
- const longitude = Cesium.Math.toDegrees(c2Postion.longitude)
- const latitude = Cesium.Math.toDegrees(c2Postion.latitude)
- // 获取当前航点中的值
- const point = points[i]
- const getPointHeight: any = getKmlParams(point, true, {
- name: 'ellipsoidHeight',
- findRegx: '([\\s\\S]*?)',
- })
- const getHaeHeight: any = getKmlParams(point, true, {
- name: 'height',
- findRegx: '([\\s\\S]*?)',
- })
- const AslHeight = Number(getPointHeight[1])
- const HeaHeight = Number(getHaeHeight[1])
- entity.position = Cesium.Cartesian3.fromDegrees(
- longitude,
- latitude,
- AslHeight,
- )
- if (i === 0) {
- btmStartPoint = Cesium.Cartesian3.fromDegrees(longitude, latitude, 0)
- }
- // 创建广告牌信息
- const billboard = createBillboard(`${i + 1}`, '#61d396')
- // 修改id
- entity._id = 'tragetPoint' + i
- // 修改广告牌样式
- entity.billboard = new Cesium.BillboardGraphics({
- image: billboard,
- pixelOffset: new Cesium.Cartesian2(0, -20),
- })
- entity.label = new Cesium.LabelGraphics({
- text: `ASL：${Math.round(AslHeight)}m\nHAE：${Math.round(HeaHeight)}m`,
- font: '13px monospace',
- showBackground: true,
- horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
- verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
- disableDepthTestDistance: Number.POSITIVE_INFINITY,
- pixelOffset: new Cesium.Cartesian2(0, -40),
- })
- // 修改点的信息
- entity.point = new Cesium.PointGraphics({
- pixelSize: 20,
- color: Cesium.Color.GHOSTWHITE,
- outlineColor: Cesium.Color.BLACK,
- })
- // 创建虚线
- addPolyline({
- id: 'dashLine' + i,
- polyline: {
- positions: Cesium.Cartesian3.fromDegreesArrayHeights([
- longitude,
- latitude,
- AslHeight,
- longitude,
- latitude,
- 0,
- ]),
- width: 1,
- material: new Cesium.PolylineDashMaterialProperty({
- color: Cesium.Color.WHITE,
- }),
- },
- })
- // 获取虚线中心点
- cartesianArr.push(entity.position._value)
- tragetPointArr.value[i] = {
- position: entity.position._value,
- eventList: [],
- }
- }
- // 创建起飞位置
- global.$viewer.entities.add({
- id: 'dronePosition',
- position: btmStartPoint,
- billboard: {
- image: getResource('dock.png'),
- width: 36,
- height: 36,
- },
- })
- // 绘制链接线
- addPolyline({
- id: 'entityLine',
- polyline: {
- positions: [btmStartPoint, ...cartesianArr],
- width: 7,
- material: new ImageTrailMaterial({
- backgroundColor: Cesium.Color.fromBytes(96, 210, 149),
- image: getResource('arrow-right.png'),
- imageW: 7,
- duration: 0,
- animation: false,
- }),
- clampToGround: false, // 关闭贴地效果，保留高度
- },
- })
- dataSource.show = true
- const lineEntity = getEntityById('entityLine')
- // 获取距离
- const polylineLength: any = getPolylineLength(lineEntity).toFixed(1) || 0
- waylineDetails[0].value = polylineLength + 'm'
- // 航点数
- waylineDetails[2].value = cartesianArr.length
- // 计算时间
- const sportTime = polylineLength / speed
- // 判断有没有超过一分钟
- const time = sportTime / 60
- waylineDetails[1].value =
- Math.trunc(time) + ' m ' + Math.round((time % 1) * 60) + ' s'
- global.$viewer.flyTo(lineEntity, {
- offset: new Cesium.HeadingPitchRange(0, -90, 300),
- })
}
// const createPointOrPolyline = () => {}
@@ -759,6 +462,14 @@
.ant-btn {
color: #fff;
}
+ .save-button {
+ font-size: 20px;
+ margin: 0 10px 0 auto;
+ cursor: pointer;
+ &:hover {
+ color: #409eff;
+ }
+ }
.setting-btn {
background-color: #3c3c3c;
margin-right: 10px;
--
Gitblit v1.9.3