update: 右键添加航点完成、kmz文件编辑等

GuLiMmo

2024-03-08 016de324c0145632532fcd5450b96a2d1291dac6

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

@@ -1,12 +1,26 @@
<template>
  <div class="route-edit-box">
    <div class="btn-group">
      <a-button type="text" @click="backPage">
        <template #icon>
          <ArrowLeftOutlined />
      <a-popover
        :visible="modfiyPopupShow"
        overlayClassName="popup-container"
        placement="leftBottom"
        :getPopupContainer="(triggerNode: any) => triggerNode.parentNode">
        <template #content>
          <div class="popup-text">返回将退出航线编辑器，您要保存吗？如果不保存，您更改的内容将会丢失。</div>
          <div class="btn-tool">
            <a-button size="small" class="btn-cancel" @click="modfiyPopupShow = false">取消</a-button>
            <a-button size="small" class="btn-cancel" @click="handleModfiySave(false)">不保存</a-button>
            <a-button size="small" type="primary" @click="handleModfiySave(true)">保存</a-button>
          </div>
        </template>
        返回
      </a-button>
        <a-button type="text" @click="backPage">
          <template #icon>
            <ArrowLeftOutlined />
          </template>
          返回
        </a-button>
      </a-popover>
      <div class="save-button" @click="saveWaylineFile">
        <SaveOutlined />
      </div>
@@ -34,10 +48,15 @@
        :key="index"
        :class="{ 'active-point': index == selectPointIndex }"
        @click="pointSelect(item, index)">
        <div class="graph">
          <div class="left"></div>
          <div class="right">{{ index + 1 }}</div>
        </div>
        <a-tooltip placement="top">
          <template #title>
            <span>{{ item.isUseGlobalHeight ? '跟随全局' : '不跟随全局' }}</span>
          </template>
          <div class="graph">
            <div class="left" :style="{ borderTopColor: item.isUseGlobalHeight ? '#61d396' : '#409eff' }"></div>
            <div class="right">{{ index + 1 }}</div>
          </div>
        </a-tooltip>
        <div class="graph-right">
          <div v-for="(event, index) in item.eventList" :key="index" class="s-event-icon">
            <a-tooltip placement="top">
@@ -88,6 +107,7 @@

interface tragetPoint {
  position: Cesium.Cartesian3
  isUseGlobalHeight: boolean
  eventList: eventParmas[]
}

@@ -246,7 +266,7 @@
      },
      {
        class: 'add-next-point',
        title: `在${Number(selectPointIndex.value) + 1}号航点前插入`,
        title: `在${Number(selectPointIndex.value) + 1}号航点后插入`,
      },
    ]
    const defaultEvents = [{ class: 'finally-point', title: '在最后航点新增航点' }]
@@ -320,6 +340,11 @@
    const entity: Cesium.Entity = global.$viewer.entities.add({
      position: createPointPosition,
    })
    const posterHeightRegStr = getKmlParams(kmlStr.value, true, {
      name: 'takeOffRefPointAGLHeight',
      findRegx: '([\\s\\S]*?)',
    }) || ['', 0]
    const posterHeight = Number(posterHeightRegStr[1])
    // 加入kml文件中
    const setting = {
      Point: {
@@ -327,27 +352,36 @@
      },
      index: tragetPointArr.value.length,
      height,
      ellipsoidHeight: height,
      ellipsoidHeight: height - posterHeight,
    }
    removeAllDataSource()
    removeAllPoint()
    if (className === 'finally-point') {
      removeAllDataSource()
      removeAllPoint()
      kmzUtils.writePoint(setting)
      kmzUtils.writePoint(setting, 'add')
      globalEntities.value.push(entity)
      mapDraw.drawWayline(globalEntities.value, kmlStr.value)
      tragetPointArr.value.push({
        position: createPointPosition,
        eventList: [],
      })
    }
    if (className === 'add-prev-point') {
      // console.log(1)
      kmzUtils.writePoint(setting, 'prev', selectPointIndex.value)
      globalEntities.value.splice(selectPointIndex.value, 0, entity)
      tragetPointArr.value.splice(selectPointIndex.value, 0, {
        position: createPointPosition,
        eventList: [],
      })
    }
    if (className === 'add-next-point') {
      // const index = selectPointIndex.value
      // globalEntities.value.splice(index, 0, entity)
      // console.log()
      kmzUtils.writePoint(setting, 'next', selectPointIndex.value)
      const index = _.cloneDeep(selectPointIndex.value + 1)
      globalEntities.value.splice(index, 0, entity)
      tragetPointArr.value.splice(index, 0, {
        position: createPointPosition,
        eventList: [],
      })
    }
    mapDraw.drawWayline(globalEntities.value, kmlStr.value)
    // clearCesiumMap()
    // createMapMarker(undefined, [...kmlEntities.value, entity])
  })
@@ -361,8 +395,25 @@
  }
}

const modfiyPopupShow = ref<boolean>(false)
const backPage = () => {
  emits('backFn')
  if (isModify.value) {
    modfiyPopupShow.value = true
  } else {
    mapDraw.clearWaylineData()
    kmlStr.value = ''
    emits('backFn')
  }
}
const handleModfiySave = (isSave: boolean) => {
  if (isSave) {
    saveWaylineFile()
    modfiyPopupShow.value = false
  } else {
    mapDraw.clearWaylineData()
    kmlStr.value = ''
    emits('backFn')
  }
}
// 清空画布
const clearCesiumMap = () => {
@@ -379,7 +430,22 @@
// 保存文件
const saveWaylineFile = () => {
  kmzUtils.save()
  mapDraw.clearWaylineData()
  kmlStr.value = ''
  emits('backFn')
}

// 判断当前文件是否被修改
const isModify = ref<boolean>(false)
watch(
  () => kmlStr.value,
  (val) => {
    isModify.value = true
  },
  {
    deep: true,
  },
)

onMounted(() => {
  // 清空画布
@@ -410,17 +476,48 @@
    align-items: center;
    justify-content: flex-start;

    :deep() {
      .popup-container {
        .ant-popover-content {
          .ant-popover-arrow,
          .ant-popover-inner {
            border-color: #282828;
            background-color: #282828;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
            .popup-text {
              color: #fff;
              width: 400px;
            }
            .btn-tool {
              margin-top: 10px;
              display: flex;
              justify-content: flex-end;
              .ant-btn {
                border: 0;
              }
              .btn-cancel {
                background-color: #3c3c3c;
                margin-right: 5px;
              }
            }
          }
        }
      }
    }
    .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;
@@ -472,6 +569,7 @@
    padding: 0;
    height: calc(100vh - 180px);
    overflow: auto;

    li {
      cursor: pointer;
      padding: 10px 0;
@@ -522,8 +620,10 @@
    }
  }
}

.active-point {
  background-color: #3c3c3c;

  .graph {
    .left {
      border-top-color: #f3bf4e !important;