DiKongGanZhiPingTai/src/views/demo/workmanagement/flightannotation/index.vue

<template>
  <div class="pathModal">
    <!-- 左侧目录 -->
    <div
      class="leftMenuDiv"
      :style="{
        width: leftMenuShow ? '275px' : '0px',
      }"
    >
      <PathLeftMenu
        ref="pathLeftMenuRef"
        :leftMenuShow="leftMenuShow"
        :allWorkspaceDataList="allWorkspaceDataList"
        :allAnnotationDataList="allAnnotationDataList"
        :nowShowAnnotationData="nowShowAnnotationData"
        @changeLeftMenuShow="changeLeftMenuShow"
        @handlerLocation="handlerLocation"
        @setNowShowAnnotationData="setNowShowAnnotationData"
        @setAllAnnotationData="setAllAnnotationData"
        @deleteAnnotation="deleteAnnotation"
      />
    </div>
    <!-- 地图 -->
    <div class="mapDiv" :style="{ width: dynamicWidth }">
      <PathMap
        ref="pathMapRef"
        :allAnnotationDataList="allAnnotationDataList"
        :nowShowAnnotationData="nowShowAnnotationData"
        @setNowShowAnnotationData="setNowShowAnnotationData"
        @setAllAnnotationData="setAllAnnotationData"
      />
    </div>
    <!-- 地图标注 -->
    <div class="annotationInfoDiv" v-if="annotationInfoShow">
      <PathAnnotationInfo
        :allAnnotationDataList="allAnnotationDataList"
        :nowShowAnnotationData="nowShowAnnotationData"
        @setNowShowAnnotationData="setNowShowAnnotationData"
        @closePathAnnotationInfo="closePathAnnotationInfo"
        @handlerLocation="handlerLocation"
        @deleteAnnotation="deleteAnnotation"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, computed, onMounted } from 'vue';
  import { PathLeftMenu, PathMap, PathAnnotationInfo } from './path';
  import { cloneDeep } from 'lodash-es';
  import imageJson from './json/image.json';
  import { GetWorkspaceList, GetAnnotationList, DeleteAnnotation } from '@/api/demo/mediaLibrary';
  import { WktToGeojson, GeojsonToWkt } from '@/components/MapboxMaps/src/WktGeojsonTransform';
  import { useMessage } from '@/hooks/web/useMessage';
  const { createMessage, createConfirm } = useMessage();

  const props = defineProps(['pathRecord']);
  // 地图宽度
  const dynamicWidth = computed(() => {
    let width = 0;
    // 左侧目录
    if (leftMenuShow.value) {
      width += 275;
    } else {
      width += 0;
    }
    // 地图标注
    if (annotationInfoShow.value) {
      width += 320;
    }
    return 'calc(100% - ' + width + 'px)';
  });

  // 地图ref
  const pathMapRef = ref();

  // 左侧目录是否显示----------------------------------------------------
  const pathLeftMenuRef = ref();
  const leftMenuShow = ref(true);
  function changeLeftMenuShow() {
    leftMenuShow.value = !leftMenuShow.value;
  }

  // 右侧标注信息是否显示----------------------------------------------------
  const annotationInfoShow = ref(false);
  // 关闭右侧标注
  function closePathAnnotationInfo() {
    annotationInfoShow.value = false;
    nowShowAnnotationData.value = {};
    pathMapRef.value.annotationRestoreDefault();
  }
  // 当前展示的标注信息
  const nowShowAnnotationData = ref();
  const allAnnotationDataList: any = ref([]);
  const allWorkspaceDataList: any = ref([]);
  // 设置当前展示的标注信息
  function setNowShowAnnotationData(value, restore = true) {
    if (value.id) {
      annotationInfoShow.value = true;
    } else {
      annotationInfoShow.value = false;
    }
    if (restore) {
      pathMapRef.value.annotationRestoreDefault();
    }
    nowShowAnnotationData.value = value;
  }
  // 刷新区域信息
  function setAllAnnotationData() {
    // 查询地图工作区域
    getAnnotationList();
  }
  // 查询地图标注
  function getAnnotationList(showThis = true) {
    GetWorkspaceList().then((result1) => {
      GetAnnotationList({}).then((result2) => {
        allWorkspaceDataList.value = result1;
        allAnnotationDataList.value = result2;
        if (allAnnotationDataList.value.length > 0) {
          allAnnotationDataList.value.forEach((annotation, index) => {
            let geomjson = WktToGeojson(annotation.geom);
            annotation = {
              ...annotation,
              properties: JSON.parse(annotation.properties),
              geomtype: getGeomType(annotation),
              coordinates: geomjson.coordinates,
            };
            allAnnotationDataList.value[index] = annotation;
          });
        }
        if (showThis) {
          setTimeout(() => {
            pathLeftMenuRef.value.updateShowMenuInfoList('地图标注');
          }, 50);
        }
      });
    });
  }

  // 删除标注
  function deleteAnnotation(value) {
    if (nowShowAnnotationData.value && nowShowAnnotationData.value.id == value.id) {
      annotationInfoShow.value = false;
      nowShowAnnotationData.value = {};
    }
    DeleteAnnotation({
      id: value.id,
    }).then((result) => {
      if (result) {
        // 刷新
        getAnnotationList();
        createMessage.success('删除成功');
      }
    });
  }

  // 移动位置
  function handlerLocation(position) {
    pathMapRef.value.handlerLocation([position.lng, position.lat]);
  }

  // 获取WKT类型
  function getGeomType(area) {
    let geom = area.geom;
    let radiusFlag = area.properties.indexOf('radius') > -1 ? true : false;
    // 点
    if (geom.indexOf('POINT') > -1 && !radiusFlag) {
      return 'Point';
    }
    // 线
    if (geom.indexOf('LINESTRING') > -1 && !radiusFlag) {
      return 'Polyline';
    }
    // 多边形
    if (geom.indexOf('POLYGON') > -1 && !radiusFlag) {
      return 'Polygon';
    }
    // 圈
    if (geom.indexOf('POLYGON') > -1 && radiusFlag) {
      return 'Circle';
    }
  }

  onMounted(() => {
    getAnnotationList();
  });
</script>
<style lang="less" scoped>
  .pathModal {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;

    .leftMenuDiv {
      position: relative;
      height: 100%;
    }

    .mapDiv {
      position: relative;
      height: 100%;
      // width: auto;
    }

    .annotationInfoDiv {
      position: relative;
      height: 100%;
      width: 320px;
    }

    .areaInfoDiv {
      position: relative;
      height: 100%;
      width: 320px;
    }

    .imageInfoDiv {
      position: relative;
      height: 100%;
      // width: 37%;
      width: 720px;
      // min-width: 720px;
    }
  }
</style>