From c7c9de0214cb1e6ad3d29c8a3a0c7a8ea31fbaaa Mon Sep 17 00:00:00 2001
From: GuLiMmo <2820890765@qq.com>
Date: Tue, 05 Dec 2023 15:37:13 +0800
Subject: [PATCH] 航线点位事件编辑完善
---
src/pages/page-web/projects/wayline.vue | 219 ++++++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 203 insertions(+), 16 deletions(-)
diff --git a/src/pages/page-web/projects/wayline.vue b/src/pages/page-web/projects/wayline.vue
index ce64863..f6ce2e6 100644
--- a/src/pages/page-web/projects/wayline.vue
+++ b/src/pages/page-web/projects/wayline.vue
@@ -99,16 +99,22 @@
<ArrowLeftOutlined />
<span>返回上一页</span>
</div>
- <li
- v-for="(position, index) in tragetPointArr"
- :key="index"
- :class="{ selectedColor : index === selectedPoint }"
- @click="tragetPointClick(position, index)">
+ <li v-for="(item, index) in tragetPointArr" :key="index" :class="{ selectedColor: index === selectedPoint }"
+ @click="tragetPointClick(item.position, index)">
<div class="graph">
- <div class="left" :style="{borderTopColor: index === selectedPoint ? '#FF9900' : '#2D8CF0'}"></div>
+ <div class="left" :style="{ borderTopColor: index === selectedPoint ? '#FF9900' : '#2D8CF0' }"></div>
<div class="right">{{ index + 1 }}</div>
</div>
- <div class="graph-right"></div>
+ <div class="graph-right">
+ <div v-for="(event, index) in item.eventList" :key="index" class="s-event-icon">
+ <a-tooltip placement="top">
+ <template #title>
+ {{ event.name }}
+ </template>
+ <img :src="event.icon" alt="icon" />
+ </a-tooltip>
+ </div>
+ </div>
</li>
</ul>
</a-spin>
@@ -132,7 +138,14 @@
import { getRoot } from '/@/root'
import * as Cesium from 'cesium'
import { cesiumOperation } from '/@/hooks/use-cesium-tsa'
-import { stat } from 'fs'
+import axios from 'axios'
+import JSZIP from 'jszip'
+// 初始化jszip
+const JsZip = new JSZIP()
+
+const getResource = (name: string) => {
+ return new URL(`/src/assets/icons/${name}`, import.meta.url).href
+}
const projectWayLine = ref<HTMLDivElement>()
@@ -164,8 +177,77 @@
const { removeById, addClickEvent, getEntityById } = cesiumOperation()
const isPointListOpen = ref<boolean>(false)
-const tragetPointArr = ref<Cesium.Cartesian3[]>([])
+const tragetPointArr = ref<{
+ position: Cesium.Cartesian3,
+ eventList: any[]
+}[]>([])
const selectedPoint = ref<number | null>(null)
+
+// 对应事件
+const eventList = reactive<{
+ key: string,
+ name: string,
+ distinguish?: string,
+ icon?: string
+}[]>([
+ {
+ 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'),
+ }
+])
onMounted(() => {
const parent = document.getElementsByClassName('scrollbar').item(0)?.parentNode as HTMLDivElement
@@ -183,6 +265,7 @@
}, 1000)
console.log(workspaceId.value)
})
+
onUnmounted(() => {
if (kmlDataSource) {
global.$viewer.dataSources.remove(kmlDataSource)
@@ -191,7 +274,8 @@
removeById('clickBox')
store.commit('SET_WAYLINE_INFO', {
isShow: false,
- wayline: {}
+ wayline: {},
+ position: null,
})
})
@@ -253,13 +337,15 @@
getWayLineFile(workspaceId.value, wayline.id).then(res => {
store.commit('SET_SELECT_WAYLINE_INFO', wayline)
initKmlFile(res.data)
+ store.commit('SET_WAYLINE_KMZPATH', res.data)
}).finally(() => {
loading.value = false
})
// 清除选中点柱形和隐藏按钮
store.commit('SET_WAYLINE_INFO', {
isShow: false,
- wayline: {}
+ wayline: {},
+ position: null
})
removeById('clickBox')
isPointListOpen.value = !isPointListOpen.value
@@ -269,6 +355,8 @@
* @param file
*/
function initKmlFile (file: string) {
+ const [, address] = file.split('cloud-bucket')
+ file = import.meta.env.VITE_MEDIAPANEL_API_URL + address
removeById('kmzLine')
const options = {
camera: global.$viewer.scene.camera,
@@ -302,9 +390,13 @@
outlineColor: Cesium.Color.BLACK,
})
cartesianArr.push(entity.position._value)
+ tragetPointArr.value[i] = {
+ position: entity.position._value,
+ eventList: []
+ }
}
- tragetPointArr.value = cartesianArr
- const stripe = createStripe()
+ // tragetPointArr.value = cartesianArr
+ // const stripe = createStripe()
const lineEntity = global.$viewer.entities.add({
name: 'entityLine',
id: 'kmzLine',
@@ -319,14 +411,19 @@
global.$viewer.flyTo(lineEntity, {
offset: new Cesium.HeadingPitchRange(0, -90, 8000)
})
+
+ // 解析kmz文件
+ readKmzFile(file)
})
}
+// 点击目标点
function tragetPointClick (position: Cesium.Cartesian3, index: number) {
selectedPoint.value = index
store.commit('SET_WAYLINE_INFO', {
isShow: true,
- wayline: currentWayLine
+ wayline: currentWayLine,
+ position: index
})
if (getEntityById('clickBox')) {
removeById('clickBox')
@@ -349,6 +446,7 @@
heightReference: true
}
}
+
const boxEntity = global.$viewer.entities.add(entity)
global.$viewer.flyTo(boxEntity, {
duration: 3,
@@ -448,6 +546,72 @@
return stripe
}
+/**
+ * @description: 获取kmz文件中的内容
+ * @param {*} kmzPath kmz文件地址
+ * @return {*} void
+ */
+const readKmzFile = (kmzPath: string) => {
+ // 使用axios读取文件
+ return axios.get(kmzPath, { responseType: 'arraybuffer' })
+ .then(fileRes => fileRes.data)
+ .then(kmzData => JsZip.loadAsync(kmzData)) // 解压kmz文件
+ .then(kmzZip => {
+ // 通过文件名找到 KML 文件
+ const kmlFile = kmzZip.file(/\.kml$/i)[0]
+ return kmlFile.async('text')
+ }).then(kml => {
+ // 查找航点标签reg
+ const regx = /<Placemark>([\s\S]*?)<\/Placemark>/g
+ // 查找事件组reg
+ const actionGroupReg = /<wpml:actionGroup>([\s\S]*?)<\/wpml:actionGroup>/g
+ // 查找单个事件reg
+ const actionRegx = /<wpml:action>([\s\S]*?)<\/wpml:action>/g
+ // 获取shootType
+ const shootTypeRegx = /<wpml:shootType>([\s\S]*?)<\/wpml:shootType>/g
+ // 云台角度
+ const gimbalPitchRotateAngleRegx = /<wpml:gimbalPitchRotateAngle>(.*?)<\/wpml:gimbalPitchRotateAngle>/
+ const gimbalYawRotateAngleRegx = /<wpml:gimbalYawRotateAngle>(.*?)<\/wpml:gimbalYawRotateAngle>/
+ // 当前kmz文件航点
+ const kmlPoints = kml.match(regx)
+ kmlPoints?.forEach((point: string, index: number) => {
+ // 当前点的事件组
+ const ponitAction = point.match(actionGroupReg)
+ const eventArr: string[] = []
+ if (ponitAction) {
+ // 当前事件
+ const actions = ponitAction[0].match(actionRegx)
+ actions?.forEach(action => {
+ eventList.forEach((item: any) => {
+ if (!item.distinguish) {
+ action.includes(item.key) && eventArr.push(item)
+ } else {
+ const pitchAngle = action?.match(gimbalPitchRotateAngleRegx) || []
+ const yawAngle = action?.match(gimbalYawRotateAngleRegx) || []
+ if (!!Number(pitchAngle[1]) && item.distinguish === 'pitch') {
+ eventArr.push(item)
+ }
+ if (!!Number(yawAngle[1]) && item.distinguish === 'yaw') {
+ eventArr.push(item)
+ }
+ }
+ })
+ })
+ tragetPointArr.value[index].eventList = eventArr
+ }
+ // 获取当前是否存在拍照模式
+ const pointShootTypeKML = point.match(shootTypeRegx)
+ if (pointShootTypeKML) {
+ pointShootTypeKML.forEach((type: string) => {
+ eventList.forEach((item: any) => {
+ type.includes(item.key) && eventArr.push(item)
+ })
+ })
+ }
+ })
+ })
+}
+
const openEditModal = (wayline: any) => {
currentWayLine.value = wayline
editVisible.value = true
@@ -492,26 +656,32 @@
padding: 0;
margin: 0;
list-style-type: none;
+
.back-btn {
cursor: pointer;
padding: 10px;
border-bottom: 1px solid #4f4f4f;
+
span {
margin-left: 10px;
}
+
&:hover {
color: #2d8cf0;
}
}
+
li {
cursor: pointer;
padding: 10px 0;
margin: 0 7px;
display: flex;
+
.graph {
width: 40px;
display: flex;
align-items: center;
+
.left {
width: 0;
height: 0;
@@ -519,14 +689,32 @@
border-right: 10px solid transparent;
border-left: 10px solid transparent;
}
+
.right {
margin-left: 3px;
}
}
+
.graph-right {
width: calc(100% - 40px);
+ height: 30px;
border-bottom: 1px solid #4f4f4f;
+ display: flex;
+ align-items: center;
+
+ .s-event-icon {
+ width: 25px;
+ height: 25px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ img {
+ width: 70%;
+ }
+ }
}
+
&:hover {
background-color: #3C3C3C;
}
@@ -578,5 +766,4 @@
.selectedColor {
background-color: #3C3C3C;
-}
-</style>
+}</style>
--
Gitblit v1.9.3