地图修改

src/components/centerMap.vue

@@ -2,21 +2,17 @@
   <div class="map-center-warp">
     <!-- <img :src="getAssetsFile('images/vsualized/gmmap.png')" class="map-img" /> -->
     <div class="map-pos">
-      <custom-echart-maps
+      <custom-echart-maps height="100%" width="100%" :option="chartsData.option" :geo="geoData" :name="mapName" />
-        :chart-data="chartsData.valData"
-        height="100%"
-        width="100%"
-        :option="chartsData.option"
-        :geo="geoData"
-        :name="mapName"
-        @click="mapClick"
-      />
     </div>
   </div>
 </template>
 <script setup>
 import { isEmpty, getAssetsFile } from '@/utils';
 import { ref, reactive, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
+
 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;
@@ -24,7 +20,7 @@ var iconUrl = getAssetsFile('images/vsualized/gmmap2.png').href;
 const isShow = ref(false);
 import geoJsonData from '../components/530926geo.json'; // 根据实际情况调整路径
 let geoData = geoJsonData;
-let mapName = ref('ZJ');
+let mapName = ref('ZJ' + route.name);
 const chartsData = reactive({
   option: {
     title: {
@@ -102,131 +98,8 @@ const chartsData = reactive({
     },
     series: [
       // 闪烁散点图系列
-      {
-        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: [
-    {
-      map: mapName.value,
-      roam: true,
-      zoom: 0.9,
-      show: true,
-      itemStyle: {
-        // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
-        color: 'rgba(75,255,180,0.2)', // 地图板块的颜色
-        opacity: 1, // 图形的不透明度 [ default: 1 ]
-        borderWidth: 1.5, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域   [ default: 0 ]
-        borderColor: 'rgba(92, 184, 238, 1)', // 图形描边的颜色。[ default: #333 ]
-      },
-      label: {
-        show: true,
-        distance: 0,
-        color: '#000',
-        padding: [6, 4, 2, 4],
-        borderRadius: 4,
-        backgroundColor: 'rgba(255,255,255,.66)',
-        textStyle: {
-          fontSize: 12,
-          color: '#E87813', // 地图初始化区域字体颜色
-          borderWidth: 0,
-          borderColor: '#000',
-        },
-      },
-      // emphasis: {
-      //   //高亮状态的效果
-      //   label: {
-      //     show: true,
-      //     color: '#fff',
-      //   },
-      //   itemStyle: {
-      //     // show: false,
-      //     areaColor: {
-      //       type: 'linear',
-      //       x: 0,
-      //       y: 0,
-      //       x2: 1,
-      //       y2: 0,
-      //       colorStops: [
-      //         { offset: 0, color: '#4bffb4' },
-      //         { offset: 1, color: '#4bffb4' },
-      //       ],
-      //     },
-      //   },
-      // },
-    },
-    // 闪烁散点图系列
-    {
-      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,
-    },
-  ],
 });
 
 const mapClick = (data) => {
@@ -238,9 +111,7 @@ const infoHide = () => {
   isShow.value = false;
 };
 
-onMounted(() => {
+onMounted(() => {});
-  console.info('iconUrl', iconUrl);
-});
 </script>
 <style lang="scss" scoped>
 div {

src/components/custom-echart-maps/index.vue

@@ -43,7 +43,7 @@ export default {
   emits: ['click'],
   setup(props, { emit }) {
     const chartRef = ref(null);
-    const { setOptions, getInstance, resize, registerMap, startAutoPlay } = useEcharts(chartRef);
+    const { setOptions, getInstance, resize, regMap, startAutoPlay, onMapClick } = useEcharts(chartRef);
     const option = reactive({
       // series: [],
     });
@@ -63,25 +63,23 @@ export default {
     );
 
     function initCharts() {
+      regMap(props.name, props.geo);
       if (props.option) {
         Object.assign(option, cloneDeep(props.option));
       }
-      // option.series = props.chartData;
       setOptions(option);
+
+      onMapClick(({ name, data }) => {
+        console.info('onMapClick点击区域:', name);
+        console.info('onMapClick关联数据:', data);
+        emit('click', { name, data });
+      });
       startAutoPlay({
         interval: 2000,
         seriesIndex: 0,
         showTooltip: true,
       });
-      registerMap(props.name, props.geo);
       resize();
-      getInstance()?.off('click', onClick);
-      getInstance()?.on('click', onClick);
-    }
-
-    function onClick(params) {
-      console.info('地图onClick', params);
-      emit('click', params);
     }
 
     return { chartRef };

src/components/subTop.vue

@@ -7,7 +7,7 @@
       }"
       class="title-top-bg"
     ></div>
-    <span class="title-top-content" :style="{ 'text-align': left }">{{ topTitle || '--' }}</span>
+    <span class="title-top-content" :style="{ 'text-align': 'left' }">{{ topTitle || '--' }}</span>
   </div>
 </template>
 <script setup>

src/hooks/useEcharts.js

@@ -1,4 +1,4 @@
-import { unref, nextTick, watch, computed, ref } from 'vue';
+import { unref, nextTick, watch, computed, ref, markRaw } from 'vue';
 import { useDebounceFn, tryOnUnmounted } from '@vueuse/core';
 import { useTimeoutFn } from './useTimeout';
 import { useEventListener } from './useEventListener';
@@ -11,6 +11,8 @@ export const useEcharts = (elRef, theme = 'default') => {
   const currentIndex = ref(-1);
   const dataLength = ref(0);
 
+  let mapClickHandler = null;
+
   // 新增方法 - 启动轮播
   const startAutoPlay = (options = {}) => {
     const {
@@ -60,6 +62,7 @@ export const useEcharts = (elRef, theme = 'default') => {
   const getDarkMode = computed(() => {
     return theme === 'default' ? 'dark' : theme;
   });
+
   let chartInstance = null;
   let resizeFn = resize;
   const cacheOptions = ref({});
@@ -89,7 +92,8 @@ export const useEcharts = (elRef, theme = 'default') => {
         return;
       }
 
-      chartInstance = echarts.init(el, t);
+      chartInstance = markRaw(echarts.init(el, t));
+
       const { removeEvent } = useEventListener({
         el: window,
         name: 'resize',
@@ -105,6 +109,35 @@ export const useEcharts = (elRef, theme = 'default') => {
     });
   }
 
+  function handleMapClick(params) {
+    console.info('handleMapClick', params);
+    // 过滤非地图区域的点击事件
+    if (params.componentType === 'geo3D' || params.componentType === 'geo') {
+      // 获取点击区域信息
+      const mapName = params.name;
+      const regionData = params.data || {};
+
+      // 执行注册的回调函数
+      if (typeof mapClickHandler === 'function') {
+        mapClickHandler({
+          name: mapName,
+          data: regionData,
+          coordinates: params.event?.event?.point,
+          // originalParams: params
+        });
+      }
+    }
+  }
+
+  function onMapClick(handler) {
+    mapClickHandler = handler;
+
+    // 返回解绑方法
+    return () => {
+      mapClickHandler = null;
+    };
+  }
+
   function setOptions(options = {}, clear = true) {
     const mergedOptions = {
       animation: true,
@@ -132,6 +165,8 @@ export const useEcharts = (elRef, theme = 'default') => {
         clear && chartInstance?.clear();
 
         chartInstance?.setOption(unref(getOptions));
+        chartInstance.off('click'); // [!code ++]
+        chartInstance.on('click', handleMapClick); // [!code ++]
       }, 30);
     });
   }
@@ -145,12 +180,16 @@ export const useEcharts = (elRef, theme = 'default') => {
    * @param {string} mapName - 地图名称
    * @param {object} geoJSON - GeoJSON 数据
    */
-  function registerMap(mapName, geoJSON) {
+  function regMap(mapName, geoJSON) {
     if (!mapName || !geoJSON) {
       console.warn('地图名称或 GeoJSON 数据无效');
       return;
     }
-    echarts.registerMap(mapName, geoJSON);
+
+    console.info('getMap', echarts.getMap(mapName));
+    if (!echarts.getMap(mapName)) {
+      echarts.registerMap(mapName, geoJSON);
+    }
   }
 
   watch(
@@ -167,6 +206,9 @@ export const useEcharts = (elRef, theme = 'default') => {
   tryOnUnmounted(() => {
     stopAutoPlay(); // 清理定时器
     if (!chartInstance) return;
+    if (chartInstance) {
+      chartInstance.off('click', handleMapClick);
+    }
     removeResizeFn();
     chartInstance.dispose();
     chartInstance = null;
@@ -184,8 +226,9 @@ export const useEcharts = (elRef, theme = 'default') => {
     resize,
     echarts,
     getInstance: () => chartInstance,
-    registerMap,
+    regMap,
     startAutoPlay, // 暴露轮播方法
     stopAutoPlay,
+    onMapClick,
   };
 };

src/utils/echarts.js

@@ -31,6 +31,7 @@ import {
   TimelineComponent,
   CalendarComponent,
   GraphicComponent,
+  GeoComponent,
 } from 'echarts/components';
 
 import { CanvasRenderer } from 'echarts/renderers';
@@ -61,6 +62,7 @@ echarts.use([
   GaugeChart,
   ScatterChart,
   EffectScatterChart,
+  GeoComponent,
 ]);
 
 export default echarts;