3d地图

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%" :option="chartsData.option" :geo="geoData" :name="mapName" />
+      <custom-echart-maps :chart-data="chartsData.valData" height="100%" width="100%" :option="chartsData.option" :geo="geoData" :name="mapName" />
     </div>
   </div>
 </template>
@@ -43,41 +43,68 @@ const chartsData = reactive({
         // saveAsImage: {},
       },
     },
-    geo: {
+    geo3D: {
       map: mapName.value,
       roam: true,
       zoom: 0.9,
-      show: false,
+      show: true,
+      zlevel: -2, // 必须设置，
+      viewControl: {
+        distance: 110,
+        alpha: 60,
+        beta: 0,
+        minBeta: -360,
+        maxBeta: 720,
+        // 限制视角，使不能旋转缩放平移
+        // rotateSensitivity: 0,
+        // zoomSensitivity: 0,
+        // panSensitivity: 0,
+      },
       itemStyle: {
-        normal: {
+        // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
-          areaColor: '#1f77b4', // 正常状态下的区域颜色
+        color: 'rgba(48,160,187,0.8)', // 地图板块的颜色
-          borderColor: '#000', // 区域边界颜色
+        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',
         },
-        emphasis: {
+      },
-          areaColor: '#ff7f0e', // 鼠标悬停时的区域颜色
+      emphasis: {
-          borderColor: '#fff', // 悬停时的边界颜色
+        //高亮状态的效果
+        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
+          },
         },
       },
     },
     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: '闪烁散点',
@@ -119,20 +146,50 @@ const chartsData = reactive({
   },
   valData: [
     {
-      name: '镇边界',
+      map: mapName.value,
-      type: 'map',
-      mapType: mapName.value,
       roam: true,
-      zoom: 1.2,
+      zoom: 0.9,
+      show: true,
       itemStyle: {
-        normal: {
+        // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
-          borderColor: '#000', // 设置镇边界的颜色
+        color: 'rgba(48,160,187,0.8)', // 地图板块的颜色
-          borderWidth: 1, // 设置镇边界的宽度
+        opacity: 1, // 图形的不透明度 [ default: 1 ]
-          areaColor: 'transparent', // 设置背景透明，只显示边界
+        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: {
+      },
-          borderColor: '#fff',
+      emphasis: {
-          borderWidth: 2,
+        //高亮状态的效果
+        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' },
+            ],
+          },
         },
       },
     },