航线点位事件编辑完善

GuLiMmo

2023-12-05 c7c9de0214cb1e6ad3d29c8a3a0c7a8ea31fbaaa

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

@@ -99,18 +99,20 @@
          <ArrowLeftOutlined />
          <span>返回上一页</span>
        </div>
        <li
          v-for="(item, index) in tragetPointArr"
          :key="index"
          :class="{ selectedColor : index === selectedPoint }"
        <li v-for="(item, index) in tragetPointArr" :key="index" :class="{ selectedColor: index === selectedPoint }"
          @click="tragetPointClick(item.position, index)">
          <div class="graph">
            <div class="left" :style="{borderTopColor: index === selectedPoint ? '#FF9900' : '#2D8CF0'}"></div>
            <div class="left" :style="{ borderTopColor: index === selectedPoint ? '#FF9900' : '#2D8CF0' }"></div>
            <div class="right">{{ index + 1 }}</div>
          </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" />
              <a-tooltip placement="top">
                <template #title>
                  {{ event.name }}
                </template>
                <img :src="event.icon" alt="icon" />
              </a-tooltip>
            </div>
          </div>
        </li>
@@ -136,7 +138,6 @@
import { getRoot } from '/@/root'
import * as Cesium from 'cesium'
import { cesiumOperation } from '/@/hooks/use-cesium-tsa'
import { gcj02towgs84, wgs84togcj02 } from '/@/vendors/coordtransform'
import axios from 'axios'
import JSZIP from 'jszip'
// 初始化jszip
@@ -178,14 +179,15 @@
const isPointListOpen = ref<boolean>(false)
const tragetPointArr = ref<{
  position: Cesium.Cartesian3,
  eventList: string[]
  eventList: any[]
}[]>([])
const selectedPoint = ref<number | null>(null)

// 对应事件
const eventList: any = reactive<{
const eventList = reactive<{
  key: string,
  name: string,
  distinguish?: string,
  icon?: string
}[]>([
  {
@@ -204,6 +206,16 @@
    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'),
@@ -215,7 +227,15 @@
  },
  {
    key: 'gimbalRotate',
    name: '旋转云台'
    distinguish: 'Yaw',
    name: '云台俯仰角',
    icon: getResource('waylinetool/holderyaw.png'),
  },
  {
    key: 'gimbalYawRotate',
    name: '云台偏航角',
    distinguish: 'pitch',
    icon: getResource('waylinetool/holdertilt.png'),
  },
  {
    key: 'rotateYaw',
@@ -245,6 +265,7 @@
  }, 1000)
  console.log(workspaceId.value)
})

onUnmounted(() => {
  if (kmlDataSource) {
    global.$viewer.dataSources.remove(kmlDataSource)
@@ -334,6 +355,8 @@
 * @param file
 */
function initKmlFile (file: string) {
  const [, address] = file.split('cloud-bucket')
  file = import.meta.env.VITE_MEDIAPANEL_API_URL + address
  removeById('kmzLine')
  const options = {
    camera: global.$viewer.scene.camera,
@@ -400,7 +423,7 @@
  store.commit('SET_WAYLINE_INFO', {
    isShow: true,
    wayline: currentWayLine,
    position: position
    position: index
  })
  if (getEntityById('clickBox')) {
    removeById('clickBox')
@@ -544,6 +567,11 @@
      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
      // 云台角度
      const gimbalPitchRotateAngleRegx = /<wpml:gimbalPitchRotateAngle>(.*?)<\/wpml:gimbalPitchRotateAngle>/
      const gimbalYawRotateAngleRegx = /<wpml:gimbalYawRotateAngle>(.*?)<\/wpml:gimbalYawRotateAngle>/
      // 当前kmz文件航点
      const kmlPoints = kml.match(regx)
      kmlPoints?.forEach((point: string, index: number) => {
@@ -555,10 +583,30 @@
          const actions = ponitAction[0].match(actionRegx)
          actions?.forEach(action => {
            eventList.forEach((item: any) => {
              action.includes(item.key) && eventArr.push(item)
              if (!item.distinguish) {
                action.includes(item.key) && eventArr.push(item)
              } else {
                const pitchAngle = action?.match(gimbalPitchRotateAngleRegx) || []
                const yawAngle = action?.match(gimbalYawRotateAngleRegx) || []
                if (!!Number(pitchAngle[1]) && item.distinguish === 'pitch') {
                  eventArr.push(item)
                }
                if (!!Number(yawAngle[1]) && item.distinguish === 'yaw') {
                  eventArr.push(item)
                }
              }
            })
          })
          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)
            })
          })
        }
      })
    })
@@ -608,26 +656,32 @@
    padding: 0;
    margin: 0;
    list-style-type: none;

    .back-btn {
      cursor: pointer;
      padding: 10px;
      border-bottom: 1px solid #4f4f4f;

      span {
        margin-left: 10px;
      }

      &:hover {
        color: #2d8cf0;
      }
    }

    li {
      cursor: pointer;
      padding: 10px 0;
      margin: 0 7px;
      display: flex;

      .graph {
        width: 40px;
        display: flex;
        align-items: center;

        .left {
          width: 0;
          height: 0;
@@ -635,27 +689,32 @@
          border-right: 10px solid transparent;
          border-left: 10px solid transparent;
        }

        .right {
          margin-left: 3px;
        }
      }

      .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;
      }
@@ -707,5 +766,4 @@

.selectedColor {
  background-color: #3C3C3C;
}
</style>
}</style>