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

<template>
  <div id="globalMap">
    <div class="global-map">
      <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" :point-type="pointType" />
      <Map v-else ref="mapRef" :active-map="activeMap" :point-type="pointType" @handle-show-video="handleShowVideo" @handleShowWarehouse="handleShowWarehouse" />
      <!--左侧菜单-->
      <LeftMenu style="position: absolute; top: 20px; left: 20px" @click-menu="clickMenu" @select-search-marker="selectSearchMarker" />
      <!--右侧菜单-->
      <RightMenu ref="rightMenuRef" :point-type="pointType" />
      <!--更换地图类型-->
      <SwitchMapTool :active-map="activeMap" class="tool-box" @switch-map="switchMap" />
      <!--时间轴-->
      <TimeAxis />
      <DrawTools v-if="showDrawTools" @handle-analysis-data="handleAnalysisData" />
      <NearbyVideos v-if="showNearbyVideos" v-model="showNearbyVideos" :location="location" />
      <MaterialDetail v-if="showWarehouse" v-model="showWarehouse" :warehouseData="warehouseData" />
    </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 MaterialDetail from './MaterialDetail.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';
import DrawTools from '@/views/globalMap/RightMenu/DrawTools.vue';

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

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.icon = iconList[item2.dataType].image;
          item2.image = iconList[item2.dataType].image;
          item2.imageHover = iconList[item2.dataType].imageHover;
          item2.size = iconList[item2.dataType].size;
        } else {
          item2.icon = iconList['common'].image;
          item2.image = iconList['common'].image;
          item2.imageHover = iconList['common'].imageHover;
          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);
    });
  }
};
// 跳转指定地点
const toAddress = (item) => {
  const dom = activeMap.value === 'satellite2' ? map2Ref.value : mapRef.value;
  dom.setCenter(item);
};

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

// 点击菜单
const clickMenu = (item, dataList) => {
  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') {
    let checked = item.checked ? '1' : '2';
    let index = findChecked(dataList, item.name);
    // 打点信息
    addMarkers(item);
    if (item.checked || (!item.checked && index === 0)) {
      rightMenuRef.value.updateMenu(
        checked,
        ['易涝隐患点', '无人机', '铁塔运行监测', '物资与装备', '通讯保障', '手机工作台'].includes(item.name) ? item : { name: '图层分析', meta: { icon: 'icon1' } }
      );
    }
  }
};
const findChecked = (dataList, name) => {
  let index = 0;
  dataList.forEach((item) => {
    if (item.name !== name && item.path === '2' && !!item.checked) {
      index++;
    }
    if (item.children && item.children.length > 0) {
      let res = findChecked(item.children, name);
      index += res;
    }
  });
  return index;
};
// 点击搜索结果，添加标注
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 handleAnalysisData = (data) => {
  rightMenuRef.value.handleMenu('空间分析', data);
};
// 获取地图元素操作
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 showDetail = (data, dataType) => {
  if (['satellite2', 'satellite3'].includes(activeMap.value)) {
    return map2Ref.value.handleHover(data, dataType);
  } else if (['vectorgraph', 'satellite'].includes(activeMap.value)) {
    return mapRef.value.handleHover(data, dataType);
  }
  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 {};
};
const getMarkers = () => {
  if (['satellite2', 'satellite3'].includes(activeMap.value)) {
    return map2Ref.value.getMarkers();
  } else if (['vectorgraph', 'satellite'].includes(activeMap.value)) {
    return mapRef.value.getMarkers();
  }
  return {};
};
let showNearbyVideos = ref(false);
let location = reactive([]);
// 显示附近视频
const handleShowVideo = (data) => {
  location = [data.longitude, data.latitude];
  showNearbyVideos.value = true;
};
let showWarehouse = ref(false);
let warehouseData = ref('');
const handleShowWarehouse = (data) => {
  warehouseData.value = data;
  showWarehouse.value = true;
};
// const handleResize = () => {
//   debugger
// }
// onMounted(() => {
//   mapRef.value.addEventListener('resize', handleResize);
// })

provide('getMap', getMap);
provide('showDetail', showDetail);
provide('getDrawTool', getDrawTool);
provide('getMarkers', getMarkers);
</script>

<style lang="scss" scoped>
#globalMap {
  width: 100%;
  height: 100%;
}
.global-map {
  width: 100%;
  height: 100%;
  position: relative;
  //overflow: hidden;
  .tool-box {
    position: absolute;
    right: 430px;
    bottom: 180px;
    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>