**地图

src/components/areaMap.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
 
-    <div style="width: 45vw;height: 50vh;" id="chart2"></div>
+    <div style="width: 45vw;height: 50vh;" id="chart2" v-show="showArea"></div>
+    <div style="width: 45vw;height: 50vh;" id="chart3" v-show="!showArea"></div>
   </div>
-
 </template>
 
 
@@ -42,9 +42,31 @@ import * as echarts from 'echarts';
 import "echarts-gl"
 import geoJson from "/static/jsonData/luxian_geo.js"
 import { useRouter } from "vue-router"
+
+
+const showArea = (ref(true))
 const router = useRouter()
 const icon = "https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231204\/202312041608529c9e21252.png"
 const lx = "https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231205\/20231205092709cfe148712.png"
+const deepCopy = (obj) => {
+  if (typeof obj !== 'object' || obj === null) {
+    return obj;
+  }
+
+  let copy = Array.isArray(obj) ? [] : {};
+
+  for (let key in obj) {
+    if (Object.prototype.hasOwnProperty.call(obj, key)) {
+      copy[key] = deepCopy(obj[key]);
+    }
+  }
+
+  return copy;
+}
+
+
+
+
 const pointerFn = () => {
   let list = []
   geoJson.center.forEach((item, index) => {
@@ -64,12 +86,11 @@ const pointerFn = () => {
   })
   return list
 }
-onMounted(() => {
 
+const initAreaMap=()=>{
   
   var mapName = 'lz';
   const myChart = document.getElementById("chart2")
-  /*获取地图数据*/
   let option = {
     geo: [
 
@@ -273,17 +294,249 @@ onMounted(() => {
   };
 
   document.getElementById("chart2").removeAttribute('_echarts_instance_');
-
   echarts.registerMap(mapName, geoJson)
   const bg = echarts.init(myChart)
   bg.setOption(option);
-
   bg.on('click', function (params) {
+    initTownMap(params.name || params.value)
+    // router.push("/detail?town="+params.name||params.value)
    
-  router.push("/detail?town="+params.name||params.value)
 
   });
 
+  
+}
+const initTownMap=(name)=>{
+  const townJson = deepCopy(geoJson)
+  townJson.features = townJson.features.filter((item) => {
+      return item.properties.name == name
+    })
+
+    showArea.value=false
+
+    var mapName = 'town';
+  const myChart = document.getElementById("chart3")
+  let option = {
+    geo: [
+
+
+      {
+        type: "map",
+        map: mapName,
+        aspectScale: 1,
+        zoom: 1.2,
+        layoutCenter: ["50%", "51%"],
+        layoutSize: "110%",
+        roam: false,
+        label: {
+          emphasis: {
+            show: false
+          }
+        },
+        show: true,
+        map: mapName,
+        zoom: 1.2,
+        aspectScale: 1,
+        roam: false,
+        itemStyle: {
+          normal: {
+            areaColor: 'transparent',
+
+          },
+          emphasis: {
+
+            areaColor: {
+              type: 'radial', // linear 线性渐变  radial径向渐变
+              x: 0.5,                  // 0.5为正中心，如果小于渐变中心靠左
+              y: 0.5,                  // 0.5为正中心，如果小于渐变中心靠上
+              r: 1,
+              colorStops: [
+                {
+                  offset: 0, color: '#A46759' // 0% 处的颜色
+                },
+                {
+                  offset: 0.1, color: '#A46759' // 0% 处的颜色
+                },
+
+
+                {
+                  offset: 1, color: '#FFB821' // 100% 处的颜色
+                }],
+
+            }
+
+
+            // borderWidth: 0
+          }
+
+        },
+
+
+      },
+
+      {
+        type: "map",
+        map: mapName,
+        zlevel: -1,
+        aspectScale: 1,
+        zoom: 1.2,
+        layoutCenter: ["50%", "51%"],
+        layoutSize: "110%",
+        roam: false,
+        silent: true,
+
+        itemStyle: {
+          normal: {
+            borderWidth: 1,
+            borderColor: "rgba(17, 149, 216,0.6)",
+            borderColor: "#5AD0E0",
+            shadowColor: "rgba(172, 122, 255,0.5)",
+            shadowOffsetY: 5,
+            shadowBlur: 15,
+            areaColor: "rgba(5,21,35,0.1)",
+          },
+        },
+      },
+
+
+      {
+        type: "map",
+        map: mapName,
+        zlevel: -1,
+        aspectScale: 1,
+        zoom: 1.2,
+        layoutCenter: ["50%", "52%"],
+        layoutSize: "110%",
+        roam: false,
+        silent: true,
+
+        itemStyle: {
+          normal: {
+            borderWidth: 1,
+            borderColor: "rgba(17, 149, 216,0.6)",
+            borderColor: "#5AD0E0",
+            shadowColor: "rgba(172, 122, 255,0.5)",
+            shadowOffsetY: 5,
+            shadowBlur: 15,
+            areaColor: "rgba(5,21,35,0.1)",
+          },
+        },
+      },
+
+
+      {
+        type: "map",
+        map: mapName,
+        zlevel: -2,
+        aspectScale: 1,
+        zoom: 1.2,
+        layoutCenter: ["50%", "53%"],
+        layoutSize: "110%",
+        roam: false,
+        silent: true,
+
+        itemStyle: {
+          normal: {
+            borderWidth: 1,
+            borderColor: "rgba(17, 149, 216,0.4)",
+            borderColor: "#5AD0E0",
+            shadowColor: "rgba(172, 122, 255,0.5)",
+            shadowOffsetY: 5,
+            shadowBlur: 15,
+            areaColor: "rgba(5,21,35,0.1)",
+          },
+        },
+      },
+
+      {
+        type: "map",
+        map: mapName,
+        zlevel: -4,
+        aspectScale: 1,
+        zoom: 1.2,
+        layoutCenter: ["50%", "54%"],
+        layoutSize: "110%",
+        roam: false,
+        silent: true,
+
+        itemStyle: {
+          normal: {
+            borderWidth: 5,
+            // borderColor: "rgba(11, 43, 97,0.8)",
+            borderColor: "rgba(5,9,57,0.8)",
+            shadowColor: "rgba(29, 111, 165,0.8)",
+            shadowOffsetY: 15,
+            shadowBlur: 10,
+            areaColor: "rgba(5,21,35,0.1)",
+          },
+        },
+      },
+
+
+
+    ],
+    series: [
+      {
+        name: '资产数',
+        type: 'effectScatter',
+        coordinateSystem: 'geo',
+        rippleEffect: {
+          period: 4, //动画时间，值越小速度越快
+          brushType: 'fill', //波纹绘制方式 stroke, fill
+          scale: 12, //波纹圆环最大限制，值越大波纹越大
+          number: 2,
+        },
+
+        // 发散点的大小
+        symbolSize: function (val) {
+          return 4
+          // return val[2] / 10;
+        },
+        markPoint: {
+          // data: pointerFn()
+        },
+
+        // data: (() => {
+        //   let data = {
+        //     资产数: geoJson.center
+
+        //   }
+        //   let finalData = []
+        //   Object.keys(data).map((i, index) => {
+        //     let child = data[i].map((row, index) => ({
+        //       value: row,
+        //       itemStyle: {
+        //         color: index == geoJson.center.length - 1 ? '#FEB821' : '#F0733A',
+        //       },
+        //     }))
+
+        //     finalData = [...finalData, ...child]
+        //   })
+        //   return finalData
+        // })(),
+      },
+    ],
+  };
+
+  // document.getElementById("chart3").removeAttribute('_echarts_instance_');
+  echarts.registerMap(mapName, townJson)
+  const bg = echarts.init(myChart)
+  bg.setOption(option);
+  bg.on('click', function (params) {
+    initTownMap(params.name || params.value)
+    // router.push("/detail?town="+params.name||params.value)
+   
+
+  });
+
+
+
+}
+
+onMounted(() => {
+  initAreaMap()
+
+
 })
 
 </script>