航线点位事件编辑修改

GuLiMmo

2023-12-01 d63e1aaf1d33925b534e5fc9a708160cd13c0874

航线点位事件编辑修改

 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)
    // })
  })
}


 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)
            })
          })
        }
      })
    })
}