航线库修改/api打包后可修改

GuLiMmo

2023-11-29 7d9fb50b4e444ba3afec098ad031e93b4e9ee9ee

 src/pages/page-web/projects/wayline.vue

@@ -100,15 +100,19 @@
          <span>返回上一页</span>
        </div>
        <li
          v-for="(position, index) in tragetPointArr"
          v-for="(item, index) in tragetPointArr"
          :key="index"
          :class="{ selectedColor : index === selectedPoint }"
          @click="tragetPointClick(position, index)">
          @click="tragetPointClick(item.position, index)">
          <div class="graph">
            <div class="left" :style="{borderTopColor: index === selectedPoint ? '#FF9900' : '#2D8CF0'}"></div>
            <div class="right">{{ index + 1 }}</div>
          </div>
          <div class="graph-right"></div>
          <div class="graph-right">
            <div v-for="(event, index) in item.eventList" :key="index" class="s-event-icon">
              <img :src="event.icon" alt="icon" />
            </div>
          </div>
        </li>
      </ul>
    </a-spin>
@@ -132,7 +136,14 @@
import { getRoot } from '/@/root'
import * as Cesium from 'cesium'
import { cesiumOperation } from '/@/hooks/use-cesium-tsa'
import { stat } from 'fs'
import axios from 'axios'
import JSZIP from 'jszip'
// 初始化jszip
const JsZip = new JSZIP()

const getResource = (name: string) => {
  return new URL(`/src/assets/icons/${name}`, import.meta.url).href
}

const projectWayLine = ref<HTMLDivElement>()

@@ -164,8 +175,69 @@
const { removeById, addClickEvent, getEntityById } = cesiumOperation()

const isPointListOpen = ref<boolean>(false)
const tragetPointArr = ref<Cesium.Cartesian3[]>([])
const tragetPointArr = ref<{
  position: Cesium.Cartesian3,
  eventList: string[]
}[]>([])
const selectedPoint = ref<number | null>(null)

// 对应事件
const eventList: any = reactive<{
  key: string,
  name: string,
  icon?: string
}[]>([
  {
    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: 'focus',
    name: '对焦'
  },
  {
    key: 'zoom',
    name: '变焦',
    icon: getResource('waylinetool/fd.png'),
  },
  {
    key: 'customDirName',
    name: '创建新文件夹',
    icon: getResource('waylinetool/create-file.png'),
  },
  {
    key: 'gimbalRotate',
    name: '旋转云台'
  },
  {
    key: 'rotateYaw',
    name: '飞行器偏航'
  },
  {
    key: 'hover',
    name: '悬停等待',
    icon: getResource('waylinetool/xt.png'),
  },
  {
    key: 'gimbalEvenlyRotate',
    name: '航段间均匀转动云台pitch角'
  },
  {
    key: 'orientedShoot',
    name: '精准复拍动作'
  }
])

onMounted(() => {
  const parent = document.getElementsByClassName('scrollbar').item(0)?.parentNode as HTMLDivElement
@@ -253,6 +325,7 @@
  getWayLineFile(workspaceId.value, wayline.id).then(res => {
    store.commit('SET_SELECT_WAYLINE_INFO', wayline)
    initKmlFile(res.data)
    store.commit('SET_WAYLINE_KMZPATH', res.data)
  }).finally(() => {
    loading.value = false
  })
@@ -302,9 +375,13 @@
        outlineColor: Cesium.Color.BLACK,
      })
      cartesianArr.push(entity.position._value)
      tragetPointArr.value[i] = {
        position: entity.position._value,
        eventList: []
      }
    }
    tragetPointArr.value = cartesianArr
    const stripe = createStripe()
    // tragetPointArr.value = cartesianArr
    // const stripe = createStripe()
    const lineEntity = global.$viewer.entities.add({
      name: 'entityLine',
      id: 'kmzLine',
@@ -319,9 +396,13 @@
    global.$viewer.flyTo(lineEntity, {
      offset: new Cesium.HeadingPitchRange(0, -90, 8000)
    })

    // 解析kmz文件
    readKmzFile(file)
  })
}

// 点击目标点
function tragetPointClick (position: Cesium.Cartesian3, index: number) {
  selectedPoint.value = index
  store.commit('SET_WAYLINE_INFO', {
@@ -448,6 +529,47 @@
  return stripe
}

/**
 * @description: 获取kmz文件中的内容
 * @param {*} kmzPath kmz文件地址
 * @return {*} void
 */
const readKmzFile = (kmzPath: string) => {
  // 使用axios读取文件
  return axios.get(kmzPath, { responseType: 'arraybuffer' })
    .then(fileRes => fileRes.data)
    .then(kmzData => JsZip.loadAsync(kmzData)) // 解压kmz文件
    .then(kmzZip => {
      // 通过文件名找到 KML 文件
      const kmlFile = kmzZip.file(/\.kml$/i)[0]
      return kmlFile.async('text')
    }).then(kml => {
      // 查找航点标签reg
      const regx = /<Placemark>([\s\S]*?)<\/Placemark>/g
      // 查找事件组reg
      const actionGroupReg = /<wpml:actionGroup>([\s\S]*?)<\/wpml:actionGroup>/g
      // 查找单个事件reg
      const actionRegx = /<wpml:action>([\s\S]*?)<\/wpml:action>/g
      // 当前kmz文件航点
      const kmlPoints = kml.match(regx)
      kmlPoints?.forEach((point: string, index: number) => {
        // 当前点的事件组
        const ponitAction = point.match(actionGroupReg)
        const eventArr: string[] = []
        if (ponitAction) {
          // 当前事件
          const actions = ponitAction[0].match(actionRegx)
          actions?.forEach(action => {
            eventList.forEach((item: any) => {
              action.includes(item.key) && eventArr.push(item)
            })
          })
          tragetPointArr.value[index].eventList = eventArr
        }
      })
    })
}

const openEditModal = (wayline: any) => {
  currentWayLine.value = wayline
  editVisible.value = true
@@ -525,7 +647,20 @@
      }
      .graph-right {
        width: calc(100% - 40px);
        height: 30px;
        border-bottom: 1px solid #4f4f4f;
        display: flex;
        align-items: center;
        .s-event-icon {
          width: 25px;
          height: 25px;
          display: flex;
          justify-content: center;
          align-items: center;
          img {
            width: 70%;
          }
        }
      }
      &:hover {
        background-color: #3C3C3C;