From d63e1aaf1d33925b534e5fc9a708160cd13c0874 Mon Sep 17 00:00:00 2001
From: GuLiMmo <2820890765@qq.com>
Date: Fri, 01 Dec 2023 14:34:37 +0800
Subject: [PATCH] 航线点位事件编辑修改
---
src/pages/page-web/projects/wayline.vue | 23 +++++
src/components/waylinetool/index.vue | 193 ++++++++++++++++++++++++++++++++---------------
2 files changed, 152 insertions(+), 64 deletions(-)
diff --git a/src/components/waylinetool/index.vue b/src/components/waylinetool/index.vue
index fe91a10..f8eed9e 100644
--- a/src/components/waylinetool/index.vue
+++ b/src/components/waylinetool/index.vue
@@ -31,6 +31,7 @@
CloseOutlined,
CheckOutlined
} from '@ant-design/icons-vue'
+import { Item } from 'ant-design-vue/lib/menu'
// 初始化jszip
const JsZip = new JSZIP()
@@ -84,33 +85,33 @@
})
}
},
- // {
- // key: '',
- // icon: getResource('waylinetool/shoot1.png'),
- // title: '开始等时间隔拍照',
- // event: (obj: sBtn) => {
- // obj.selected = !obj.selected
- // editKmlFile()
- // }
- // },
- // {
- // key: 'shootType',
- // icon: getResource('waylinetool/shoot2.png'),
- // title: '开始等距间隔拍照',
- // event: (obj: sBtn) => {
- // obj.selected = !obj.selected
- // editKmlFile()
- // }
- // },
- // {
- // key: '',
- // icon: getResource('waylinetool/shoot3.png'),
- // title: '结束间隔拍照',
- // event: (obj: sBtn) => {
- // obj.selected = !obj.selected
- // editKmlFile()
- // }
- // },
+ {
+ key: 'time',
+ icon: getResource('waylinetool/shoot1.png'),
+ title: '开始等时间隔拍照',
+ event: (obj: sBtn) => {
+ obj.selected = !obj.selected
+ editKmlFile('time')
+ }
+ },
+ {
+ key: 'distance',
+ icon: getResource('waylinetool/shoot2.png'),
+ title: '开始等距间隔拍照',
+ event: (obj: sBtn) => {
+ obj.selected = !obj.selected
+ editKmlFile('distance')
+ }
+ },
+ {
+ key: 'deleteShootType',
+ icon: getResource('waylinetool/shoot3.png'),
+ title: '结束间隔拍照',
+ event: (obj: sBtn) => {
+ obj.selected = !obj.selected
+ editKmlFile('deleteShootType')
+ }
+ },
{
key: 'hover',
icon: getResource('waylinetool/xt.png'),
@@ -144,38 +145,41 @@
payloadPositionIndex: 0,
gimbalHeadingYawBase: 'north',
gimbalRotateMode: 'relativeAngle',
+ // 上下摆动 pitch xyz中心点为基准
gimbalPitchRotateEnable: 0,
- gimbalPitchRotateAngle: 0.4,
+ gimbalPitchRotateAngle: 0,
+ // 摆动 roll 已x位基准
gimbalRollRotateEnable: 0,
- gimbalRollRotateAngle: 0.4,
- gimbalYawRotateEnable: 0,
- gimbalYawRotateAngle: 0.4,
+ gimbalRollRotateAngle: 0,
+ // 左右摆动 yaw xyz中心点为基准
+ gimbalYawRotateEnable: 1,
+ gimbalYawRotateAngle: 30.1,
gimbalRotateTimeEnable: 0,
- gimbalRotateTime: 5
+ gimbalRotateTime: 3
})
}
},
- // {
- // key: '',
- // icon: getResource('waylinetool/holdertilt.png'),
- // title: '云台俯仰角',
- // event: (obj: sBtn) => {
- // obj.selected = !obj.selected
- // editKmlFile('gimbalRotate', {
- // payloadPositionIndex: 0,
- // gimbalHeadingYawBase: 'north',
- // gimbalRotateMode: 'relativeAngle',
- // gimbalPitchRotateEnable: 0,
- // gimbalPitchRotateAngle: 0.4,
- // gimbalRollRotateEnable: 0,
- // gimbalRollRotateAngle: 0.4,
- // gimbalYawRotateEnable: 0,
- // gimbalYawRotateAngle: 0.4,
- // gimbalRotateTimeEnable: 0,
- // gimbalRotateTime: 5
- // })
- // }
- // },
+ {
+ key: 'gimbalRotate',
+ icon: getResource('waylinetool/holdertilt.png'),
+ title: '云台俯仰角',
+ event: (obj: sBtn) => {
+ obj.selected = !obj.selected
+ editKmlFile('gimbalRotate', {
+ payloadPositionIndex: 0,
+ gimbalHeadingYawBase: 'north',
+ gimbalRotateMode: 'relativeAngle',
+ gimbalPitchRotateEnable: 1,
+ gimbalPitchRotateAngle: 31.1,
+ gimbalRollRotateEnable: 0,
+ gimbalRollRotateAngle: 0,
+ gimbalYawRotateEnable: 0,
+ gimbalYawRotateAngle: 0,
+ gimbalRotateTimeEnable: 0,
+ gimbalRotateTime: 3
+ })
+ }
+ },
{
key: 'takePhoto',
icon: getResource('waylinetool/camera.png'),
@@ -220,6 +224,11 @@
return store.state.waylineTool
})
+/**
+ * @description: 读取kmz文件转blob
+ * @param {*} kmzPath 文件地址
+ * @return {*} void
+ */
const readKmzFile = (kmzPath: string) => {
// return axios.get(kmzPath, { responseType: 'arraybuffer' })
return axios({
@@ -264,6 +273,10 @@
const funcRegx = /<wpml:actionActuatorFunc>([\s\S]*?)<\/wpml:actionActuatorFunc>/g
const funcs = (points[currentPosition.value] || '').match(funcRegx)
const funcNameRegx = /<wpml:actionActuatorFunc>(.*?)<\/wpml:actionActuatorFunc>/
+
+ const shootTypeRegx = /<wpml:shootType>([\s\S]*?)<\/wpml:shootType>/g
+ const shootType = (points[currentPosition.value] || '').match(shootTypeRegx)
+ const shootTypeValueRegx = /<wpml:shootType>(.*?)<\/wpml:shootType>/
btnList.value.forEach(sBtn => {
funcs?.forEach((func: string) => {
const funcName = func.match(funcNameRegx) || []
@@ -271,11 +284,23 @@
sBtn.selected = true
}
})
+ shootType?.forEach((shootType: string) => {
+ const typeValue = shootType.match(shootTypeValueRegx) || []
+ if (typeValue[1] === sBtn.key) {
+ sBtn.selected = true
+ }
+ })
})
})
}
-// 创建kml模版
+/**
+ * @description: 创建kml模版
+ * @param {*} actionId 事件id(唯一)
+ * @param {*} actionType 事件类型
+ * @param {*} param 事件参数
+ * @return {*} void
+ */
const createActionKML = (actionId: string, actionType: string, param: any) => {
let paramKML = ''
Object.keys(param).forEach((key: string) => {
@@ -295,8 +320,13 @@
return template
}
-// 修改template.kml文件
-const editKmlFile = (eventType: string, eventParam: any) => {
+/**
+ * @description: 修改template.kml文件
+ * @param {*} eventType 事件类型
+ * @param {*} eventParam 事件参数
+ * @return {*} void
+ */
+const editKmlFile = (eventType: string, eventParam?: any) => {
// kmzZip文件处理
const kmlFile = kmzFileZip.value.file(/\.kml$/i)[0]
kmlFile.async('text').then((kmlText: string) => {
@@ -305,6 +335,49 @@
// 当前要修改的字段
// const curSelected: string | any = points?.find(item => item.includes(currentPosition.value.join(',')))
const curSelected: string | any = points[currentPosition.value]
+ // 判断是不是间隔拍照任务
+ if (eventType === 'time' || eventType === 'distance' || eventType === 'deleteShootType') {
+ // 判断当前选中的点是否存在shootType
+ const shootTypeRegx = /<wpml:shootType>([\s\S]*?)<\/wpml:shootType>/g
+ const kmlResult: string[] = curSelected.match(shootTypeRegx) || []
+ const shootTypeKML = kmlResult[0]
+ let replacedKML = ''
+ // 判断是不是结束间隔拍照任务
+ if (eventType === 'deleteShootType') {
+ if (!shootTypeKML) {
+ message.warning('暂未设置间隔任务，无法结束！！')
+ } else {
+ replacedKML = curSelected.replace(shootTypeRegx, '')
+ }
+ } else {
+ // 判断是否已经设置间隔拍照任务
+ if (shootTypeKML) {
+ replacedKML = curSelected.replace(shootTypeRegx, `<wpml:shootType>${eventType}</wpml:shootType>`)
+ } else {
+ // 判断是否存在actionGroup
+ const index = curSelected.indexOf('<wpml:actionGroup>')
+ if (index === -1) {
+ const placeMarkIdx = curSelected.indexOf('</Placemark>')
+ replacedKML = curSelected.slice(0, placeMarkIdx) + `<wpml:shootType>${eventType}</wpml:shootType>` + curSelected.slice(placeMarkIdx)
+ } else {
+ replacedKML = curSelected.slice(0, index) + `<wpml:shootType>${eventType}</wpml:shootType>` + curSelected.slice(index)
+ }
+ }
+ }
+ // 将另外两个间隔任务按钮高亮取消
+ btnList.value.forEach((sBtn: sBtn) => {
+ if (sBtn.key === 'time' || sBtn.key === 'distance' || sBtn.key === 'deleteShootType') {
+ if (sBtn.key !== eventType) {
+ sBtn.selected = false
+ }
+ }
+ })
+ // 替换原本KML
+ const replacedTemplateKML = kmlText.replace(curSelected, replacedKML)
+ JsZip.file('wpmz/template.kml', replacedTemplateKML)
+ kmzFileZip.value.file('wpmz/template.kml', replacedTemplateKML)
+ return
+ }
// 查找actionGroup
const actionGroupReg = /<wpml:actionGroup>([\s\S]*?)<\/wpml:actionGroup>/g
const actionGroup = curSelected.match(actionGroupReg) ? curSelected.match(actionGroupReg)[0] : ''
@@ -336,19 +409,13 @@
replacedActionsKML = curSelected.slice(0, index) + actionGroupKML + curSelected.slice(index)
} else {
// 替换原有的action
- // replacedActionsKML = curSelected.replace(actionReg, actions.join(''))
replacedActionsKML = curSelected.replace(actionGroupReg, actionGroupKML)
}
// Placemark代替
const replacedTemplateKML = kmlText.replace(curSelected, replacedActionsKML)
- // 转成unit8格式
- // const textEncoder = new TextEncoder()
- // const uint8Array = textEncoder.encode(replacedTemplateKML)
+
JsZip.file('wpmz/template.kml', replacedTemplateKML)
kmzFileZip.value.file('wpmz/template.kml', replacedTemplateKML)
- // JsZip.generateAsync({ type: 'blob' }).then(content => {
- // saveAs(content, curKmzName.value)
- // })
})
}
diff --git a/src/pages/page-web/projects/wayline.vue b/src/pages/page-web/projects/wayline.vue
index c6e07ed..49fd1f3 100644
--- a/src/pages/page-web/projects/wayline.vue
+++ b/src/pages/page-web/projects/wayline.vue
@@ -187,7 +187,7 @@
const selectedPoint = ref<number | null>(null)
// 对应事件
-const eventList: any = reactive<{
+const eventList = reactive<{
key: string,
name: string,
icon?: string
@@ -206,6 +206,16 @@
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',
@@ -550,6 +560,8 @@
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
// 当前kmz文件航点
const kmlPoints = kml.match(regx)
kmlPoints?.forEach((point: string, index: number) => {
@@ -566,6 +578,15 @@
})
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)
+ })
+ })
+ }
})
})
}
--
Gitblit v1.9.3