From 7d9fb50b4e444ba3afec098ad031e93b4e9ee9ee Mon Sep 17 00:00:00 2001
From: GuLiMmo <2820890765@qq.com>
Date: Wed, 29 Nov 2023 10:20:26 +0800
Subject: [PATCH] 航线库修改/api打包后可修改
---
src/pages/page-web/projects/wayline.vue | 149 +++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 142 insertions(+), 7 deletions(-)
diff --git a/src/pages/page-web/projects/wayline.vue b/src/pages/page-web/projects/wayline.vue
index ce64863..8dad990 100644
--- a/src/pages/page-web/projects/wayline.vue
+++ b/src/pages/page-web/projects/wayline.vue
@@ -100,15 +100,19 @@
<span>返回上一页</span>
</div>
<li
- v-for="(position, index) in tragetPointArr"
+ v-for="(item, index) in tragetPointArr"
:key="index"
:class="{ selectedColor : index === selectedPoint }"
- @click="tragetPointClick(position, index)">
+ @click="tragetPointClick(item.position, index)">
<div class="graph">
<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">
+ <img :src="event.icon" alt="icon" />
+ </div>
+ </div>
</li>
</ul>
</a-spin>
@@ -132,7 +136,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 +175,69 @@
const { removeById, addClickEvent, getEntityById } = cesiumOperation()
const isPointListOpen = ref<boolean>(false)
-const tragetPointArr = ref<Cesium.Cartesian3[]>([])
+const tragetPointArr = ref<{
+ position: Cesium.Cartesian3,
+ eventList: string[]
+}[]>([])
const selectedPoint = ref<number | null>(null)
+
+// 对应事件
+const eventList: any = reactive<{
+ key: string,
+ name: 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: 'focus',
+ name: '对焦'
+ },
+ {
+ key: 'zoom',
+ name: '变焦',
+ icon: getResource('waylinetool/fd.png'),
+ },
+ {
+ key: 'customDirName',
+ name: '创建新文件夹',
+ icon: getResource('waylinetool/create-file.png'),
+ },
+ {
+ key: 'gimbalRotate',
+ name: '旋转云台'
+ },
+ {
+ key: 'rotateYaw',
+ name: '飞行器偏航'
+ },
+ {
+ key: 'hover',
+ name: '悬停等待',
+ icon: getResource('waylinetool/xt.png'),
+ },
+ {
+ key: 'gimbalEvenlyRotate',
+ name: '航段间均匀转动云台pitch角'
+ },
+ {
+ key: 'orientedShoot',
+ name: '精准复拍动作'
+ }
+])
onMounted(() => {
const parent = document.getElementsByClassName('scrollbar').item(0)?.parentNode as HTMLDivElement
@@ -253,6 +325,7 @@
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
})
@@ -302,9 +375,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,9 +396,13 @@
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', {
@@ -448,6 +529,47 @@
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
+ // 当前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) => {
+ action.includes(item.key) && eventArr.push(item)
+ })
+ })
+ tragetPointArr.value[index].eventList = eventArr
+ }
+ })
+ })
+}
+
const openEditModal = (wayline: any) => {
currentWayLine.value = wayline
editVisible.value = true
@@ -525,7 +647,20 @@
}
.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;
--
Gitblit v1.9.3