kmz文件打包完成、新增航线功能、事件编辑

GuLiMmo

2024-03-18 3e13dd0242140c7189b65e4171efaa9190d1763d

 src/utils/cesium/use-map-draw.ts

@@ -4,8 +4,8 @@
import ImageTrailMaterial from '/@/utils/cesium/ImageTrailMaterial'
import { ref } from 'vue'
import { cesiumOperation } from '/@/hooks/use-cesium-tsa'
import { template as xmlTemplate } from '/@/utils/cesium/use-kmz-tsa'
const { addPolyline, getEntityById } = cesiumOperation()
import { XMLToJSON } from './kmz'
const { addPolyline, getEntityById, removeAllDataSource, removeAllPoint } = cesiumOperation()

const getResource = (name: string) => {
  return new URL(`/src/assets/icons/${name}`, import.meta.url).href
@@ -24,11 +24,16 @@
interface tragetPoint {
  position: Cesium.Cartesian3
  isUseGlobalHeight: boolean
  eventList: eventParmas[]
  eventList: eventParmas[] | null
}

interface action {
  key: string
  name: string
  icon?: string
}
// 对应事件
const eventList = [
const actionList: eventParmas[] = [
  {
    key: 'takePhoto',
    name: '单拍',
@@ -58,11 +63,6 @@
    key: 'zoom',
    name: '变焦',
    icon: getResource('waylinetool/fd.png'),
  },
  {
    key: 'customDirName',
    name: '创建新文件夹',
    icon: getResource('waylinetool/create-file.png'),
  },
  {
    key: 'gimbalRotate',
@@ -120,15 +120,10 @@
  global: any,
) => {
  const ellipsoid = global.$viewer.scene.globe.ellipsoid

  //   kml文件中点位string
  let kmlPoints: string[] | any = []
  //  记录点位信息
  let cartesianArr: Cesium.Cartesian3[] = []

  // 绘制路线
  // 起飞点
  // let btmStartPoint: Cesium.Cartesian3 | null = null
  const drawWayline = async (entities?: Cesium.Entity[], kmlStr?: string) => {
    if (!entities && !kmlStr) {
      dataSource.show = false
@@ -141,36 +136,25 @@
    // 获取所有点位
    let kmlRes = ''
    if (kmlStr) {
      removeAllDataSource()
      removeAllPoint()
      kmlRes = kmlStr
    } else {
      const fileRes = await analyzeKmzFile(fileUrl)
      kmlRes = await fileRes.fileInfoObj['wpmz/template.kml']
    }
    const kmlJson = XMLToJSON(kmlRes)
    // 所有航点
    kmlPoints = getKmlParams(kmlRes, false, {
      name: 'Placemark',
      findRegx: '([\\s\\S]*?)',
      mode: 'g',
    })
    const kmlPoints = kmlJson.Document.Folder.Placemark
    // 起飞点
    let btmStartPoint = null
    // 获取文件中的起飞点
    const startPointRegStr = getKmlParams(kmlRes, true, {
      name: 'takeOffRefPoint',
      findRegx: '([\\s\\S]*?)',
    }) || ['', '0.00000,0.00000,0.00000']
    const startPointPosition = startPointRegStr[1].split(',')
    const startPointPosition = kmlJson.Document.missionConfig.takeOffRefPoint['#text'].split(',')
    btmStartPoint = Cesium.Cartesian3.fromDegrees(
      Number(startPointPosition[1]),
      Number(startPointPosition[0]),
      Number(startPointPosition[2]),
    )
    // 参考起飞点“海拔高度，与“参考起飞点”中的椭球高度对应
    // const posterHeightRegStr = getKmlParams(kmlRes, true, {
    //   name: 'takeOffRefPointAGLHeight',
    //   findRegx: '([\\s\\S]*?)',
    // }) || ['', 0]
    // const posterHeight = Number(posterHeightRegStr[1])
    // 判断是否存在实体集
    if (entities) {
      cartesianArr = []
@@ -186,22 +170,12 @@
      const latitude = Cesium.Math.toDegrees(c2Postion.latitude)
      // 获取当前航点中的值
      const point = kmlPoints[i]
      const getHaeHeight: any = getKmlParams(point, true, {
        name: 'ellipsoidHeight',
        findRegx: '([\\s\\S]*?)',
      })
      const getPointHeight: any = getKmlParams(point, true, {
        name: 'height',
        findRegx: '([\\s\\S]*?)',
      })
      const getHaeHeight = point.ellipsoidHeight['#text']
      const getPointHeight = point.height['#text']
      // 获取是否使用全局高度
      const useGlobalHeightRegStr = getKmlParams(point, true, {
        name: 'useGlobalHeight',
        findRegx: '([\\s\\S]*?)',
      }) || ['', '0']
      const isUseGlobalHeight = Boolean(Number(useGlobalHeightRegStr[1]))
      const AslHeight = Number(getPointHeight[1])
      const HeaHeight = Number(getHaeHeight[1])
      const isUseGlobalHeight = point?.useGlobalHeight ? point.useGlobalHeight['#text'] : 0
      const AslHeight = Number(getPointHeight)
      const HeaHeight = Number(getHaeHeight)
      entity.position = Cesium.Cartesian3.fromDegrees(longitude, latitude, AslHeight)
      // 创建广告牌信息
      const title = Number(i + 1) === 1 ? 'S' : i + 1
@@ -226,10 +200,8 @@
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        disableDepthTestDistance: Number.POSITIVE_INFINITY,
        pixelOffset: new Cesium.Cartesian2(0, -40),
        show: false
        show: false,
      })
      // 广告牌隐藏
      // entity.label._show = false
      // 修改点的信息
      entity.point = new Cesium.PointGraphics({
        pixelSize: 20,
@@ -303,11 +275,9 @@
  //   获取航线详情
  const getWaylineDetails = (kmlStr: string) => {
    // 获取当前航线全局速度
    const getGlobalSpeed: any = getKmlParams(kmlStr, true, {
      name: 'autoFlightSpeed',
      findRegx: '([\\s\\S]*?)',
    })
    const speed = Number(getGlobalSpeed[1])
    const kmlJson = XMLToJSON(kmlStr).Document
    const getGlobalSpeed = kmlJson.Folder.autoFlightSpeed['#text']
    const speed = Number(getGlobalSpeed)
    const lineEntity = getEntityById('entityLine')
    // 获取距离
    const polylineLength: any = getPolylineLength(lineEntity).toFixed(1) || 0
@@ -332,76 +302,28 @@
      const fileRes = await analyzeKmzFile(fileUrl)
      kmlRes = await fileRes.fileInfoObj['wpmz/template.kml']
    }
    // 所有航点
    const points = getKmlParams(kmlRes, false, {
      name: 'Placemark',
      findRegx: '([\\s\\S]*?)',
      mode: 'g',
    })
    points?.forEach((point: string, index: number) => {
      // 当前点位事件
      const pointActions = getKmlParams(point, true, {
        name: 'actionGroup',
        findRegx: '([\\s\\S]*?)',
        mode: 'g',
      })
      const eventArr: eventParmas[] = []
      if (pointActions) {
        const actions =
          getKmlParams(pointActions[0], true, {
            name: 'action',
            findRegx: '([\\s\\S]*?)',
            mode: 'g',
          }) || []
        actions?.forEach((action) => {
          eventList.forEach((event: any) => {
            if (!event.distinguish) {
              action.includes(event.key) && eventArr.push(event)
            } else {
              const pitchAngle =
                getKmlParams(action, true, {
                  name: 'gimbalPitchRotateAngle',
                  findRegx: '([\\s\\S]*?)',
                }) || []
              const yawAngle =
                getKmlParams(action, true, {
                  name: 'gimbalYawRotateAngle',
                  findRegx: '([\\s\\S]*?)',
                }) || []
              if (!!Number(pitchAngle[1]) && event.distinguish === 'pitch') {
                eventArr.push(event)
              }
              if (!!Number(yawAngle[1]) && event.distinguish === 'yaw') {
                eventArr.push(event)
              }
            }
    const kmlJson = XMLToJSON(kmlRes).Document
    const points = kmlJson.Folder?.Placemark
    let takePhotoNum = 0
    points?.forEach((point: { actionGroup: any }, index: number) => {
      if (Reflect.has(point, 'actionGroup')) {
        const action = point.actionGroup.action
        if (Array.isArray(action)) {
          action.forEach((item) => {
            const { actionActuatorFunc } = item
            actionActuatorFunc['#text'] === 'takePhoto' && takePhotoNum++
            const actionObj: eventParmas | any = actionList.find((event) => actionActuatorFunc['#text'] === event.key)
            waylinePointsEvent.value[index].eventList?.push(actionObj)
          })
          // 判断一共有多少个拍照模式
          const actionFunc = getKmlParams(point, true, {
            name: 'actionActuatorFunc',
            findRegx: 'takePhoto',
            mode: 'g',
          })
          if (actionFunc) {
            ;(waylineDetails[3] as any).value++
          }
        })
        waylinePointsEvent.value[index].eventList = eventArr
      }
      // 获取当前是否存在拍照模式
      const pointShootMode = getKmlParams(point, true, {
        name: 'shootType',
        findRegx: '([\\s\\S]*?)',
        mode: 'g',
      })
      if (pointShootMode) {
        pointShootMode.forEach((type: string) => {
          eventList.forEach((item: any) => {
            type.includes(item.key) && eventArr.push(item)
          })
        })
        } else {
          const { actionActuatorFunc } = action
          actionActuatorFunc['#text'] === 'takePhoto' && takePhotoNum++
          const actionObj: eventParmas | any = actionList.find((item) => actionActuatorFunc['#text'] === item.key)
          waylinePointsEvent.value[index].eventList?.push(actionObj)
        }
      }
    })
    waylineDetails[3].value = takePhotoNum
  }
  const clearWaylineData = () => {
    kmlEntities.value = []