罗广辉
2025-06-19 f27ca082eb0a839449dd50c49007b58e5ed6946f
src/pages/page-web/projects/components/route-edit/index.vue
@@ -59,18 +59,28 @@
        </a-tooltip>
        <contextMenu :menu="[{ title: '删除航点', value: { index, item } }]">
          <div class="graph-right">
            <div v-for="(event, index) in item.eventList" :key="index" class="s-event-icon">
            <div
              v-for="(event, eIndex) in item.eventList"
              :key="eIndex"
              :class="[
                's-event-icon',
                selectedPointAndAction.selectedPoint === index &&
                  selectedPointAndAction.selectedAction === event?.key &&
                  'active-event',
              ]"
              @click="selectionEvent(event, index)">
              <a-tooltip placement="top">
                <template #title>
                  {{ event.name }}
                  {{ event?.name }}
                </template>
                <img :src="event.icon" alt="icon" />
                <img :src="event?.icon" alt="icon" />
              </a-tooltip>
            </div>
          </div>
        </contextMenu>
      </li>
    </ul>
    <startPointTips v-if="xmlTemplate.missionConfig?.takeOffRefPoint['#text'] === ''" />
  </div>
</template>
@@ -85,6 +95,7 @@
import { useMyStore } from '/@/store'
import useMapDraw, { kmlEntities as globalEntities, selectPointIndex as pointIdx } from '/@/utils/cesium/use-map-draw'
import contextMenu from './components/content-menu.vue'
import startPointTips from './components/setting-point-tip.vue'
const store = useMyStore()
const { appContext }: any = getCurrentInstance()
const global = appContext.config.globalProperties
@@ -175,7 +186,9 @@
        deep: true,
      },
    )
    store.commit('SET_WAYLINE_INFO', {
      isShow: true,
    })
    kmlEntities.value = entities.value
    if (!mouseRightClickEvent) {
      // 添加右键事件
@@ -186,8 +199,27 @@
// 新建航线初始化
const initCreateRoute = () => {
  mapDraw = useMapDraw('', [], '', global)
  const xml = kmzUtils.generateXML(xmlTemplate.value)
  mapDraw.drawWayline([], xml)
  const { drawWayline, waylineDetails: details, waylinePointsEvent, kmlEntities: entities, clearWaylineData } = mapDraw
  clearWaylineData()
  drawWayline()
  waylineDetails.value = details
  tragetPointArr.value = waylinePointsEvent.value
  watch(
    () => waylinePointsEvent.value,
    (val) => {
      tragetPointArr.value = val
    },
    {
      deep: true,
    },
  )
  kmlEntities.value = entities.value
  // const xml = kmzUtils.generateXML(xmlTemplate.value)
  // mapDraw.drawWayline([], xml)
  if (!mouseRightClickEvent) {
    // 添加右键事件
    addMapPointEvent()
  }
}
// 创建广告牌
@@ -217,17 +249,18 @@
const selectPointIndex = ref<string | number | any>(null)
const pointSelect = (value: tragetPoint, index: number) => {
  removeCesiumChildDom(popupDom)
  if (selectPointIndex.value === index) {
    global.$viewer.entities.remove(prevPointEntity)
    global.$viewer.entities.remove(nextPointEntity)
    kmlEntities.value.forEach((entity: Cesium.Entity | any, i: number) => {
      entity.billboard.image = createBillboard(i + 1, '#61d396')
      entity.label.show = false
    })
    selectPointIndex.value = null
    pointIdx.value = null
    return
  }
  // if (selectPointIndex.value === index) {
  //   global.$viewer.entities.remove(prevPointEntity)
  //   global.$viewer.entities.remove(nextPointEntity)
  //   kmlEntities.value.forEach((entity: Cesium.Entity | any, i: number) => {
  //     entity.billboard.image = createBillboard(i + 1, '#61d396')
  //     entity.label.show = false
  //   })
  //   selectPointIndex.value = null
  //   pointIdx.value = null
  //   store.commit('SET_WAYLINE_INFO', {})
  //   return
  // }
  if (prevPointEntity) {
    global.$viewer.entities.remove(prevPointEntity)
  }
@@ -273,6 +306,15 @@
      entity.label.show = false
    }
  })
  // 默认选中第一个事件
  // if (selectPointIndex.value !== index) {
  //   store.commit('SET_WAYLINE_INFO', {
  //     selectedPoint: index,
  //     // 默认选中第一个
  //     selectedAction: value.eventList[0],
  //   })
  //   selectionEvent(value.eventList[0], index)
  // }
  selectPointIndex.value = index
  pointIdx.value = index
}
@@ -287,6 +329,7 @@
    removeCesiumChildDom(popupDom)
    const { position } = click
    const { x, y } = position
    const createTakeOffPointEvent = [{ class: 'start-point', title: '设置参考起飞点' }]
    const pointEvents = [
      {
        class: 'add-prev-point',
@@ -298,7 +341,12 @@
      },
    ]
    const defaultEvents = [{ class: 'finally-point', title: '在最后航点新增航点' }]
    const events = selectPointIndex.value !== null ? [...defaultEvents, ...pointEvents] : defaultEvents
    let events = []
    if (xmlTemplate.value.missionConfig?.takeOffRefPoint['#text'] === '') {
      events = createTakeOffPointEvent
    } else {
      events = selectPointIndex.value !== null ? [...defaultEvents, ...pointEvents] : defaultEvents
    }
    popupDom = createPointPopupDom(events)
    global.$viewer.container.appendChild(popupDom)
    popupDom.style.transform = `translate3d(${x}px, ${y}px, 0)`
@@ -398,6 +446,14 @@
      },
      isRisky: { '#text': 0 },
    }
    // 添加参考点
    if (className === 'start-point') {
      // 默认高度为6
      const height = 6
      const takeOffPoint = [latitude, longitude, height]
      xmlTemplate.value.missionConfig.takeOffRefPoint['#text'] = takeOffPoint.join(',')
    }
    // 添加航点
    if (className === 'finally-point') {
      globalEntities.value.push(entity)
      xmlTemplate.value.Folder.Placemark.push(setting)
@@ -495,10 +551,27 @@
  },
)
// 选中事件
const selectedPointAndAction = reactive<{
  selectedPoint: number | null
  selectedAction: any | null
}>({
  selectedPoint: null,
  selectedAction: null,
})
const selectionEvent = (action: any, index: number) => {
  const params = {
    selectedPoint: index,
    selectedAction: action,
  }
  selectedPointAndAction.selectedPoint = index
  selectedPointAndAction.selectedAction = action.key
  store.commit('SET_WAYLINE_INFO', params)
}
onMounted(() => {
  // 清空画布
  clearCesiumMap()
  console.log(!!filePath.value)
  if (filePath.value) {
    initDrawRoute()
  } else {
@@ -513,8 +586,6 @@
  clearCesiumMap()
  store.commit('SET_WAYLINE_INFO', {
    isShow: false,
    wayline: {},
    position: null,
  })
})
</script>
@@ -655,16 +726,27 @@
        align-items: center;
        .s-event-icon {
          width: 25px;
          height: 25px;
          width: 20px;
          height: 20px;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 2px;
          margin-right: 3px;
          overflow: hidden;
          &:hover {
            background-color: #409eff;
          }
          img {
            width: 70%;
          }
        }
        .active-event {
          background-color: #409eff;
        }
      }
      &:hover {