修改地图

ruoyi-ui/src/views/board/map/index.vue

@@ -8,6 +8,7 @@
 import Chart from "../../../components/Charts/Chart";
 import * as echarts from 'echarts';
 import ChinaMapData from '@/utils/ChinaMapData.json'
+import gsByMap from '@/utils/map/gs_by.json'
 import axios from "axios";
 
 const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
@@ -31,7 +32,7 @@ export default {
       const random = (val = 1) => {
         return Math.ceil(Math.random() * val)
       }
-      let Point =  [
+      let Point = [
         {value: [120.3, 36.0], index: random(5), type: random(5), state: random(5)},
         {value: [104.065735, 30.659462], index: random(5), type: random(5), state: random(5)},
         {value: [123.1238, 42.1216], index: random(5), type: random(5), state: random(5)},
@@ -42,6 +43,7 @@ export default {
         {value: [113.0823, 28.2568], index: random(5), type: random(5), state: random(5)},
         {value: [102.9199, 25.46639], index: random(5), type: random(5), state: random(5)},
       ]
+      Point = []
       let option = {
         grid: {
           top: '0%',
@@ -57,7 +59,7 @@ export default {
           label: {
             show: true
           },
-          roam: false,
+          roam: true,
           layoutCenter: ["50%", "50%"], // position位置
           layoutSize: 25 * vw,
           itemStyle: {
@@ -96,7 +98,7 @@ export default {
         series: [
           {
             type: "map",
-            roam: false,
+            roam: 'scale',
             label: {
               normal: {
                 show: true,
@@ -186,11 +188,16 @@ export default {
     },
     chartClick() {
       this.$refs.chart.chart.on('click', async (params) => {
-        this.code = this.cityJson[params.dataIndex].properties.adcode
-        let mapData = this.cityJson[params.dataIndex].properties.adcode === 100000 ? ChinaMapData : (await axios.get(`https://geo.datav.aliyun.com/areas_v3/bound/${this.cityJson[params.dataIndex].properties.adcode}_full.json`)).data
+        this.code = this.cityJson[params.dataIndex].properties.adcode || this.code || gsByMap.features[params.dataIndex].properties.unique_id
+        let mapData
+        if (this.code !== 620400 && this.code.toString().startsWith('6204')) {
+          mapData = {features: gsByMap.features.filter(e => e.properties.pid === this.code.toString())}
+        } else {
+          mapData = this.cityJson[params.dataIndex].properties.adcode === 100000 ? ChinaMapData : (await axios.get(`https://geo.datav.aliyun.com/areas_v3/bound/${this.cityJson[params.dataIndex].properties.adcode}_full.json`)).data
+        }
         this.getMap(mapData)
       })
-      this.$refs.chart.$el.addEventListener('dblclick',  ()=> {
+      this.$refs.chart.$el.addEventListener('dblclick', () => {
         this.chartDblClick(this.code)
       });
     },
@@ -198,15 +205,23 @@ export default {
       let a = val.toString().substr(0, 2)
       let b = val.toString().substr(2, 2)
       let c = val.toString().substr(4, 2)
-      if (c !== '00') {
-        // this.code = Number(a + b + '00')
-        this.code = Number(a  + '0000')
+      let d = val.toString().substr(6, 9)
+      d = null
+      if (d && d !== '000') {
+        this.code = Number(a + b + c)
+      } else if (c !== '00') {
+        this.code = Number(a + b + '00')
       } else if (b !== '00') {
-        this.code = Number(a  + '0000')
+        this.code = Number(a + '0000')
       } else if (a !== '10') {
         this.code = 100000
       }
-      let mapData = this.code === 100000 ? ChinaMapData : (await axios.get(`https://geo.datav.aliyun.com/areas_v3/bound/${this.code}_full.json`)).data
+      let mapData
+      if (this.code !== 620400 && this.code.toString().startsWith('6204')) {
+        mapData = gsByMap
+      } else {
+        mapData = this.code === 100000 ? ChinaMapData : (await axios.get(`https://geo.datav.aliyun.com/areas_v3/bound/${this.code}_full.json`)).data
+      }
       this.getMap(mapData)
     }
   }