航线绘制封装、kmz文件操作封装、航线编辑修改

GuLiMmo

2024-03-04 d20068f8f1c0d1f7f4077c2fdd7d46e0f5216285

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

@@ -17,17 +17,87 @@
            </ul>
            <div class="auto-low-light">
              <div class="title">自动低光</div>
              <a-switch />
              <a-tooltip
                placement="right"
                :title="tipDescriptionEnums.rowLightModeTip">
                <a-switch
                  v-model:checked="setting.orientedPhotoMode"
                  checkedValue="lowLightSmartShooting"
                  unCheckedValue="normalPhoto" />
              </a-tooltip>
            </div>
          </div>
          <!-- 爬升 -->
          <div class="climb-mode common">
            <a-tooltip
              placement="right"
              :title="tipDescriptionEnums.climbModeTip">
              <div class="mode-box">
                <a-radio-group
                  v-model:value="setting.flyToWaylineMode"
                  button-style="solid">
                  <a-radio-button value="safely">垂直爬升</a-radio-button>
                  <a-radio-button value="pointToPoint">倾斜爬升</a-radio-button>
                </a-radio-group>
              </div>
              <div class="parameter-tool">
                <div class="example-img">
                  <img :src="climbImage" alt="climb-img" />
                </div>
                <ul class="parameter-btn">
                  <li>+100</li>
                  <li>+10</li>
                  <li>
                    <span>{{ setting.takeOffSecurityHeight }}</span
                    >m
                  </li>
                  <li>-100</li>
                  <li>-10</li>
                </ul>
              </div>
            </a-tooltip>
          </div>
          <!-- 高度模式 -->
          <div class="height-mode common">
            <div class="title">航线高度模式</div>
            <div class="mode-box">
              <a-radio-group button-style="solid">
                <a-radio-button value="a">绝对高度</a-radio-button>
                <a-radio-button value="b">相对起飞高度</a-radio-button>
                <a-radio-button value="c">相对地面高度</a-radio-button>
              <a-radio-group
                v-model:value="setting.executeHeightMode"
                button-style="solid">
                <a-radio-button value="WGS84">绝对高度</a-radio-button>
                <a-radio-button value="relativeToStartPoint"
                  >相对起飞高度</a-radio-button
                >
                <a-radio-button value="realTimeFollowSurface"
                  >相对地面高度</a-radio-button
                >
              </a-radio-group>
            </div>
            <div class="parameter-tool">
              <div class="example-img">
                <img :src="imgs[0]" alt="height-img" />
              </div>
              <div class="parameter-btn">
                <li>+100</li>
                <li>+10</li>
                <li>
                  <span>{{ setting.executeHeight }}</span> m
                </li>
                <li>-100</li>
                <li>-10</li>
              </div>
            </div>
          </div>
          <!-- 航线速度 -->
          <div class="speed-setting common">
            <div class="title">全局航线速度</div>
            <div class="speed-box">
              <div class="subtract">-</div>
              <div class="text">
                <a-input-number :min="1" :max="15" class="value" v-model:value="setting.autoFlightSpeed">30</a-input-number>
                m / s
              </div>
              <div class="add">+</div>
            </div>
          </div>
        </div>
@@ -38,20 +108,36 @@
</template>

<script setup lang="ts">
import { min } from 'lodash'
import { tipDescriptionEnums } from './enums'

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

const waylineSetting = reactive({})
const climbImage = getSvgResource('climb.svg')
const imgs = [getSvgResource('xddm.svg')]

const setting = reactive({
  flyToWaylineMode: 'safely',
  takeOffSecurityHeight: 80,
  executeHeightMode: 'WGS84',
  executeHeight: 80,
  // normal: normalPhoto row-light: lowLightSmartShooting
  orientedPhotoMode: 'normalPhoto',
  autoFlightSpeed: 10
})
</script>

<style lang="scss" scoped>
.setting {
  margin-left: auto;
  .setting-content {
    width: 390px;
    height: 50vh;
    max-height: 80vh;
    overflow-y: auto;
    color: #fff;
    .common {
      background-color: #232323;
@@ -91,7 +177,8 @@
        }
      }
    }
    .height-mode {
    .height-mode,
    .climb-mode {
      .mode-box {
        margin-top: 10px;
        :deep() {
@@ -115,6 +202,100 @@
          }
        }
      }
      .parameter-tool {
        margin-top: 15px;
        display: flex;
        .example-img {
          flex: 3;
          flex-shrink: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          img {
            width: 100%;
          }
        }
        .parameter-btn {
          flex: 1;
          padding: 0;
          margin: 0;
          flex-shrink: 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          li {
            width: 50px;
            border-radius: 3px;
            padding: 2px 0;
            list-style-type: none;
            cursor: pointer;
            background-color: #3c3c3c;
            margin-bottom: 5px;
            text-align: center;
            font-weight: bold;
            transition: all 0.3s ease-in-out;
            &:nth-child(3) {
              width: 100%;
              background-color: transparent;
              cursor: auto;
              span {
                color: #409eff;
                font-size: 23px;
                font-weight: bolder;
                margin-right: 5px;
              }
            }
            &:not(:nth-child(3)) {
              &:hover {
                background-color: #5d5f61;
              }
            }
          }
        }
      }
    }
    .speed-setting {
      .speed-box {
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .text {
          font-weight: bolder;
          .value {
            color: #409eff;
            width: 60px;
            font-size: 30px;
            background-color: transparent;
            border: 0;
            :deep() {
              .ant-input-number-handler-wrap {
                display: none;
              }
              .ant-input-number-input-wrap {
                input {
                  font-weight: bolder;
                }
              }
            }
          }
        }
        .subtract,
        .add {
          width: 32px;
          height: 32px;
          text-align: center;
          line-height: 32px;
          font-size: 20px;
          font-weight: bolder;
          background-color: #3c3c3c;
          border-radius: 3px;
          cursor: pointer;
          &:hover {
            background-color: #5d5f61;
          }
        }
      }
    }
  }
}