From aec00ecc093be803860c8675cbe1c4c776a7cb4e Mon Sep 17 00:00:00 2001
From: GuLiMmo <2820890765@qq.com>
Date: Tue, 19 Mar 2024 17:49:21 +0800
Subject: [PATCH] update： 新建航线、事件编辑、kmz文件问题修改
---
src/components/waylinetool/index.vue | 686 +++++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 568 insertions(+), 118 deletions(-)
diff --git a/src/components/waylinetool/index.vue b/src/components/waylinetool/index.vue
index fe91a10..74e1c71 100644
--- a/src/components/waylinetool/index.vue
+++ b/src/components/waylinetool/index.vue
@@ -1,11 +1,35 @@
<template>
<ul class="btn-list" v-if="waylineAbout.isShow">
+ <!-- 参数按钮 -->
<li class="s-btn" v-for="(item, index) in btnList" :key="index">
<div class="title">{{ item.title }}</div>
- <div class="btn" @click="item.event(item)" :style="{ backgroundColor: item.selected ? '#2D8CF0' : '#323131' }">
- <img :src="item.icon" alt="icon">
- </div>
+ <a-popover placement="leftTop" trigger="click" arrow-point-at-center class="param-popover">
+ <template #title>
+ <span>{{ item.title }}</span>
+ </template>
+ <template #content>
+ <div class="popover-content">
+ <div v-for="sParam in item.param" :key="sParam.key" class="content-box">
+ <div>{{ sParam.title }}</div>
+ <a-input v-model:value="sParam.value" placeholder="请输入参数" v-if="!sParam.isRadio" />
+ <a-radio-group :options="sParam.options" v-model:value="sParam.value" v-else />
+ <div class="annotation" v-if="sParam.annotation">
+ 注：{{ sParam.annotation }}
+ </div>
+ </div>
+ <div class="btn-tool">
+ <a-button @click="resetParamSetting(item)">重置</a-button>
+ <a-button type="primary" @click="item.event(item)">确定</a-button>
+ </div>
+ </div>
+ </template>
+ <div class="btn" @click="() => saveInitPopoverParam(item.param)"
+ :style="{ backgroundColor: item.selected ? '#2D8CF0' : '#323131' }">
+ <img :src="item.icon" alt="icon">
+ </div>
+ </a-popover>
</li>
+ <!-- 确认和取消按钮 -->
<li class="s-btn">
<div class="title">取消编辑</div>
<div class="btn cancel-edit" @click="cencalEdit">
@@ -27,6 +51,7 @@
import JSZIP from 'jszip'
import { saveAs } from 'file-saver'
import { message } from 'ant-design-vue'
+import { cloneDeep } from 'lodash'
import {
CloseOutlined,
CheckOutlined
@@ -36,15 +61,31 @@
const store = useMyStore()
+const prefix = import.meta.env.VITE_MEDIAPANEL_API_URL
+
const getResource = (name: string) => {
return new URL(`/src/assets/icons/${name}`, import.meta.url).href
}
-// 点位按钮list
+interface popoverParamType {
+ title: string,
+ key: string,
+ isRadio?: boolean,
+ annotation?: string,
+ options?: {
+ label: string,
+ value: string
+ }[],
+ value: string
+}
+
+// 点击按钮list
interface sBtn {
key: string,
icon: string,
title: string,
+ distinguish?: string,
+ param: popoverParamType[],
event: Function,
selected?: boolean
}
@@ -56,162 +97,412 @@
const curKmzName = ref<string>('')
// 当前kmzpath
const curKmzPath = ref<string>('')
+// popover初始参数
+const initPopoverParam = ref<popoverParamType[]>([])
const btnList = ref<sBtn[]>([
+ // 开始录像
{
key: 'startRecord',
icon: getResource('waylinetool/camera-on.png'),
title: '开始录像',
+ param: [
+ {
+ title: '负载挂载位置',
+ key: 'payloadPositionIndex',
+ isRadio: true,
+ options: [
+ { label: '飞行器1号挂载位置', value: '0' },
+ { label: '飞行器2号挂载位置', value: '1' },
+ { label: '飞行器3号挂载位置', value: '2' },
+ ],
+ annotation: '飞行器1号挂载位置。M300 RTK，M350 RTK机型，对应机身左前方。其它机型，对应主云台。飞行器2号挂载位置。M300 RTK，M350 RTK机型，对应机身右前方。飞行器3号挂载位置。M300 RTK，M350 RTK机型，对应机身上方。',
+ value: ''
+ },
+ {
+ title: '拍摄照片文件后缀',
+ key: 'fileSuffix',
+ annotation: '为生成媒体文件命名时将额外附带该后缀',
+ value: ''
+ },
+ {
+ title: '拍摄照片存储类型',
+ key: 'payloadLensIndex',
+ isRadio: true,
+ options: [
+ { label: '存储变焦镜头拍摄照片', value: 'zoom' },
+ { label: '存储广角镜头拍摄照片', value: 'wide' },
+ { label: '存储红外镜头拍摄照片', value: 'ir' },
+ { label: '存储窄带镜头拍摄照片', value: 'narrow_band' },
+ { label: '全部使用', value: 'zoom, wide, ir, narrow_band' }
+ ],
+ value: ''
+ },
+ {
+ title: '是否使用全局存储类型',
+ key: 'useGlobalPayloadLensIndex',
+ isRadio: true,
+ options: [
+ { label: '不使用全局设置', value: '0' },
+ { label: '使用全局设置', value: '1' }
+ ],
+ value: ''
+ }
+ ],
event: (obj: sBtn) => {
- obj.selected = !obj.selected
- editKmlFile('startRecord', {
- payloadPositionIndex: 0,
- fileSuffix: `_${new Date().toLocaleString()}`,
- payloadLensIndex: 'zoom',
- useGlobalPayloadLensIndex: 0
- })
+ paramPopover('startRecord', obj)
}
},
+ // 停止录像
{
key: 'stopRecord',
icon: getResource('waylinetool/camera-off.png'),
title: '停止录像',
+ param: [
+ {
+ title: '负载挂载位置',
+ key: 'payloadPositionIndex',
+ isRadio: true,
+ options: [
+ { label: '飞行器1号挂载位置', value: '0' },
+ { label: '飞行器2号挂载位置', value: '1' },
+ { label: '飞行器3号挂载位置', value: '2' },
+ ],
+ annotation: '飞行器1号挂载位置。M300 RTK，M350 RTK机型，对应机身左前方。其它机型，对应主云台。飞行器2号挂载位置。M300 RTK，M350 RTK机型，对应机身右前方。飞行器3号挂载位置。M300 RTK，M350 RTK机型，对应机身上方。',
+ value: ''
+ },
+ {
+ title: '拍摄照片存储类型',
+ key: 'payloadLensIndex',
+ isRadio: true,
+ options: [
+ { label: '存储变焦镜头拍摄照片', value: 'zoom' },
+ { label: '存储广角镜头拍摄照片', value: 'wide' },
+ { label: '存储红外镜头拍摄照片', value: 'ir' },
+ { label: '存储窄带镜头拍摄照片', value: 'narrow_band' },
+ { label: '全部使用', value: 'zoom, wide, ir, narrow_band' }
+ ],
+ value: ''
+ }
+ ],
event: (obj: sBtn) => {
- obj.selected = !obj.selected
- editKmlFile('stopRecord', {
- payloadPositionIndex: 0,
- payloadLensIndex: 'zoom'
- })
+ paramPopover('stopRecord', obj)
}
},
- // {
- // 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: '开始等时间隔拍照',
+ param: [],
+ event: (obj: sBtn) => {
+ obj.selected = true
+ editKmlFile('time')
+ }
+ },
+ // 开始等距间隔拍照
+ {
+ key: 'distance',
+ icon: getResource('waylinetool/shoot2.png'),
+ title: '开始等距间隔拍照',
+ param: [],
+ event: (obj: sBtn) => {
+ obj.selected = true
+ editKmlFile('distance')
+ }
+ },
+ // 结束间隔拍照
+ {
+ key: 'deleteShootType',
+ icon: getResource('waylinetool/shoot3.png'),
+ title: '结束间隔拍照',
+ param: [],
+ event: (obj: sBtn) => {
+ obj.selected = true
+ editKmlFile('deleteShootType')
+ }
+ },
+ // 悬停
{
key: 'hover',
icon: getResource('waylinetool/xt.png'),
title: '悬停',
+ param: [
+ {
+ title: '飞行器悬停等待时间',
+ key: 'hoverTime',
+ annotation: '参数需大于0， 单位为秒',
+ value: ''
+ }
+ ],
event: (obj: sBtn) => {
- obj.selected = !obj.selected
- editKmlFile('hover', {
- hoverTime: 10
- })
+ paramPopover('hover', obj)
}
},
+ // 飞行器偏航角
{
key: 'rotateYaw',
icon: getResource('waylinetool/droneyaw.png'),
title: '飞行器偏航角',
+ param: [
+ {
+ title: '飞行器目标偏航角（相对于地理北）',
+ key: 'aircraftHeading',
+ annotation: '范围为-180°到180°，飞行器旋转至该目标偏航角。0°为正北方向，90°为正东方向，-90°为正西方向，-180°/180°为正南方向。',
+ value: ''
+ },
+ {
+ title: '飞行器偏航角转动模式',
+ key: 'aircraftPathMode',
+ isRadio: true,
+ options: [
+ { label: '顺时针旋转', value: 'clockwise' },
+ { label: '逆时针旋转', value: 'counterClockwise' }
+ ],
+ value: ''
+ }
+ ],
event: (obj: sBtn) => {
- obj.selected = !obj.selected
- editKmlFile('rotateYaw', {
- aircraftHeading: 0,
- aircraftPathMode: 'clockwise'
- })
+ paramPopover('rotateYaw', obj)
}
},
+ // 云台偏航角
{
key: 'gimbalRotate',
+ distinguish: 'yaw',
icon: getResource('waylinetool/holderyaw.png'),
title: '云台偏航角',
+ param: [
+ {
+ title: '负载挂载位置',
+ key: 'payloadPositionIndex',
+ isRadio: true,
+ options: [
+ { label: '飞行器1号挂载位置', value: '0' },
+ { label: '飞行器2号挂载位置', value: '1' },
+ { label: '飞行器3号挂载位置', value: '2' },
+ ],
+ annotation: '飞行器1号挂载位置。M300 RTK，M350 RTK机型，对应机身左前方。其它机型，对应主云台。飞行器2号挂载位置。M300 RTK，M350 RTK机型，对应机身右前方。飞行器3号挂载位置。M300 RTK，M350 RTK机型，对应机身上方。',
+ value: ''
+ },
+ {
+ title: '云台转动模式',
+ key: 'gimbalRotateMode',
+ isRadio: true,
+ options: [
+ { label: '绝对角度，相对于正北方的角度', value: 'relativeAngle' },
+ { label: '相对角度，相对于飞行器机头的角度', value: 'absoluteAngle' }
+ ],
+ value: ''
+ },
+ {
+ title: '是否使能云台Yaw转动',
+ key: 'gimbalYawRotateEnable',
+ isRadio: true,
+ options: [
+ { label: '不使能', value: '0' },
+ { label: '使能', value: '1' }
+ ],
+ value: ''
+ },
+ {
+ title: '云台Yaw转动角度',
+ key: 'gimbalYawRotateAngle',
+ annotation: '不同云台可转动范围不同',
+ value: ''
+ },
+ {
+ title: '云台完成转动用时',
+ key: 'gimbalRotateTime',
+ annotation: '单位为秒',
+ value: ''
+ }
+ ],
event: (obj: sBtn) => {
- obj.selected = !obj.selected
- editKmlFile('gimbalRotate', {
- payloadPositionIndex: 0,
+ paramPopover('gimbalRotate', obj, {
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中心点为基准
gimbalRotateTimeEnable: 0,
- gimbalRotateTime: 5
})
}
},
- // {
- // 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',
+ distinguish: 'pitch',
+ icon: getResource('waylinetool/holdertilt.png'),
+ title: '云台俯仰角',
+ param: [
+ {
+ title: '负载挂载位置',
+ key: 'payloadPositionIndex',
+ isRadio: true,
+ options: [
+ { label: '飞行器1号挂载位置', value: '0' },
+ { label: '飞行器2号挂载位置', value: '1' },
+ { label: '飞行器3号挂载位置', value: '2' },
+ ],
+ annotation: '飞行器1号挂载位置。M300 RTK，M350 RTK机型，对应机身左前方。其它机型，对应主云台。飞行器2号挂载位置。M300 RTK，M350 RTK机型，对应机身右前方。飞行器3号挂载位置。M300 RTK，M350 RTK机型，对应机身上方。',
+ value: ''
+ },
+ {
+ title: '云台转动模式',
+ key: 'gimbalRotateMode',
+ isRadio: true,
+ options: [
+ { label: '绝对角度，相对于正北方的角度', value: 'relativeAngle' },
+ { label: '相对角度，相对于飞行器机头的角度', value: 'absoluteAngle' }
+ ],
+ value: ''
+ },
+ {
+ title: '是否使能云台Pitch转动',
+ key: 'gimbalPitchRotateEnable',
+ isRadio: true,
+ options: [
+ { label: '不使能', value: '0' },
+ { label: '使能', value: '1' }
+ ],
+ value: ''
+ },
+ {
+ title: '云台Pitch转动角度',
+ key: 'gimbalPitchRotateAngle',
+ annotation: '不同云台可转动范围不同',
+ value: ''
+ },
+ {
+ title: '云台完成转动用时',
+ key: 'gimbalRotateTime',
+ value: ''
+ }
+ ],
+ event: (obj: sBtn) => {
+ paramPopover('gimbalRotate', obj, {
+ gimbalHeadingYawBase: 'north',
+ gimbalRotateMode: 'relativeAngle',
+ gimbalRollRotateEnable: 0,
+ gimbalRollRotateAngle: 0,
+ gimbalYawRotateEnable: 0,
+ gimbalYawRotateAngle: 0,
+ gimbalRotateTimeEnable: 0,
+ })
+ }
+ },
+ // 拍照
{
key: 'takePhoto',
icon: getResource('waylinetool/camera.png'),
title: '拍照',
+ param: [
+ {
+ title: '负载挂载位置',
+ key: 'payloadPositionIndex',
+ isRadio: true,
+ options: [
+ { label: '飞行器1号挂载位置', value: '0' },
+ { label: '飞行器2号挂载位置', value: '1' },
+ { label: '飞行器3号挂载位置', value: '2' },
+ ],
+ annotation: '飞行器1号挂载位置。M300 RTK，M350 RTK机型，对应机身左前方。其它机型，对应主云台。飞行器2号挂载位置。M300 RTK，M350 RTK机型，对应机身右前方。飞行器3号挂载位置。M300 RTK，M350 RTK机型，对应机身上方。',
+ value: ''
+ },
+ {
+ title: '拍摄照片文件后缀',
+ key: 'fileSuffix',
+ annotation: '为生成媒体文件命名时将额外附带该后缀。',
+ value: ''
+ },
+ {
+ title: '拍摄照片存储类型',
+ key: 'payloadLensIndex',
+ isRadio: true,
+ options: [
+ { label: '存储变焦镜头拍摄照片', value: 'zoom' },
+ { label: '存储广角镜头拍摄照片', value: 'wide' },
+ { label: '存储红外镜头拍摄照片', value: 'ir' },
+ { label: '存储窄带镜头拍摄照片', value: 'narrow_band' },
+ { label: '全部使用', value: 'zoom, wide, ir, narrow_band' }
+ ],
+ value: ''
+ },
+ {
+ title: '是否使用全局存储类型',
+ key: 'useGlobalPayloadLensIndex',
+ isRadio: true,
+ options: [
+ { label: '不使用全局设置', value: '0' },
+ { label: '使用全局设置', value: '1' }
+ ],
+ value: ''
+ }
+ ],
event: (obj: sBtn) => {
- obj.selected = !obj.selected
- editKmlFile('takePhoto', {
- payloadPositionIndex: 0,
- fileSuffix: `_${new Date().toLocaleString()}`,
- payloadLensIndex: 'zoom',
- useGlobalPayloadLensIndex: 0
- })
+ paramPopover('takePhoto', obj)
}
},
+ // 相机变焦
{
key: 'zoom',
icon: getResource('waylinetool/fd.png'),
title: '相机变焦',
+ param: [
+ {
+ title: '负载挂载位置',
+ key: 'payloadPositionIndex',
+ isRadio: true,
+ options: [
+ { label: '飞行器1号挂载位置', value: '0' },
+ { label: '飞行器2号挂载位置', value: '1' },
+ { label: '飞行器3号挂载位置', value: '2' },
+ ],
+ annotation: '飞行器1号挂载位置。M300 RTK，M350 RTK机型，对应机身左前方。其它机型，对应主云台。飞行器2号挂载位置。M300 RTK，M350 RTK机型，对应机身右前方。飞行器3号挂载位置。M300 RTK，M350 RTK机型，对应机身上方。',
+ value: ''
+ },
+ {
+ title: '变焦焦距',
+ key: 'focalLength',
+ annotation: '单位mm，值>0',
+ value: ''
+ }
+ ],
event: (obj: sBtn) => {
- obj.selected = !obj.selected
- editKmlFile('zoom', {
- payloadPositionIndex: 0,
- focalLength: 2
- })
+ paramPopover('zoom', obj)
}
},
+ // 创建文件夹
{
key: 'customDirName',
icon: getResource('waylinetool/create-file.png'),
title: '创建文件夹',
+ param: [
+ {
+ title: '负载挂载位置',
+ key: 'payloadPositionIndex',
+ isRadio: true,
+ options: [
+ { label: '飞行器1号挂载位置', value: '0' },
+ { label: '飞行器2号挂载位置', value: '1' },
+ { label: '飞行器3号挂载位置', value: '2' },
+ ],
+ annotation: '飞行器1号挂载位置。M300 RTK，M350 RTK机型，对应机身左前方。其它机型，对应主云台。飞行器2号挂载位置。M300 RTK，M350 RTK机型，对应机身右前方。飞行器3号挂载位置。M300 RTK，M350 RTK机型，对应机身上方。',
+ value: ''
+ },
+ {
+ title: '新文件夹的名称',
+ key: 'directoryName',
+ value: ''
+ }
+ ],
event: (obj: sBtn) => {
- obj.selected = !obj.selected
- editKmlFile('customDirName', {
- payloadPositionIndex: 0,
- directoryName: '新建文件夹'
- })
+ paramPopover('customDirName', obj)
}
}
])
@@ -220,16 +511,13 @@
return store.state.waylineTool
})
+/**
+ * @description: 读取kmz文件转blob
+ * @param {*} kmzPath 文件地址
+ * @return {*} void
+ */
const readKmzFile = (kmzPath: string) => {
- // return axios.get(kmzPath, { responseType: 'arraybuffer' })
- return axios({
- method: 'GET',
- url: kmzPath,
- headers: {
- 'X-Auth-Token': window.localStorage.getItem('x-auth-token')
- },
- responseType: 'arraybuffer'
- })
+ return axios.get(kmzPath, { responseType: 'arraybuffer' })
.then(fileRes => fileRes.data)
.then(kmzData => JsZip.loadAsync(kmzData)) // 解压kmz文件
.then(kmzZip => kmzZip)
@@ -264,18 +552,73 @@
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>/
+
+ // 云台正则
+ const actionRegx = /<wpml:action>([\s\S]*?)<\/wpml:action>/g
+ const actions = (points[currentPosition.value] || '').match(actionRegx)
+ const gimbalPitchRotateAngleRegx = /<wpml:gimbalPitchRotateAngle>(.*?)<\/wpml:gimbalPitchRotateAngle>/
+ const gimbalYawRotateAngleRegx = /<wpml:gimbalYawRotateAngle>(.*?)<\/wpml:gimbalYawRotateAngle>/
+
btnList.value.forEach(sBtn => {
funcs?.forEach((func: string) => {
const funcName = func.match(funcNameRegx) || []
- if (funcName[1] === sBtn.key) {
+ if (funcName[1] === sBtn.key && !sBtn.distinguish) {
sBtn.selected = true
}
})
+ shootType?.forEach((shootType: string) => {
+ const typeValue = shootType.match(shootTypeValueRegx) || []
+ if (typeValue[1] === sBtn.key) {
+ sBtn.selected = true
+ }
+ })
+ if (sBtn.distinguish) {
+ const action = actions?.find((action: string) => action.includes('<wpml:actionActuatorFunc>gimbalRotate</wpml:actionActuatorFunc>'))
+ const pitchAngle = action?.match(gimbalPitchRotateAngleRegx) || []
+ const yawAngle = action?.match(gimbalYawRotateAngleRegx) || []
+ if (!!Number(pitchAngle[1]) && sBtn.distinguish === 'pitch') {
+ sBtn.selected = true
+ }
+ if (!!Number(yawAngle[1]) && sBtn.distinguish === 'yaw') {
+ sBtn.selected = true
+ }
+ }
+ })
+ settingDefaultValue(content)
+ })
+}
+
+// popover设置默认值
+const settingDefaultValue = (content: string) => {
+ const regx = /<Placemark>([\s\S]*?)<\/Placemark>/g
+ const points = content.match(regx) || []
+ // 当前选中的点
+ const currentPoint = points[currentPosition.value] || ''
+ const actionRegx = /<wpml:action>([\s\S]*?)<\/wpml:action>/g
+ const actionsKML = currentPoint.match(actionRegx)
+ btnList.value.forEach((sBtn: sBtn) => {
+ const kml = `<wpml:actionActuatorFunc>${sBtn.key}</wpml:actionActuatorFunc>`
+ const action = actionsKML?.find((action: string) => action.includes(kml))
+ sBtn.param.forEach((sParam) => {
+ const paramRegex = new RegExp(`<wpml:${sParam.key}>([\\s\\S]*?)<\\/wpml:${sParam.key}>`, 'g')
+ const actionParam = action?.match(paramRegex) || ['']
+ const infoRegx = new RegExp(`<wpml:${sParam.key}>([\\s\\S]*?)<\\/wpml:${sParam.key}>`)
+ const value: string[] = actionParam[0]?.match(infoRegx) || ['']
+ sParam.value = value[1] || ''
})
})
}
-// 创建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 +638,45 @@
return template
}
-// 修改template.kml文件
-const editKmlFile = (eventType: string, eventParam: any) => {
+/**
+ * @description: Popover参数编辑
+ * @param {*} btnobj: 事件按钮所有参数
+ * @param {*} eventType 事件类型
+ * @param {*} eventParam 事件参数Param
+ * @return {*}
+ */
+const paramPopover = (eventType: string, btnobj: sBtn, eventParam?: any) => {
+ // 判断参数是否为有存在空的
+ let isParamNull = false
+ btnobj.param.some((sParam: any) => {
+ isParamNull = sParam.value === ''
+ return isParamNull
+ })
+ if (isParamNull) return message.warning('确认失败，请检查填写的参数')
+ // 参数处理
+ const param = { ...eventParam }
+ btnobj.param.forEach((sParam: { key: string, value: string | number }) => {
+ param[sParam.key] = sParam.value
+ })
+ editKmlFile(eventType, param)
+ btnobj.selected = true
+}
+
+const saveInitPopoverParam = (param: popoverParamType[]) => {
+ initPopoverParam.value = cloneDeep(param)
+}
+
+const resetParamSetting = (btnParam: sBtn) => {
+ btnParam.param = cloneDeep(initPopoverParam.value)
+}
+
+/**
+ * @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 +685,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 +759,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)
- // })
})
}
@@ -365,6 +782,9 @@
})
}
+onMounted(() => {
+ kmzFileZip.value = null
+})
</script>
<style lang="scss" scoped>
.btn-list {
@@ -424,4 +844,34 @@
}
}
}
+
+.popover-content {
+ .content-box {
+ margin-bottom: 10px;
+
+ .annotation {
+ font-size: 12px;
+ color: rgb(188, 187, 187);
+ max-width: 300px;
+ }
+ }
+
+ .btn-tool {
+ display: flex;
+ justify-content: center;
+ gap: 10px;
+
+ .ant-btn {
+ flex: 1;
+ }
+ }
+}
+
+:deep() {
+ .ant-radio-wrapper {
+ display: block;
+ max-width: 300px;
+ text-wrap: wrap;
+ }
+}
</style>
--
Gitblit v1.9.3