daimp-front/sub-government-screen-service/src/components/centerMap.vue

<template>
  <div class="map-center-warp">
    <img :src="getAssetsFile('images/vsualized/gmmap.png')" class="map-img" />
    <div class="map-pos">
      <custom-echart-maps :chart-data="chartsData.valData" height="100%" :option="chartsData.option" :geo="geoData" :name="mapName" />
    </div>
  </div>
</template>
<script setup>
import { isEmpty, getAssetsFile } from '@/utils';
import { ref, reactive, onMounted } from 'vue';
var aspectScale = 0.8807505292367753;
// var iconUrl = 'http://localhost:9529/sub-government-screen-service/src/assets/images/vsualized/home/partbg.png';
// var iconUrl = getAssetsFile('images/vsualized/gmmap.png').href;
var iconUrl = getAssetsFile('images/vsualized/gmmap2.png').href;

import geoJsonData from '../components/530926geo.json'; // 根据实际情况调整路径
let geoData = geoJsonData;
let mapName = ref('ZJ');
const chartsData = reactive({
  option: {
    title: {
      text: '',
      left: 'center',
    },
    tooltip: {
      trigger: 'item',
      formatter: function (params) {
        if (params.seriesType === 'effectScatter') {
          return `${params.name}: (${params.value[0]}, ${params.value[1]})`;
        }
        return params.name;
      },
    },
    toolbox: {
      show: false,
      orient: 'vertical',
      left: 'right',
      top: 'center',
      feature: {
        // dataView: { readOnly: false },
        // restore: {},
        // saveAsImage: {},
      },
    },
    geo: {
      map: mapName.value,
      roam: true,
      zoom: 1.1,
      show: false,
      itemStyle: {
        normal: {
          areaColor: '#1f77b4', // 正常状态下的区域颜色
          borderColor: '#000', // 区域边界颜色
        },
        emphasis: {
          areaColor: '#ff7f0e', // 鼠标悬停时的区域颜色
          borderColor: '#fff', // 悬停时的边界颜色
        },
      },
    },
    series: [
      // {
      //   name: '镇边界',
      //   type: 'map',
      //   mapType: mapName.value,
      //   roam: true,
      //   zoom: 1.2,
      //   itemStyle: {
      //     normal: {
      //       borderColor: '#000', // 设置镇边界的颜色
      //       borderWidth: 1, // 设置镇边界的宽度
      //       areaColor: 'transparent', // 设置背景透明，只显示边界
      //     },
      //     emphasis: {
      //       borderColor: '#fff',
      //       borderWidth: 2,
      //     },
      //   },
      // },
      // 闪烁散点图系列
      {
        name: '闪烁散点',
        type: 'effectScatter', // 使用 effectScatter 类型
        coordinateSystem: 'geo',
        data: [
          // 示例数据点，实际应用中应替换为真实的数据
          {
            name: '孟定镇',
            value: [99.081993, 23.554045, 100], // 经度, 纬度, 数值
            itemStyle: {
              color: '#FF0000', // 孟定镇的颜色
            },
          },
          {
            name: '勐永镇',
            value: [99.406653, 23.534142, 80], // 经度, 纬度, 数值
            itemStyle: {
              color: '#00FF00', // 勐永镇的颜色
            },
          },
        ],
        symbolSize: function (val) {
          return val[2] ? val[2] / 10 : 10; // 如果没有数值，默认大小
        },
        label: {
          formatter: '{b}',
          position: 'right',
          show: false,
        },
        rippleEffect: {
          period: 4, // 波纹动画周期
          scale: 3, // 波纹缩放比例
          brushType: 'stroke', // 波纹绘制方式：'stroke' 或 'fill'
        },
        hoverAnimation: false,
      },
    ],
  },
  valData: [
    {
      name: '镇边界',
      type: 'map',
      mapType: mapName.value,
      roam: true,
      zoom: 1.2,
      itemStyle: {
        normal: {
          borderColor: '#000', // 设置镇边界的颜色
          borderWidth: 1, // 设置镇边界的宽度
          areaColor: 'transparent', // 设置背景透明，只显示边界
        },
        emphasis: {
          borderColor: '#fff',
          borderWidth: 2,
        },
      },
    },
    // 闪烁散点图系列
    {
      name: '闪烁散点',
      type: 'effectScatter', // 使用 effectScatter 类型
      coordinateSystem: 'geo',
      data: [
        // 示例数据点，实际应用中应替换为真实的数据
        {
          name: '孟定镇',
          value: [99.081993, 23.554045, 100], // 经度, 纬度, 数值
          itemStyle: {
            color: '#FF0000', // 孟定镇的颜色
          },
        },
        {
          name: '勐永镇',
          value: [99.406653, 23.534142, 80], // 经度, 纬度, 数值
          itemStyle: {
            color: '#00FF00', // 勐永镇的颜色
          },
        },
      ],
      symbolSize: function (val) {
        return val[2] ? val[2] / 10 : 10; // 如果没有数值，默认大小
      },
      label: {
        formatter: '{b}',
        position: 'right',
        show: false,
      },
      rippleEffect: {
        period: 4, // 波纹动画周期
        scale: 3, // 波纹缩放比例
        brushType: 'stroke', // 波纹绘制方式：'stroke' 或 'fill'
      },
      hoverAnimation: false,
    },
  ],
});

onMounted(() => {
  console.info('iconUrl', iconUrl);
});
</script>
<style lang="scss" scoped>
div {
  box-sizing: border-box;
}
.map-center-warp {
  width: 100%;
  text-align: center;
  position: relative;
  height: 90%;
  .map-img {
    width: 80%;
    height: 80%;
    position: absolute;
    bottom: 0;
    left: 50%;
    object-fit: contain;
    transform: translateX(-50%);
    max-width: 1000px;
    max-height: 1000px;
  }
  .map-pos {
    width: 80%;
    height: 80%;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>