地图弹窗添加

src/components/centerMap.vue

@@ -2,8 +2,11 @@
   <div class="map-center-warp">
     <!-- <img :src="getAssetsFile('images/vsualized/gmmap.png')" class="map-img" /> -->
     <div class="map-pos">
-      <custom-echart-maps height="100%" width="100%" :option="chartsData.option" :geo="geoData" :name="mapName" />
+      <custom-echart-maps height="100%" width="100%" :option="chartsData.option" :geo="geoData" :name="mapName" @click="mapClick" />
     </div>
+
+    <el-dialog v-model="isShow" :title="currentMap.name + dialogTitle" width="360" :before-close="handleClose" custom-class="map-info-dialog">
+    </el-dialog>
   </div>
 </template>
 <script setup>
@@ -12,7 +15,12 @@ import { ref, reactive, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
 import geoJsonData from '../components/530926geo.json'; // 根据实际情况调整路径
 const route = useRoute();
-
+const props = defineProps({
+  dialogTitle: {
+    type: String,
+    default: '首页',
+  },
+});
 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;
@@ -150,10 +158,16 @@ const chartsData = reactive({
   },
 });
 
+let currentMap = reactive({});
+
 const mapClick = (data) => {
   isShow.value = true;
+  currentMap = data;
   console.info('mapClick', data);
 };
+const handleClose = () => {
+  isShow.value = false;
+};
 onMounted(() => {
   console.info('iconUrl', iconUrl);
 });
@@ -162,6 +176,28 @@ onMounted(() => {
 div {
   box-sizing: border-box;
 }
+::v-deep() {
+  .el-dialog {
+    background: url('@/assets/images/vsualized/mapopup.png') no-repeat left top;
+    min-height: 200px;
+    max-height: 500px;
+    overflow-y: auto;
+    background-size: 100% 100%;
+    padding: 16px;
+  }
+  .el-dialog__header {
+    margin-top: 10px;
+    text-align: left;
+    padding-left: 48px;
+    .el-dialog__title,
+    i {
+      color: #fff !important;
+    }
+    .el-dialog__headerbtn {
+      top: 8px !important;
+    }
+  }
+}
 .map-center-warp {
   width: 100%;
   text-align: center;

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

@@ -70,8 +70,8 @@ export default {
 
       onMapClick(({ name, data }) => {
         console.info('onMapClick点击区域:', name);
-        // console.info('onMapClick关联数据:', data);
+        console.info('onMapClick关联数据:', data);
-        // emit('click', { name, data });
+        emit('click', { name, data });
       });
       startAutoPlay({
         interval: 2000,

src/hooks/useEcharts.js

@@ -110,12 +110,13 @@ export const useEcharts = (elRef, theme = 'default') => {
   }
 
   function handleMapClick(params) {
+    console.info('handleMapClick', params);
     // 过滤非地图区域的点击事件
-    if (params.componentType === 'geo3D' || params.componentType === 'geo') {
+    if (params.seriesType === 'map3D' || params.seriesType === 'map') {
       // 获取点击区域信息
       const mapName = params.name;
       const regionData = params.data || {};
-
+      console.info('seriesType', params.seriesType);
       // 执行注册的回调函数
       if (typeof mapClickHandler === 'function') {
         mapClickHandler({

src/views/land/index.vue

@@ -24,7 +24,7 @@
       </div>
     </el-col>
     <el-col :span="12">
-      <centerMap></centerMap>
+      <centerMap :dialog-title="'土地资源'"></centerMap>
     </el-col>
     <el-col :span="6" class="right-charts">
       <div class="right-charts-item">