迁移图

src/api/yunkun/index.js

@@ -8,3 +8,13 @@ export function getAreaData(query) {
     params: query,
   });
 }
+
+//覆盖身份
+
+export function getProvince(query) {
+  return request({
+    url: "/ykmap/line/searchCity",
+    method: "get",
+    params: query,
+  });
+}

src/views/nationwide.vue

@@ -15,10 +15,12 @@ import linePoint1 from "@/assets/images/linePoint1.png";
 import linePoint2 from "@/assets/images/linePoint2.png";
 import MarsMap from "@/components/mars-map";
 // import province from "@/assets/images/province.png";
+import { getProvince } from "@/api/yunkun/index.js";
 export default {
   data() {
     const basePathUrl = window.basePathUrl || "";
     return {
+      cityAttr: {},
       options: {
         scene: {
           center: {
@@ -80,7 +82,9 @@ export default {
     initChina() {
       mars3d.Util.fetchJson({ url: this.chinaUrl }).then((res) => {
         const arr = mars3d.Util.geoJsonToGraphics(res);
+
         arr.map((item, index) => {
+          this.cityAttr[item.attr.name] = item.attr;
           const polygonEntity = new mars3d.graphic.PolygonEntity({
             positions: item.positions,
             style: {
@@ -114,8 +118,8 @@ export default {
       });
     },
 
-    createEchartsLayer() {
-      const options = this.getEchartsOption();
+    async createEchartsLayer() {
+      const options = await this.getEchartsOption();
       const echartsLayer = new mars3d.layer.EchartsLayer(options);
       this.map.addLayer(echartsLayer);
       // 图表自适应
@@ -124,68 +128,97 @@ export default {
       });
     },
 
-    getEchartsOption() {
-      const items = [
-        {
-          level: 1,
-          name: "江苏",
-          label: "jiangsu",
-          value: [118.767413, 32.041544],
-          symbol: "",
-          symbolSize: [30, 30],
-        },
-        {
-          level: 2,
-          symbol: "",
-          name: "安徽",
-          label: "anhui",
-          category: 0,
-          active: true,
-          speed: 6,
-          value: [117.283042, 31.86119],
-          belong: "江苏",
-        },
-        {
-          level: 2,
-          symbol: "",
-          name: "浙江",
-          category: 0,
-          active: true,
-          speed: 6,
-          value: [120.153576, 30.287459],
-          belong: "江苏",
-        },
-        {
-          level: 2,
-          symbol: "",
-          name: "云南",
-          category: 0,
-          active: true,
-          speed: 6,
-          value: [102.712251, 25.040609],
-          belong: "江苏",
-        },
-        {
-          level: 2,
-          symbol: "",
-          name: "青海",
-          category: 0,
-          active: true,
-          speed: 6,
-          value: [101.778916, 36.623178],
-          belong: "江苏",
-        },
-        {
-          level: 2,
-          symbol: "",
-          name: "内蒙古自治区",
-          category: 0,
-          active: true,
-          speed: 6,
-          value: [111.670801, 40.818311],
-          belong: "江苏",
-        },
-      ];
+    async getEchartsOption() {
+      let res = await getProvince();
+
+      const items = res.data.map((item, index) => {
+        if (index == 0) {
+          item = {
+            level: 1,
+            name: item.city,
+            label: item.city,
+            value: this.cityAttr[item.city].center,
+            symbol: "",
+            symbolSize: [30, 30],
+          };
+        } else {
+          item = {
+            level: 2,
+            symbol: "",
+            name: item.city,
+            label: item.city,
+            category: 0,
+            active: true,
+            speed: 6,
+            value: this.cityAttr[item.city].center,
+            belong: res.data[0].city,
+          };
+        }
+
+        return item;
+      });
+
+      // const items = [
+      //   {
+      //     level: 1,
+      //     name: "江苏",
+      //     label: "jiangsu",
+      //     value: [118.767413, 32.041544],
+      //     symbol: "",
+      //     symbolSize: [30, 30],
+      //   },
+      //   {
+      //     level: 2,
+      //     symbol: "",
+      //     name: "安徽",
+      //     label: "anhui",
+      //     category: 0,
+      //     active: true,
+      //     speed: 6,
+      //     value: [117.283042, 31.86119],
+      //     belong: "江苏",
+      //   },
+      //   {
+      //     level: 2,
+      //     symbol: "",
+      //     name: "浙江",
+      //     category: 0,
+      //     active: true,
+      //     speed: 6,
+      //     value: [120.153576, 30.287459],
+      //     belong: "江苏",
+      //   },
+      //   {
+      //     level: 2,
+      //     symbol: "",
+      //     name: "云南",
+      //     category: 0,
+      //     active: true,
+      //     speed: 6,
+      //     value: [102.712251, 25.040609],
+      //     belong: "江苏",
+      //   },
+      //   {
+      //     level: 2,
+      //     symbol: "",
+      //     name: "青海",
+      //     category: 0,
+      //     active: true,
+      //     speed: 6,
+      //     value: [101.778916, 36.623178],
+      //     belong: "江苏",
+      //   },
+      //   {
+      //     level: 2,
+      //     symbol: "",
+      //     name: "内蒙古自治区",
+      //     category: 0,
+      //     active: true,
+      //     speed: 6,
+      //     value: [111.670801, 40.818311],
+      //     belong: "江苏",
+      //   },
+      // ];
 
       const lineColor = ["#fff", "#f6fb05", "#00fcff"];
 
@@ -205,6 +238,7 @@ export default {
         if (el.belong) {
           items.forEach((element) => {
             if (el.belong === element.name) {
+              console.log(dataArr[el.level - 1]);
               dataArr[el.level - 1].push([
                 {
                   coord: element.value,
@@ -238,7 +272,7 @@ export default {
               fontSize: 16,
               color: "#fff",
               textBorderColor: "#2aa4e8",
-              offset: [0, 20],
+              offset: [0, 10],
             },
           },
           itemStyle: {