feat:地图信息框点击

ZhangXianQiang

2024-03-08 dfa2e66389df106ef38a4fd621f2e3e0cf91ace8

 src/views/daoAnOffice/center-map.vue

@@ -1,12 +1,20 @@


<template>
  <div class="centermap">
    <div class="maptitle">
      <img src="@/assets/img/icon/map_title.png" alt="">
    </div>
    <div class="mapwrap">
      <div ref="map" class="map-style"></div>
      <CityMap @mapItemClick="mapItemClick" @cancleClick="cancleClick"></CityMap>

      <!-- <DialogType1></DialogType1>
      <DialogType2></DialogType2>
      <DialogType3></DialogType3>
      <DialogType4></DialogType4>
      <DialogType5></DialogType5>
      <DialogType6></DialogType6>
      <DialogType7></DialogType7>
      <DialogType8></DialogType8>
      <DialogType9></DialogType9> -->
    </div>

    <div class="map-info-container">
@@ -18,45 +26,45 @@
          <div class="icon">
            <img src="@/assets/img/icon/arrow_right.png" alt="">
          </div>
          <span class="title">都江堰市</span>
          <span class="title">{{ activeData.name ? activeData.name : '都江堰市' }}</span>
        </div>
      </div>
      <div class="info-content-container">
        <div class="info-item">
          <div class="info-lable">事故易发多发路段：</div>
          <div class="info-text">78</div>
          <div class="info-text">{{ activeData.data.type1 ? activeData.data.type1 : 0 }}</div>
        </div>
        <div class="info-item">
          <div class="info-lable">重点旅游通道：</div>
          <div class="info-text">12</div>
          <div class="info-text">{{ activeData.data.type2 ? activeData.data.type2 : 0 }}</div>
        </div>
        <div class="info-item">
          <div class="info-lable">都江堰景区：</div>
          <div class="info-text">5</div>
          <div class="info-text">{{ activeData.data.type3 ? activeData.data.type3 : 0 }}</div>
        </div>
        <div class="info-item">
          <div class="info-lable">警力配备：</div>
          <div class="info-text">265</div>
          <div class="info-text">{{ activeData.data.type4 ? activeData.data.type4 : 0 }}</div>
        </div>
        <div class="info-item">
          <div class="info-lable">打围施工：</div>
          <div class="info-text">12</div>
          <div class="info-text">{{ activeData.data.type5 ? activeData.data.type5 : 0 }}</div>
        </div>
        <div class="info-item">
          <div class="info-lable">交通事故易发点：</div>
          <div class="info-text">31</div>
          <div class="info-text">{{ activeData.data.type6 ? activeData.data.type6 : 0 }}</div>
        </div>
        <div class="info-item">
          <div class="info-lable">重点运输企业：</div>
          <div class="info-text">19</div>
          <div class="info-text">{{ activeData.data.type7 ? activeData.data.type7 : 0 }}</div>
        </div>
        <div class="info-item">
          <div class="info-lable">公交线路：</div>
          <div class="info-text">89</div>
          <div class="info-text">{{ activeData.data.type8 ? activeData.data.type8 : 0 }}</div>
        </div>
        <div class="info-item">
          <div class="info-lable">安全隐患：</div>
          <div class="info-text">3</div>
          <div class="info-text">{{ activeData.data.type9 ? activeData.data.type9 : 0 }}</div>
        </div>
      </div>
    </div>
@@ -65,71 +73,97 @@


<script setup>
import * as echarts from 'echarts';
import 'echarts-gl';
import { ref, onMounted, nextTick } from "vue";
import CityMap from './center/city-map.vue';

import mapData from '@/assets/map/dujiangyan.json';
import { ref,onMounted } from "vue";
const mapData = ref([
  {
    id: 1,
    name: '龙池镇',
    data: { type1: 1, type2: 2, type3: 4, type4: 5, type5: 12, type6: 31, type7: 19, type8: 10, type9: 20 },
  },
  {
    id: 2,
    name: '玉堂街道',
    data: { type1: 5, type2: 12, type3: 5, type4: 13, type5: 12, type6: 31, type7: 19, type8: 26, type9: 3 },
  },
  {
    id: 3,
    name: '青城山镇',
    data: { type1: 12, type2: 12, type3: 52, type4: 3, type5: 12, type6: 31, type7: 19, type8: 13, type9: 3 },
  },
  {
    id: 4,
    name: '石羊镇',
    data: { type1: 21, type2: 12, type3: 24, type4: 12, type5: 12, type6: 31, type7: 19, type8: 13, type9: 31 },
  },
  {
    id: 5,
    name: '幸福街道',
    data: { type1: 10, type2: 12, type3: 5, type4: 52, type5: 12, type6: 31, type7: 19, type8: 13, type9: 3 },
  },
  {
    id: 6,
    name: '银杏街道',
    data: { type1: 31, type2: 13, type3: 5, type4: 265, type5: 12, type6: 31, type7: 19, type8: 21, type9: 3 },
  },
  {
    id: 7,
    name: '灌口街道',
    data: { type1: 52, type2: 12, type3: 5, type4: 265, type5: 12, type6: 31, type7: 19, type8: 13, type9: 3 },
  },
  {
    id: 8,
    name: '奎光塔街道',
    data: { type1: 53, type2: 35, type3: 5, type4: 15, type5: 12, type6: 31, type7: 19, type8: 13, type9: 3 },
  },
  {
    id: 9,
    name: '天马镇',
    data: { type1: 13, type2: 2, type3: 5, type4: 51, type5: 12, type6: 31, type7: 19, type8: 12, type9: 15 },
  },
  {
    id: 10,
    name: '聚源镇',
    data: { type1: 13, type2: 35, type3: 65, type4: 24, type5: 12, type6: 35, type7: 3, type8: 42, type9: 24 },
  },
  {
    id: 11,
    name: '蒲阳街道',
    data: { type1: 6, type2: 6, type3: 63, type4: 42, type5: 12, type6: 31, type7: 19, type8: 89, type9: 3 },
  },
]);

const activeData = ref({
  name: '都江堰市',
  data: {},
});

echarts.registerMap('dujiangyan', mapData);
const mapItemClick = (id) => {
  activeData.value = mapData.value.find((item) => item.id === id);
}

const map = ref(null);
let mapChart = null;
const cancleClick = () => {
  activeData.value = {
    name: '都江堰市',
    data: totalNum(),
  };
}

const mapConfig = {
  geo3D: {
    map: "dujiangyan", //注册地图的名字
    roam: true, //开启鼠标缩放和平移漫游。默认不开启
    bottom: 80,
    left: 10,
    itemStyle: {
      color: "#4189f2", // 背景
      opacity: 0.7, //透明度
      borderWidth: 1.5, // 边框宽度
      borderColor: "#fff", // 边框颜色
      fontSize: 16, //
    },
    // 标签
    label: {
      show: true,
      color: "#fff", //地图初始化区域字体颜色
      fontSize: 18,
      formatter: function (params) {
        return params.name
      },
    },
    // 控制器
    viewControl: {
      beta: 80,
      alpha: 55,
      distance: 210,
      maxBeta: 180
    },
    // 灯光
    light: {
      main: {
        shadow: true,
        intensity: 1
      }
    },
    // 鼠标移入时样式
    emphasis: {
      itemStyle: {
        color: "#F63545"
      }
    }
  }
};
const totalNum = () => {
  let data = {};
  mapData.value.forEach((item) => {
    Object.keys(item.data).forEach((key) => {
      data[key] = data[key] ? data[key] + item.data[key] : item.data[key];
    });
  });
  return data;
}

onMounted(() => {
  nextTick(() => {
    setTimeout(() => {
      mapChart = echarts.init(map.value);
      mapChart.setOption(mapConfig, true);
    }, 1000);
  })
})
  cancleClick();
});

</script>

<style scoped lang="scss">
@@ -174,16 +208,17 @@
  width: 308px;
  position: absolute;
  left: 0;
  top: 0;
  top: 30px;
}

.map-info-container {
  width: 225px;
  position: absolute;
  right: 0;
  bottom: 200px;
  bottom: 120px;
  background: rgba(17, 34, 58, 0.6);
  border: 1px solid #29466A;
  z-index: 5;

  .info-title-container {
    width: 100%;
@@ -215,15 +250,17 @@
        font-style: italic;
        background: linear-gradient(180deg, #FFFFFF 0%, #70B2F4 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        // -webkit-text-fill-color: transparent;
      }
    }
  }

  .info-content-container {
    padding: 18px 20px;
    position: relative;
    padding: 10px 20px;
    margin-top: -40px;
    font-size: 14px;
    z-index: 2;

    .info-item {
      width: 100%;
@@ -232,6 +269,7 @@
      justify-content: space-between;
      color: #4481DD;
      line-height: 28px;

      .info-text {
        color: #fff;
      }
@@ -239,4 +277,13 @@
  }

}

.info-lable {
  font-family: 'PingFang SC' !important;
}

.test {
  position: absolute;
  top: 0;
}
</style>