yjhtgl-web/src/components/Map/YztMap/DistributionMap.vue

<template>
  <div ref="containerRef" class="map-container">
    <div ref="mapRef" id="YztMap" class="map-container" :style="{ width: width, height: height }"></div>
    <div class="level-box">
      <i class="left-decoration" />
      <div class="box">
        <div v-show="!hideBox" class="box2">
          <div class="box-title">{{ legendTitle }}</div>
          <div v-for="(item, index) in legend" :key="index" class="box-item">
            <div class="checked-box" @click="handleClick(item)">
              <i :class="!!item.checked ? 'checked' : 'unchecked'" />
              <div class="text">{{ item.name }}</div>
            </div>
            <div class="line" :style="{ backgroundColor: item.color }" />
          </div>
        </div>
        <div class="btn" @click="hideBox = !hideBox">{{ hideBox ? '展开' : '隐藏' }}</div>
      </div>
      <i class="right-decoration" />
    </div>
  </div>
</template>

<script setup lang="ts">
import 'ol/ol.css';
import mmJson from '@/assets/json/mm.json';
import { olMap } from '@/utils/olMap/olMap';
import { deepClone } from '@/utils';
interface Props {
  activeMap: string;
  points?: [];
  distributionData?: [];
  legendTitle?: string;
}
const containerScale = inject('containerScale');
const props = withDefaults(defineProps<Props>(), {
  legendTitle: '风险等级'
});
const emits = defineEmits(['update:drawing', 'selectGraphics']);

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

// 监听地图类型变化
watch(
  () => props.activeMap,
  () => {
    if (!map) return;
    const id = props.activeMap === 'imageMap' ? ['YZT1640925052482', 'YZT1695608158269'] : ['YZT1708679726700', 'YZT1695608158269'];
    map.replaceLayers(id);
  }
);
watch(
  () => props.points,
  () => {
    if (props.points) {
      map.addMarker(props.points);
    }
  },
  {
    deep: true
  }
);
let legend = ref([]);
// 更新分布图数据
const updateMask = () => {
  if (!map || !map.createMask) return;
  const data = [];
  legend.value.forEach((item) => {
    if (!!item.checked) {
      data.push(item);
    }
  });
  map.createMask(data);
};
watch(
  () => props.distributionData,
  () => {
    const data = deepClone(props.distributionData);
    data.forEach((item) => {
      item.checked = true;
    });
    legend.value = data;
    updateMask();
  },
  {
    deep: true
  }
);

const init = () => {
  const id = props.activeMap === 'imageMap' ? ['YZT1640925052482', 'YZT1695608158269'] : ['YZT1708679726700', 'YZT1695608158269'];
  map = new olMap({
    dom: mapRef.value,
    id: id,
    center: mapState.center,
    zoom: mapState.zoom,
    minZoom: mapState.minZoom,
    maxZoom: mapState.maxZoom,
    // 加载完成事件
    onLoadCompleted: (yMap) => {
      yztMap = yMap;
      map.createVecByJson(mmJson, '茂名市');
      handleResize();
      map.addMarker(props.points);
      map.createMask(legend.value);
    }
  });
};
const addMarker = (points) => {
  map.addMarker(points);
};
const clearMarker = () => {
  map.clearMarker();
};
const handleClick = (item) => {
  item.checked = !item.checked;
  updateMask();
};

defineExpose({ addMarker, clearMarker });
const handleResize = () => {
  let containerScaleData = !!containerScale ? containerScale() : {
    scaleX: 1,
    scaleY: 1
  };
  const containerWidth = containerRef.value.clientWidth * containerScaleData.scaleX;
  const containerHeight = containerRef.value.clientHeight * containerScaleData.scaleY;
  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;
  box-sizing: border-box;
  .level-box {
    position: absolute;
    bottom: 20px;
    left: 20px;
    display: flex;
    align-items: center;
    .left-decoration {
      display: inline-block;
      width: 6px;
      height: 58px;
      background: url('@/assets/images/censusDataAnalysis/decoration1.png') no-repeat;
      background-size: 100% 100%;
    }
    .right-decoration {
      display: inline-block;
      width: 5px;
      height: 58px;
      background: url('@/assets/images/censusDataAnalysis/decoration2.png') no-repeat;
      background-size: 100% 100%;
    }
    .box {
      //padding: 0 3px 0 13px;
      height: 53px;
      background: url('@/assets/images/censusDataAnalysis/box3.png') no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      color: #ffffff;
      .box-title {
        width: 38px;
        font-size: 14px;
        letter-spacing: 3px;
        margin-right: 9px;
        margin-left: 10px;
      }
      .box-item {
        .checked-box {
          display: flex;
          align-items: center;
          margin-bottom: 3px;
          cursor: pointer;
          .checked {
            display: inline-block;
            width: 12px;
            height: 12px;
            background: url('@/assets/images/censusDataAnalysis/checked2.png') no-repeat;
            background-size: 100% 100%;
            margin-right: 5px;
          }
          .unchecked {
            display: inline-block;
            width: 12px;
            height: 12px;
            background: url('@/assets/images/censusDataAnalysis/checked1.png') no-repeat;
            background-size: 100% 100%;
            margin-right: 5px;
          }
          .text {
            font-size: 12px;
          }
        }
        .line {
          width: 70px;
          height: 9px;
        }
      }
      .box2 {
        margin-right: 22px;
        display: flex;
        align-items: center;
      }
      .btn {
        width: 20px;
        height: 49px;
        font-size: 12px;
        background: url('@/assets/images/censusDataAnalysis/btn2.png') no-repeat;
        background-size: 100% 100%;
        text-align: center;
        display: flex;
        align-items: center;
        cursor: pointer;
      }
    }
  }
}
</style>