yjdp-web/src/views/globalMap/index.vue

<template>
  <div id="globalMap">
    <div :class="isComponent ? 'global-map' : 'global-map bg'">
      <MapLogical v-if="activeMap === 'logical'" :map-data="mapData" />
      <YMap v-else-if="['satellite2', 'satellite3'].includes(activeMap)" :activeMap="activeMap" />
<!--      <YztMap v-else-if="['satellite2', 'satellite3'].includes(activeMap)" ref="map2Ref" :active-map="activeMap" :pointType="pointType" />-->
      <Map v-else ref="mapRef" :active-map="activeMap" :pointType="pointType" />
      <!--左侧菜单-->
      <LeftMenu style="position: absolute; top: 20px; left: 20px" @click-menu="clickMenu" @select-search-marker="selectSearchMarker" />
      <!--右侧菜单-->
      <RightMenu ref="rightMenuRef" :pointType="pointType" />
      <!--更换地图类型-->
      <SwitchMapTool :active-map="activeMap" class="tool-box" @switch-map="switchMap" />
      <!--时间轴-->
      <TimeAxis />
    </div>
  </div>
</template>

<script lang="ts" setup name="globalMap">
import Map from '@/components/Map/index.vue';
import YztMap from '@/components/Map/YztMap/index.vue';
import MapLogical from '@/components/Map/MapLogical.vue';
import { iconList, logicalData } from './data/mapData';
import SwitchMapTool from '@/views/globalMap/SwitchMapTool.vue';
import LeftMenu from './LeftMenu.vue';
import TimeAxis from '@/components/TimeAxis/index.vue';
import { deepClone } from '@/utils';
import { getPointInfo } from '@/api/globalMap';
import RightMenu from './RightMenu/index.vue';
import { PointType } from '@/api/globalMap/type';

interface Props {
  isComponent?: boolean;
  width?: string;
  height?: string;
}

const props = withDefaults(defineProps<Props>(), {
  isComponent: false
});

const rightMenuRef = ref(null);
const mapData = reactive(logicalData);
let mapRef = ref(null);
let map2Ref = ref(null);
// logical vectorgraph satellite satellite2 satellite3
let activeMap = ref('vectorgraph');

const switchMap = (key) => {
  activeMap.value = key;
};

let pointType = ref<PointType[]>([]);
let markerList = ref([]);

const addMarkers = (item) => {
  const dom = activeMap.value === 'satellite2' ? map2Ref.value : mapRef.value;
  if (dom) {
    if (!item.checked) {
      let index = pointType.value.findIndex((item2) => item.component === item2.component);
      if (index > -1) {
        pointType.value.splice(index, 1);
      }
      if (pointType.value && pointType.value.length === 0) {
        dom.clearMarker('point');
        return;
      }
    } else {
      // 右侧图层分析状态
      item.checked2 = true;
      pointType.value.push(item);
    }
    let path = [];
    pointType.value.forEach((item) => {
      path.push(item.component);
    });
    getPointInfo(path.toString()).then((res) => {
      const data = res.data && res.data.list ? res.data?.list : [];
      markerList.value = data;
      data.forEach((item2) => {
        // 获取图标
        if (iconList[item2.dataType]) {
          item2.image = iconList[item2.dataType].image;
          item2.size = iconList[item2.dataType].size;
        } else {
          item2.image = iconList['common'].image;
          item2.size = iconList['common'].size;
        }
        if (item2.materia_name) {
          item2.name = item2.materia_name;
        }
        item2.parentId = item.component;
        item2.lnglat = [item2.longitude, item2.latitude];
      });
      dom.addMarker(data);
    });
  } else {
    item.checked = !item.checked;
  }
};
// 跳转指定地点
const toAddress = (item) => {
  const dom = activeMap.value === 'satellite2' ? map2Ref.value : mapRef.value;
  dom.setCenter(item);
};

let showDrawTools = ref(false);
// 右侧菜单

// 点击菜单
const clickMenu = (item) => {
  if (item.path === '1') {
    // 空间分析
    if (item.component === 'spatial') {
      showDrawTools.value = !showDrawTools.value;
    }
    rightMenuRef.value.updateMenu(item.checked ? '1' : '2', item);
  } else if (item.path === '2') {
    // 打点信息
    addMarkers(item);
    rightMenuRef.value.handleMenu('图层分析');
  }
};
// 点击搜索结果，添加标注
const selectSearchMarker = (item) => {
  const dom = activeMap.value === 'satellite2' ? map2Ref.value : mapRef.value;
  let item2 = deepClone(item);
  if (iconList[item.component]) {
    item2.image = iconList[item.component].image;
    item2.size = iconList[item.component].size;
  }
  dom.addSearchMarker(item2);
};

// 获取地图元素操作
const getMap = () => {
  if (['satellite2', 'satellite3'].includes(activeMap.value)) {
    return map2Ref.value.getMap();
  } else if (['vectorgraph', 'satellite'].includes(activeMap.value)) {
    return mapRef.value.getMap();
  }
  return {};
};
const getDrawTool = () => {
  if (['satellite2', 'satellite3'].includes(activeMap.value)) {
    return map2Ref.value.drawTool;
  } else if (['vectorgraph', 'satellite'].includes(activeMap.value)) {
    return mapRef.value.drawTool;
  }
  return {};
};
provide('getMap', getMap);
provide('getDrawTool', getDrawTool);
</script>

<style lang="scss" scoped>
#globalMap {
  width: 100%;
  height: 100%;
}
.bg {
  background: url('@/assets/images/bg.jpg') no-repeat 100% 100%;
  background-size: cover;
}
.global-map {
  width: 100%;
  height: 100%;
  position: relative;
  //overflow: hidden;
  .tool-box {
    position: absolute;
    right: 170px;
    bottom: 50px;
    z-index: 10;
    color: #fff;
  }
}
.box {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 300px;
  background-color: #041d55;
  display: flex;
  flex-direction: column;
  padding: 20px;
  color: #fff;
  font-size: 16px;
  height: 500px;
  max-height: 90%;
  div {
    line-height: 30px;
    cursor: pointer;
  }
}
.fixed {
  position: fixed !important;
}
</style>