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

<template>
  <div ref="containerRef" class="map-container">
    <div ref="mapRef" id="YztMap" class="map-container" :style="{ width: width, height: height }"></div>
  </div>
</template>

<script setup lang="ts">
import 'ol/ol.css';
import { olMap } from '@/utils/olMap/olMap';

interface Props {
  activeMap: string;
  drawing: boolean;
  color: string;
  drawType: string;
  graphicsType: string;
}
const props = withDefaults(defineProps<Props>(), {});
const emits = defineEmits(['update:drawing', 'selectGraphics']);

const mapRef = ref(null);
const mapState = reactive({
  center: [110.93154257997, 21.669064031332],
  zoom: 9,
  minZoom: 6,
  maxZoom: 16,
  isThreeDimensional: false,
  // 是否显示比例尺
  showScale: true
});
const containerRef = ref();
const width = ref('100%');
const height = ref('100%');
let yztMap, map;

// 监听是否开启绘制
watch(
  () => props.drawing,
  (value) => {
    if (value) {
      map.drawGraphics(props.graphicsType);
    } else {
      map.closeDraw();
    }
  }
);

const init = () => {
  map = new olMap({
    dom: mapRef.value,
    id: 'YZT1715739306532',
    center: mapState.center,
    zoom: mapState.zoom,
    minZoom: mapState.minZoom,
    maxZoom: mapState.maxZoom,
    drawTool: {
      use: true,
      color: props.color,
      drawType: props.drawType,
      graphicsType: props.graphicsType,
      // 绘制完成事件
      onDrawCompleted: (data, overlaysData, obj) => {
        emits('selectGraphics', data, overlaysData.length.toString());
        // 点击空间分析
        obj.on('click', function () {
          // 没在编辑时
          if (!props.drawing) {
            emits('selectGraphics', data);
          }
        });

      }
    },
    // 加载完成事件
    onLoadCompleted: (map) => {
      yztMap = map;
      // initMouseTool(map);
      handleResize();
    }
  });
};
// 设置地图层级
const setMapZoom = (value) => {
  if (!yztMap) return;
  const view = yztMap.map.getView();
  if (value === 1) {
    view.setCenter([113.280637, 23.125178]);
    view.setZoom(7);
  } else if (value === 2) {
    view.setCenter([110.93154257997, 21.6690640313328]);
    view.setZoom(11);
  } else if (value === 3) {
    view.setCenter([110.93154257997, 21.669064031332]);
    view.setZoom(12);
  } else if (value === 4) {
    view.setCenter([110.93154257997, 21.669064031332]);
    view.setZoom(15);
  } else if (value === 5) {
    view.setCenter([110.93154257997, 21.669064031332]);
    view.setZoom(16);
  }
};
// 切换2D、3D
const switchThreeDimensional = () => {
  const view = yztMap.map.getView();
  mapState.isThreeDimensional = !mapState.isThreeDimensional;
  const pitch = mapState.isThreeDimensional ? 45 : 0;
  view.setPitch(pitch);
};
const handleResize = () => {
  const containerWidth = containerRef.value.clientWidth * (document.body.clientWidth / 8960);
  const containerHeight = containerRef.value.clientHeight * (document.body.clientHeight / 2520);
  width.value = containerWidth + 'px';
  height.value = containerHeight + 'px';
  yztMap.updateSize();
};
// 加载事件
onMounted(() => {
  init();
  window.addEventListener('resize', handleResize);
});
// 卸载事件
onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 100%;
  position: relative;
  .zoom-text {
    position: absolute;
    bottom: 8px;
    right: 75px;
    font-size: 14px;
  }
  .right-tool {
    position: absolute;
    bottom: 50px;
    right: 5px;
  }
  .model-btn {
    background-color: #022577;
    font-size: 14px;
    color: #889ee9;
    cursor: pointer;
    padding: 3px 3px;
    border-radius: 5px;
  }
  :deep(.amap-scalecontrol) {
    left: unset !important;
    background-color: unset !important;
    right: 74px;
  }
  :deep(.amap-scale-text) {
    width: 230px !important;
    text-align: left !important;
    font-size: 14px;
    padding-left: 20px;
  }
  :deep(.amap-scale-middle) {
    width: 228px !important;
  }
  :deep(.amap-scale-edgeright) {
    left: 228px !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;
  }
}
</style>