yjdp-web/src/components/Map/index.vue

<template>
  <div ref="containerRef" class="map-container">
    <div id="aMap" class="map-container" :style="{ width: width, height: height }"></div>
    <!-- 右下工具  -->
    <div v-show="mapState.showScale" class="zoom-text">{{ mapState.zoom }}级</div>
    <div class="right-tool">
      <!-- 快捷缩放 -->
      <QuickZoom v-model:zoom="mapState.zoom" @change-step="setMapZoom" />
      <div class="flex" style="margin-top: 5px">
        <div class="model-btn" @click="switchThreeDimensional">{{ mapState.isThreeDimensional ? '3D' : '2D' }}</div>
        <div class="ruler-icon" style="margin-left: 5px" @click="changeScaleControl"></div>
      </div>
      <!-- 测距工具 -->
      <!--<div class="model-btn" @click="toggleRangingTool">-->
      <!--{{ isRanging ? '关闭测距' : '开启测距' }}-->
      <!--</div>-->
    </div>
  </div>
</template>

<script setup lang="ts" name="Map">
import QuickZoom from './quickZoom.vue';
import { useAMap } from '@/hooks/AMap/useAMap';
import { useDrawTool } from '@/hooks/AMap/useDrawTool';
import { useRuler } from '@/hooks/AMap/useRuler';
import { getPointInfoList } from '@/api/globalMap';
import { getDictLabel } from '@/utils/dict';
import { PointType } from '@/api/globalMap/type';
import {
  getEmergencyExpertDetails,
  getEmergencyShelterTypeDetails,
  getGasolinestationDetails,
  getHospitalDetails,
  getMiningcompanyDetails,
  getRescueMateriaDetails,
  getChemicalcompanyDetails,
  getSchoolDetails,
  getWaterloggedRoadsDetails,
  getShipRealtilmePositionDetails,
  getPeratingEenterpriseDetails,getUAVDetails
} from "@/api/globalMap/spatialAnalysis";
import { pointDetailTemplate } from '@/views/globalMap/data/mapData';

interface Props {
  activeMap: string;
  pointType: PointType[];
}

const containerScale = inject('containerScale');
const props = withDefaults(defineProps<Props>(), {});
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { point_type } = toRefs<any>(proxy?.useDict('point_type'));

const emits = defineEmits(['update:drawing', 'selectGraphics', 'unSelectGraphics', 'showTextEditBox', 'onDrawCompleted']);
const containerRef = ref();
const width = ref('100%');
const height = ref('100%');

const mapState = reactive({
  center: [110.93154257997, 21.669064031332],
  zoom: 15,
  minZoom: 6,
  maxZoom: 20,
  isThreeDimensional: false,
  // 是否显示比例尺
  showScale: true
});

let AMap, map, scale;

// 鼠标绘制工具
const drawTool = useDrawTool();
// 初始化地图
const { getAMap, getMap, switchMap, addMarker, addSearchMarker, clearMarker, getMarkers, getScale, showInfo } = useAMap({
  key: '30d3d8448efd68cb0b284549fd41adcf', // 申请好的Web端开发者Key，首次调用 load 时必填
  version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
  pitch: mapState.isThreeDimensional ? 45 : 0,
  zoom: mapState.zoom,
  center: [mapState.center[0], mapState.center[1]],
  dragEnable: true,
  scrollWheel: true,
  showScale: true,
  enableMouseTool: true,
  // 加载完成事件
  onLoadCompleted: () => {
    AMap = getAMap();
    map = getMap();
    scale = getScale();
    if (!['logical', 'vectorgraph'].includes(props.activeMap)) {
      switchMap(props.activeMap);
    } else {
      map.removeLayer();
    }
    map.on('zoomchange', zoomChangeHandler);
    drawTool.initMouseTool({ container: 'aMap', map, AMap });
    handleResize();
  },
  onMarkerClick: (data) => {
    // 多点位
    if (data.type === '1') {
      let path = [];
      props.pointType.forEach((item) => {
        path.push(item.component);
      });
      getPointInfoList({
        option: path.toString(),
        longitude: data.longitude.toString(),
        latitude: data.latitude.toString()
      }).then((res) => {
        const data2 = res.data.list;
        let content = document.createElement('div');
        content.className = 'point-info';
        let table = document.createElement('div');
        table.className = 'point-item';
        table.innerHTML = '<div>主题</div><div>名称</div>';
        content.appendChild(table);
        data2.forEach((item) => {
          item.longitude = data.longitude;
          item.latitude = data.latitude;
          const div = document.createElement('div');
          div.className = 'point-item';
          div.innerHTML = '<div>' + getDictLabel(point_type.value, item.dataType.toString()) + '</div><div>' + item.name + '</div>';
          div.addEventListener('click', () => handlePointDetails(item));
          content.appendChild(div);
        });
        showInfo(content, [data.longitude, data.latitude]);
      });
    } else {
      handlePointDetails(data);
    }
  }
});
const handlePointDetails = (data) => {
  let methodList = {
    '1': getEmergencyExpertDetails,
    '2': getRescueMateriaDetails,
    '3': getEmergencyShelterTypeDetails,
    '4': getWaterloggedRoadsDetails,
    '5': getSchoolDetails,
    '6': getHospitalDetails,
    '7': getGasolinestationDetails,
    '8': getMiningcompanyDetails,
    // '9': getChemicalcompanyDetails,
    '10': getShipRealtilmePositionDetails,
    '11': getChemicalcompanyDetails,
    '12': getChemicalcompanyDetails,
    '13': getChemicalcompanyDetails,
    '14': getChemicalcompanyDetails,
    '15': getUAVDetails
  };
  let method = methodList[data.dataType];
  if (!method) return;
  method(data.id).then((res) => {
    if (!!pointDetailTemplate[data.dataType]) {
      let content = document.createElement('div');
      content.className = 'point-info';
      for (let key in res.rows[0]) {
        let keyLabel = !!pointDetailTemplate[data.dataType][key] ? pointDetailTemplate[data.dataType][key] : key;
        const div = document.createElement('div');
        div.className = 'point-item';
        div.innerHTML = '<div>' + keyLabel + '</div><div>' + res.rows[0][key] + '</div>';
        content.appendChild(div);
      }
      showInfo(content, [data.longitude, data.latitude]);
    }
  });
};
// 监听地图类型变化
watch(
  () => props.activeMap,
  (value, oldValue) => {
    switchMap(props.activeMap);
  }
);
// watch(
//   () => props.mouseToolState,
//   () => {
//     if (props.drawing) {
//       drawGraphics(props.mouseToolState);
//     } else {
//       closeDraw();
//     }
//   },
//   {
//     deep: true
//   }
// );
// 缩放级别变化
const zoomChangeHandler = () => {
  mapState.zoom = map.getZoom();
};

// 切换比例尺
const changeScaleControl = () => {
  mapState.showScale = !mapState.showScale;
  if (mapState.showScale) {
    map.addControl(scale);
  } else {
    map.removeControl(scale);
  }
};

// 设置地图层级
const setMapZoom = (value) => {
  if (!map) return;
  if (value === 1) {
    map.setCenter([113.280637, 23.125178]);
    map.setZoom(7);
  } else if (value === 2) {
    map.setCenter([110.93154257997, 21.6690640313328]);
    map.setZoom(11);
  } else if (value === 3) {
    map.setCenter([110.93154257997, 21.669064031332]);
    map.setZoom(13);
  } else if (value === 4) {
    map.setCenter([110.93154257997, 21.669064031332]);
    map.setZoom(15);
  } else if (value === 5) {
    map.setCenter([110.93154257997, 21.669064031332]);
    map.setZoom(18);
  }
};

// 切换2D、3D
const switchThreeDimensional = () => {
  mapState.isThreeDimensional = !mapState.isThreeDimensional;
  const pitch = mapState.isThreeDimensional ? 45 : 0;
  map.setPitch(pitch);
};

const setCenter = (item) => {
  map.setCenter([item.longitude, item.latitude]);
};

defineExpose({ addMarker, addSearchMarker, setCenter, getMarkers, clearMarker, getMap, drawTool });
const handleResize = () => {
  const containerWidth = containerRef.value.clientWidth * containerScale().scaleX;
  const containerHeight = containerRef.value.clientHeight * containerScale().scaleY;
  width.value = containerWidth + 'px';
  height.value = containerHeight + 'px';
  map.resize();
};
onMounted(() => {
  window.addEventListener('resize', handleResize);
});
// 卸载事件
onUnmounted(() => {
  if (map) {
    map.off('zoomchange', zoomChangeHandler);
  }
  window.removeEventListener('resize', handleResize);
});
</script>

<style lang="scss" scoped>
@import 'map.scss';
.map-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  .zoom-text {
    position: absolute;
    bottom: 0;
    right: 170px;
    color: #eaf3fc;
    font-size: 25.73px;
    font-family: 'SourceHanSansCN';
  }
  .right-tool {
    position: absolute;
    bottom: 50px;
    right: 5px;
    z-index: 2;
  }
  .model-btn {
    background-color: #04327c;
    font-size: 25.73px;
    font-family: 'SourceHanSansCN';
    border: 1px solid #91cfff;
    color: #eaf3fc;
    cursor: pointer;
    padding: 3px 3px;
    border-radius: 5px;
  }
  .ruler-icon {
    width: 42px;
    height: 42px;
    background: url('@/assets/images/map/ruler.png') no-repeat;
    cursor: pointer;
  }
  :deep(.amap-scalecontrol) {
    left: unset !important;
    background-color: unset !important;
    right: vw(170);
    bottom: vw(0) !important;
  }
  :deep(.amap-scale-text) {
    text-align: left !important;
    padding-left: 20px;
    color: #eaf3fc;
    font-size: vw(25.73);
    font-family: 'SourceHanSansCN';
  }
  :deep(.amap-scale-edgeleft),
  :deep(.amap-scale-middle),
  :deep(.amap-scale-edgeright) {
    border: 1px solid #bfe1fc !important;
    background: transparent !important;
  }
  :deep(.amap-logo),
  :deep(.amap-copyright) {
    display: none !important;
  }
  /* 自定义测距工具样式 */
  :deep(.amap-ranger) {
    background-color: #ffffff;
    border: 1px solid #888888;
    border-radius: 5px;
    padding: 5px;
  }

  :deep(.amap-ranger .amap-toolbar) {
    color: #333;
    font-size: 12px;
    padding: 5px;
  }

  :deep(.amap-ranger .amap-toolbar button) {
    background-color: #022577;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 5px;
    margin-right: 5px;
    cursor: pointer;
  }

  :deep(.amap-ranger .amap-toolbar button:hover) {
    background-color: #1a3c75;
  }

  :deep(.amap-ranger .amap-toolbar .amap-toolbar-text) {
    color: #444;
    font-size: 14px;
  }
  :deep(.amap-marker) {
    font-size: 16px;
  }
}
</style>