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 | 104 +++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 78 insertions(+), 26 deletions(-)
diff --git a/src/pages/page-web/projects/wayline.vue b/src/pages/page-web/projects/wayline.vue
index 8dad990..f6ce2e6 100644
--- a/src/pages/page-web/projects/wayline.vue
+++ b/src/pages/page-web/projects/wayline.vue
@@ -99,18 +99,20 @@
<ArrowLeftOutlined />
<span>返回上一页</span>
</div>
- <li
- v-for="(item, index) in tragetPointArr"
- :key="index"
- :class="{ selectedColor : index === selectedPoint }"
+ <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 v-for="(event, index) in item.eventList" :key="index" class="s-event-icon">
- <img :src="event.icon" alt="icon" />
+ <a-tooltip placement="top">
+ <template #title>
+ {{ event.name }}
+ </template>
+ <img :src="event.icon" alt="icon" />
+ </a-tooltip>
</div>
</div>
</li>
@@ -177,14 +179,15 @@
const isPointListOpen = ref<boolean>(false)
const tragetPointArr = ref<{
position: Cesium.Cartesian3,
- eventList: string[]
+ eventList: any[]
}[]>([])
const selectedPoint = ref<number | null>(null)
// 对应事件
-const eventList: any = reactive<{
+const eventList = reactive<{
key: string,
name: string,
+ distinguish?: string,
icon?: string
}[]>([
{
@@ -203,8 +206,14 @@
icon: getResource('waylinetool/camera-off.png'),
},
{
- key: 'focus',
- name: '对焦'
+ key: 'time',
+ name: '开始等时间隔拍照',
+ icon: getResource('waylinetool/shoot1.png'),
+ },
+ {
+ key: 'distance',
+ name: '开始等距间隔拍照',
+ icon: getResource('waylinetool/shoot2.png'),
},
{
key: 'zoom',
@@ -218,24 +227,25 @@
},
{
key: 'gimbalRotate',
- name: '旋转云台'
+ distinguish: 'Yaw',
+ name: '云台俯仰角',
+ icon: getResource('waylinetool/holderyaw.png'),
+ },
+ {
+ key: 'gimbalYawRotate',
+ name: '云台偏航角',
+ distinguish: 'pitch',
+ icon: getResource('waylinetool/holdertilt.png'),
},
{
key: 'rotateYaw',
- name: '飞行器偏航'
+ name: '飞行器偏航',
+ icon: getResource('waylinetool/droneyaw.png'),
},
{
key: 'hover',
name: '悬停等待',
icon: getResource('waylinetool/xt.png'),
- },
- {
- key: 'gimbalEvenlyRotate',
- name: '航段间均匀转动云台pitch角'
- },
- {
- key: 'orientedShoot',
- name: '精准复拍动作'
}
])
@@ -255,6 +265,7 @@
}, 1000)
console.log(workspaceId.value)
})
+
onUnmounted(() => {
if (kmlDataSource) {
global.$viewer.dataSources.remove(kmlDataSource)
@@ -263,7 +274,8 @@
removeById('clickBox')
store.commit('SET_WAYLINE_INFO', {
isShow: false,
- wayline: {}
+ wayline: {},
+ position: null,
})
})
@@ -332,7 +344,8 @@
// 清除选中点柱形和隐藏按钮
store.commit('SET_WAYLINE_INFO', {
isShow: false,
- wayline: {}
+ wayline: {},
+ position: null
})
removeById('clickBox')
isPointListOpen.value = !isPointListOpen.value
@@ -342,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,
@@ -407,7 +422,8 @@
selectedPoint.value = index
store.commit('SET_WAYLINE_INFO', {
isShow: true,
- wayline: currentWayLine
+ wayline: currentWayLine,
+ position: index
})
if (getEntityById('clickBox')) {
removeById('clickBox')
@@ -430,6 +446,7 @@
heightReference: true
}
}
+
const boxEntity = global.$viewer.entities.add(entity)
global.$viewer.flyTo(boxEntity, {
duration: 3,
@@ -550,6 +567,11 @@
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) => {
@@ -561,10 +583,30 @@
const actions = ponitAction[0].match(actionRegx)
actions?.forEach(action => {
eventList.forEach((item: any) => {
- action.includes(item.key) && eventArr.push(item)
+ 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)
+ })
+ })
}
})
})
@@ -614,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;
@@ -641,27 +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;
}
@@ -713,5 +766,4 @@
.selectedColor {
background-color: #3C3C3C;
-}
-</style>
+}</style>
--
Gitblit v1.9.3