航线点位事件编辑完善

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>
@@ -177,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
}[]>([
  {
@@ -203,8 +206,14 @@
    icon: getResource('waylinetool/camera-off.png'),
  },
  {
    key: 'focus',
    name: '对焦'
    key: 'time',
    name: '开始等时间隔拍照',
    icon: getResource('waylinetool/shoot1.png'),
  },
  {
    key: 'distance',
    name: '开始等距间隔拍照',
    icon: getResource('waylinetool/shoot2.png'),
  },
  {
    key: 'zoom',
@@ -218,24 +227,25 @@
  },
  {
    key: 'gimbalRotate',
    name: '旋转云台'
    distinguish: 'Yaw',
    name: '云台俯仰角',
    icon: getResource('waylinetool/holderyaw.png'),
  },
  {
    key: 'gimbalYawRotate',
    name: '云台偏航角',
    distinguish: 'pitch',
    icon: getResource('waylinetool/holdertilt.png'),
  },
  {
    key: 'rotateYaw',
    name: '飞行器偏航'
    name: '飞行器偏航',
    icon: getResource('waylinetool/droneyaw.png'),
  },
  {
    key: 'hover',
    name: '悬停等待',
    icon: getResource('waylinetool/xt.png'),
  },
  {
    key: 'gimbalEvenlyRotate',
    name: '航段间均匀转动云台pitch角'
  },
  {
    key: 'orientedShoot',
    name: '精准复拍动作'
  }
])

@@ -255,6 +265,7 @@
  }, 1000)
  console.log(workspaceId.value)
})

onUnmounted(() => {
  if (kmlDataSource) {
    global.$viewer.dataSources.remove(kmlDataSource)
@@ -263,7 +274,8 @@
  removeById('clickBox')
  store.commit('SET_WAYLINE_INFO', {
    isShow: false,
    wayline: {}
    wayline: {},
    position: null,
  })
})

@@ -332,7 +344,8 @@
  // 清除选中点柱形和隐藏按钮
  store.commit('SET_WAYLINE_INFO', {
    isShow: false,
    wayline: {}
    wayline: {},
    position: null
  })
  removeById('clickBox')
  isPointListOpen.value = !isPointListOpen.value
@@ -342,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,
@@ -407,7 +422,8 @@
  selectedPoint.value = index
  store.commit('SET_WAYLINE_INFO', {
    isShow: true,
    wayline: currentWayLine
    wayline: currentWayLine,
    position: index
  })
  if (getEntityById('clickBox')) {
    removeById('clickBox')
@@ -430,6 +446,7 @@
      heightReference: true
    }
  }

  const boxEntity = global.$viewer.entities.add(entity)
  global.$viewer.flyTo(boxEntity, {
    duration: 3,
@@ -550,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) => {
@@ -561,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)
            })
          })
        }
      })
    })
@@ -614,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;
@@ -641,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;
      }
@@ -713,5 +766,4 @@

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