地图8

src/views/about1/index.vue

@@ -10,7 +10,6 @@
       >
         <a-form-item label="alpha" name="beta">
           <a-input-number
-          
             v-model:value="form.geo3D.light.main.alpha"
             :min="0"
             :max="360"
@@ -19,7 +18,6 @@
         </a-form-item>
         <a-form-item label="beta" name="beta">
           <a-input-number
-         
             v-model:value="form.geo3D.light.main.beta"
             :min="0"
             :max="360"
@@ -29,17 +27,15 @@
 
         <a-form-item label="intensity" name="beta">
           <a-input-number
-      
             v-model:value="form.geo3D.light.main.intensity"
             :min="0"
             :max="360"
             @change="chartReLoad"
           />
         </a-form-item>
-    
+
         <a-form-item label="color" name="beta">
           <a-input
-        
             v-model:value="form.geo3D.itemStyle.color"
             type="color"
             @change="chartReLoad"
@@ -48,9 +44,7 @@
 
         <a-form-item label="metalness" name="beta">
           <a-input-number
-        
             v-model:value="form.geo3D.realisticMaterial.metalness"
-        
             @change="chartReLoad"
           />
         </a-form-item>
@@ -74,7 +68,7 @@ import * as echarts from "echarts";
 import "echarts-gl"; //3D地图插件
 import { onMounted, reactive, ref } from "vue";
 import img149 from "@/assets/img/about/149.png";
-import wenli1 from "@/assets/img/about/wenli.jpg";
+import wenli from "@/assets/img/about/wenli.jpg";
 var imageDom = document.createElement("img");
 imageDom.src = img149;
 // 定义echarts方法
@@ -85,39 +79,41 @@ let option = {
   },
   //热力图配置项
   visualMap: [
-    // {
-    //   type: "continuous",
-    //   text: ["xxx"],
-    //   calculable: true,
-    //   max: 250,
-    //   inPange: {
-    //     color: ["#87aa66", "#eba438", "#d94d4c"],
-    //   },
-    // },
+    {
+      type: "continuous",
+      text: ["xxx"],
+      calculable: true,
+      max: 250,
+      inPange: {
+        color: ["#87aa66", "#eba438", "#d94d4c"],
+      },
+    },
   ],
   //3D地图配置项
   geo3D: {
     map: "zhejiang",
     roam: true,
     instancing: true,
-    boxWidth: 877,
-    boxHeight: 866,
+    geo3DIndex: 0,
+    boxWidth: 400,
+    boxHeight: 10,
     regionHeight: 6,
     colorMaterial: {},
     groundPlane: {
       show: true,
-      color: "transplate",
-      realisticMaterial:{
-        detailTexture:""
-      }
+      color: "#ff4400",
+      realisticMaterial: {
+        detailTexture: "",
+      },
     },
     itemStyle: {
-      color: "rgba(0,225,255,0.65)",
+      color: "rgb(0,225,255)",
       opacity: 1,
       borderWidth: 4,
       borderColor: "#fff",
     },
     viewControl: {
+      //projection:'orthographic',
       autoRotate: false,
       autoRotateAfterStill: 3,
       maxDistance: 800,
@@ -145,22 +141,22 @@ let option = {
     },
     label: {
       show: false,
-      position: "top",
+     
       color: "#111", //地图初始化区域字体颜色
       fontSize: 14,
       lineHeight: 16,
+    
     },
     shading: "realistic",
     realisticMaterial: {
-      detailTexture: wenli1,
+      detailTexture: wenli,
       metalness: 0,
 
       metalnessAdjust:0,
     },
     lambertMaterial: {
-      detailTexture: wenli1,
+      detailTexture: wenli,
       metalness: 0,
-
       metalnessAdjust: 0,
     },
     light: {
@@ -177,42 +173,38 @@ let option = {
       ambient: {
         intensity: 0,
       },
-      ambientCubemap:{
-        specularIntensity:0
-      }
+      ambientCubemap: {
+        specularIntensity: 0,
+      },
     },
   },
-  // series: [
-  //   //3D柱状图配置项
-  //   {
-  //     name: "xxx",
-  //     type: "bar3D",
-  //     show: false,
-  //     coordinateSystem: "geo3D",
-  //     barSize: 3,
-  //     shading: "lambert",
-  //     opacity: 1,
-  //     bevelSize: 0.2,
-  //     label: {
-  //       show: false,
-  //       formatter: "{a}",
-  //     },
-  //     //自定义的data数组 value中数组的含义:[杭州的经度or纬度，要展示的3d柱状图数值大小]
-  //     data: [
-  //       { name: "杭州", value: [120.161693, 30.280059, 643] },
-  //       { name: "温州", value: [120.705869, 28.001095, 98] },
-  //       { name: "湖州", value: [120.094566, 30.899015, 72] },
-  //       { name: "嘉兴", value: [120.762045, 30.750912, 131] },
-  //       { name: "绍兴", value: [120.586673, 30.036519, 116] },
-  //       { name: "丽水", value: [119.929503, 28.472979, 40] },
-  //       { name: "衢州", value: [118.880768, 28.941661, 22] },
-  //       { name: "金华", value: [119.654027, 29.084455, 156] },
-  //       { name: "台州", value: [121.426996, 28.662297, 110] },
-  //       { name: "宁波", value: [121.556686, 29.880177, 163] },
-  //       { name: "舟山", value: [122.214339, 29.991092, 20] },
-  //     ],
-  //   },
-  // ],
+  series: [
+ 
+    //3D柱状图配置项
+    {
+      name: "xxx",
+      type: "scatter3D",
+      // show: true,
+      symbol: "pin",
+      distance: 10,
+      itemStyle:{
+ 
+        opacity:1
+      },
+      coordinateSystem: "geo3D",
+      zlevel: 99,
+      opacity: 1,
+      symbolSize: 40,
+      label: {
+        
+      },
+      //自定义的data数组 value中数组的含义:[杭州的经度or纬度，要展示的3d柱状图数值大小]
+      data: [
+        { name: "大连", value: [120.515835, 40.558131, 100] },
+        { name: "温州", value: [122.420392, 41.197939, 100] },
+      ],
+    },
+  ],
 };
 const chartMap = () => {
   // 重点：不要遗漏这句代码！！
@@ -228,7 +220,7 @@ const chartMap = () => {
 };
 const chartReLoad = () => {
   console.log(option);
-  myChart.setOption(option);
+  //myChart.setOption(option);
 };
 
 const form = reactive(option);