src/components/centerMap.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="map-center-warp">
-    <!-- <img :src="getAssetsFile('images/vsualized/gmmap.png')" class="map-img" /> -->
+    <img :src="getAssetsFile('images/vsualized/gmmap.png')" class="map-img" />
     <div class="map-pos">
-      <custom-echart-maps :chart-data="chartsData.valData" height="100%" width="100%" :option="chartsData.option" :geo="geoData" :name="mapName" />
+      <custom-echart-maps :chart-data="chartsData.valData" height="100%" :option="chartsData.option" :geo="geoData" :name="mapName" />
     </div>
   </div>
 </template>
@@ -43,68 +43,41 @@ const chartsData = reactive({
         // saveAsImage: {},
       },
     },
-    geo3D: {
+    geo: {
       map: mapName.value,
       roam: true,
       zoom: 0.9,
-      show: true,
-      zlevel: -2, // 必须设置，
-      viewControl: {
-        distance: 110,
-        alpha: 60,
-        beta: 0,
-        minBeta: -360,
-        maxBeta: 720,
-        // 限制视角，使不能旋转缩放平移
-        // rotateSensitivity: 0,
-        // zoomSensitivity: 0,
-        // panSensitivity: 0,
-      },
+      show: false,
       itemStyle: {
-        // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
-        color: 'rgba(48,160,187,0.8)', // 地图板块的颜色
-        opacity: 1, // 图形的不透明度 [ default: 1 ]
-        borderWidth: 1.5, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域   [ default: 0 ]
-        borderColor: '#4bffb4', // 图形描边的颜色。[ default: #333 ]
-      },
-      label: {
-        show: true,
-        distance: 0,
-        color: '#000',
-        padding: [6, 4, 2, 4],
-        borderRadius: 4,
-        backgroundColor: 'rgba(255,255,255,0.2)',
-        textStyle: {
-          fontSize: 12,
-          color: '#E87813', // 地图初始化区域字体颜色
-          borderWidth: 0,
-          borderColor: '#000',
-        },
+        normal: {
+          areaColor: '#1f77b4', // 正常状态下的区域颜色
+          borderColor: '#000', // 区域边界颜色
         },
         emphasis: {
-        //高亮状态的效果
-        label: {
-          show: true,
-          color: '#fff',
-        },
-        itemStyle: {
-          // show: false,
-          color: {
-            type: 'linear', // 线性渐变
-            x: 0,
-            y: 0,
-            x2: 0,
-            y2: 1,
-            colorStops: [
-              { offset: 0, color: '#45bfe9' },
-              { offset: 1, color: '#01589c' },
-            ],
-            global: false, // 默认为 false
-          },
+          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: '闪烁散点',
@@ -146,50 +119,20 @@ const chartsData = reactive({
   },
   valData: [
     {
-      map: mapName.value,
+      name: '镇边界',
+      type: 'map',
+      mapType: mapName.value,
       roam: true,
-      zoom: 0.9,
-      show: true,
+      zoom: 1.2,
       itemStyle: {
-        // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
-        color: 'rgba(48,160,187,0.8)', // 地图板块的颜色
-        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',
-        },
+        normal: {
+          borderColor: '#000', // 设置镇边界的颜色
+          borderWidth: 1, // 设置镇边界的宽度
+          areaColor: 'transparent', // 设置背景透明，只显示边界
         },
         emphasis: {
-        //高亮状态的效果
-        label: {
-          show: true,
-          color: '#fff',
-        },
-        itemStyle: {
-          // show: false,
-          color: {
-            type: 'linear', // 线性渐变
-            x: 0,
-            y: 0,
-            x2: 0,
-            y2: 1,
-            colorStops: [
-              { offset: 0, color: '#45bfe9' },
-              { offset: 1, color: '#01589c' },
-            ],
-          },
+          borderColor: '#fff',
+          borderWidth: 2,
         },
       },
     },