航线绘制封装、kmz文件操作封装、航线编辑修改

GuLiMmo

2024-03-04 d20068f8f1c0d1f7f4077c2fdd7d46e0f5216285

 src/pages/page-web/projects/components/route-edit/index.vue

@@ -7,6 +7,9 @@
        </template>
        返回
      </a-button>
      <div class="save-button">
        <SaveOutlined />
      </div>
      <setting>
        <template #show>
          <a-button type="text" class="setting-btn">
@@ -60,16 +63,15 @@
</template>

<script setup lang="ts">
import _, { divide } from 'lodash'
import _ from 'lodash'
import * as Cesium from 'cesium'
import setting from './components/setting.vue'
import { ref, reactive, defineEmits, defineProps, watch, onMounted } from 'vue'
import { ArrowLeftOutlined, CaretDownOutlined } from '@ant-design/icons-vue'
import { ArrowLeftOutlined, CaretDownOutlined, SaveOutlined } from '@ant-design/icons-vue'
import { cesiumOperation } from '/@/hooks/use-cesium-tsa'
import { useMyStore } from '/@/store'
import { analyzeKmzFile, getKmlParams } from '/@/utils/cesium/kmz'
import ImageTrailMaterial from '/@/utils/cesium/ImageTrailMaterial'
import { getPolylineLength } from '/@/utils/cesium/mapUtils'
import useMapDraw from '/@/utils/cesium/use-map-draw'
const store = useMyStore()
const { appContext }: any = getCurrentInstance()
const global = appContext.config.globalProperties
@@ -102,73 +104,14 @@
  return new URL(`/src/assets/icons/${name}`, import.meta.url).href
}

const ellipsoid = global.$viewer.scene.globe.ellipsoid

const emits = defineEmits(['backFn'])
const props = defineProps<{
  details: any
  isCreateWayline: boolean
}>()

const filePath = computed(() => store.state.waylineTool.kmzPath)

// 对应事件
const eventList = reactive<eventParmas[]>([
  {
    key: 'takePhoto',
    name: '单拍',
    icon: getResource('waylinetool/camera.png'),
  },
  {
    key: 'startRecord',
    name: '开始录像',
    icon: getResource('waylinetool/camera-on.png'),
  },
  {
    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',
    name: '变焦',
    icon: getResource('waylinetool/fd.png'),
  },
  {
    key: 'customDirName',
    name: '创建新文件夹',
    icon: getResource('waylinetool/create-file.png'),
  },
  {
    key: 'gimbalRotate',
    distinguish: 'Yaw',
    name: '云台俯仰角',
    icon: getResource('waylinetool/holderyaw.png'),
  },
  {
    key: 'gimbalYawRotate',
    name: '云台偏航角',
    distinguish: 'pitch',
    icon: getResource('waylinetool/holdertilt.png'),
  },
  {
    key: 'rotateYaw',
    name: '飞行器偏航',
    icon: getResource('waylinetool/droneyaw.png'),
  },
  {
    key: 'hover',
    name: '悬停等待',
    icon: getResource('waylinetool/xt.png'),
  },
])

const tragetPointArr = ref<tragetPoint[]>([])

@@ -179,83 +122,13 @@

let mouseRightClickEvent: any = null

// 初始化KML，判断当中存在多少事件
const initKML = () => {
  analyzeKmzFile(filePath.value).then((kmlRes) => {
    // 所有航点
    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 actionFunc = getKmlParams(point, true, {
            name: 'actionActuatorFunc',
            findRegx: 'takePhoto',
            mode: 'g',
          })
          if (actionFunc) {
            ;(waylineDetails[3] as any).value++
          }
        })
        tragetPointArr.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)
          })
        })
      }
    })
  })
}

// 绘制地图上的东西
let mapDraw = null
// 航线详情
const waylineDetails = ref<waylineDetails[]>([])
// 样式
const kmlEntities = ref<Cesium.Entity[]>([])

const initDrawRoute = () => {
  const options = {
    camera: global.$viewer.scene.camera,
@@ -269,193 +142,23 @@
    .add(Cesium.KmlDataSource.load(filePath.value, options))
    .then((res: any) => {
      kmlDataSource = res
      createMapMarker(kmlDataSource)
      initKML()
      mapDraw = useMapDraw(kmlDataSource, [], filePath.value, global)
      const {
        drawWayline,
        waylineDetails: details,
        waylinePointsEvent,
        kmlEntities: entities,
      } = mapDraw
      drawWayline()
      waylineDetails.value = details
      tragetPointArr.value = waylinePointsEvent.value
      kmlEntities.value = entities.value

      if (!mouseRightClickEvent) {
        // 添加右键事件
        addMapPointEvent()
      }
    })
}

const kmlEntity = ref<any>([])
const waylineDetails = reactive<
  {
    title: string
    value: string | number
  }[]
>([
  {
    title: '航线长度',
    value: '0',
  },
  {
    title: '预计执行时间',
    value: '0',
  },
  {
    title: '航点',
    value: 0,
  },
  {
    title: '照片',
    value: 0,
  },
])
// 样式
const kmlEntities = ref<Cesium.Entity[]>([])
const ellipsoid = global.$viewer.scene.globe.ellipsoid
const createMapMarker = async (
  dataSource:
    | {
        entities: { values: { _children: any }[] }
        show: boolean
      }
    | any,
  entitiesList: Cesium.Entity[] = [],
) => {
  dataSource.show = false
  let kmlEntityArr = [...entitiesList]
  // kmlEntity.value = dataSource.entities.values
  if (dataSource) {
    kmlEntityArr = dataSource.entities.values[0]._children
    kmlEntities.value = kmlEntityArr
  }
  const cartesianArr: any[] = []
  let btmStartPoint = null
  // 获取所有的点位
  const kmlRes = await analyzeKmzFile(filePath.value)
  // 所有航点
  const points: string[] | any = getKmlParams(kmlRes, false, {
    name: 'Placemark',
    findRegx: '([\\s\\S]*?)',
    mode: 'g',
  })
  // 获取当前航线全局速度
  const getGlobalSpeed: any = getKmlParams(kmlRes, true, {
    name: 'autoFlightSpeed',
    findRegx: '([\\s\\S]*?)',
  })
  const speed = Number(getGlobalSpeed[1])
  // 修改点位样式信息等
  for (let i = 0; i < kmlEntityArr.length; i++) {
    const entity: any = kmlEntityArr[i]
    // 将cartographic3D坐标转换为正常坐标
    const c3Position = entity.position._value
    const c2Postion = ellipsoid.cartesianToCartographic(c3Position)
    const longitude = Cesium.Math.toDegrees(c2Postion.longitude)
    const latitude = Cesium.Math.toDegrees(c2Postion.latitude)
    // 获取当前航点中的值
    const point = points[i]
    const getPointHeight: any = getKmlParams(point, true, {
      name: 'ellipsoidHeight',
      findRegx: '([\\s\\S]*?)',
    })
    const getHaeHeight: any = getKmlParams(point, true, {
      name: 'height',
      findRegx: '([\\s\\S]*?)',
    })
    const AslHeight = Number(getPointHeight[1])
    const HeaHeight = Number(getHaeHeight[1])
    entity.position = Cesium.Cartesian3.fromDegrees(
      longitude,
      latitude,
      AslHeight,
    )
    if (i === 0) {
      btmStartPoint = Cesium.Cartesian3.fromDegrees(longitude, latitude, 0)
    }
    // 创建广告牌信息
    const billboard = createBillboard(`${i + 1}`, '#61d396')
    // 修改id
    entity._id = 'tragetPoint' + i
    // 修改广告牌样式
    entity.billboard = new Cesium.BillboardGraphics({
      image: billboard,
      pixelOffset: new Cesium.Cartesian2(0, -20),
    })
    entity.label = new Cesium.LabelGraphics({
      text: `ASL：${Math.round(AslHeight)}m\nHAE：${Math.round(HeaHeight)}m`,
      font: '13px monospace',
      showBackground: true,
      horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
      disableDepthTestDistance: Number.POSITIVE_INFINITY,
      pixelOffset: new Cesium.Cartesian2(0, -40),
    })
    // 修改点的信息
    entity.point = new Cesium.PointGraphics({
      pixelSize: 20,
      color: Cesium.Color.GHOSTWHITE,
      outlineColor: Cesium.Color.BLACK,
    })
    // 创建虚线
    addPolyline({
      id: 'dashLine' + i,
      polyline: {
        positions: Cesium.Cartesian3.fromDegreesArrayHeights([
          longitude,
          latitude,
          AslHeight,
          longitude,
          latitude,
          0,
        ]),
        width: 1,
        material: new Cesium.PolylineDashMaterialProperty({
          color: Cesium.Color.WHITE,
        }),
      },
    })
    // 获取虚线中心点
    cartesianArr.push(entity.position._value)
    tragetPointArr.value[i] = {
      position: entity.position._value,
      eventList: [],
    }
  }
  // 创建起飞位置
  global.$viewer.entities.add({
    id: 'dronePosition',
    position: btmStartPoint,
    billboard: {
      image: getResource('dock.png'),
      width: 36,
      height: 36,
    },
  })
  // 绘制链接线
  addPolyline({
    id: 'entityLine',
    polyline: {
      positions: [btmStartPoint, ...cartesianArr],
      width: 7,
      material: new ImageTrailMaterial({
        backgroundColor: Cesium.Color.fromBytes(96, 210, 149),
        image: getResource('arrow-right.png'),
        imageW: 7,
        duration: 0,
        animation: false,
      }),
      clampToGround: false, // 关闭贴地效果，保留高度
    },
  })
  dataSource.show = true
  const lineEntity = getEntityById('entityLine')
  // 获取距离
  const polylineLength: any = getPolylineLength(lineEntity).toFixed(1) || 0
  waylineDetails[0].value = polylineLength + 'm'
  // 航点数
  waylineDetails[2].value = cartesianArr.length
  // 计算时间
  const sportTime = polylineLength / speed
  // 判断有没有超过一分钟
  const time = sportTime / 60
  waylineDetails[1].value =
    Math.trunc(time) + ' m ' + Math.round((time % 1) * 60) + ' s'
  global.$viewer.flyTo(lineEntity, {
    offset: new Cesium.HeadingPitchRange(0, -90, 300),
  })
}

// const createPointOrPolyline = () => {}
@@ -759,6 +462,14 @@
    .ant-btn {
      color: #fff;
    }
    .save-button {
      font-size: 20px;
      margin: 0 10px 0 auto;
      cursor: pointer;
      &:hover {
        color: #409eff;
      }
    }
    .setting-btn {
      background-color: #3c3c3c;
      margin-right: 10px;