西海岸镜像 添加头部路由 线头双向

front/src/views/home/components/header.vue

@@ -104,6 +104,7 @@
     { name: '开发指南', key: 'developmentGuide' },
     { name: '需求中心', key: 'demandCenter' },
     { name: '个人中心', key: 'personalCenter' },
+    { name: '区市站点', key: 'mapTest' },
     { name: '后台管理', key: 'houtaiguanli' },
     { name: '赋能案例', key: 'assignCase' },
   ])
@@ -164,6 +165,11 @@
           path: '/demandCenter',
         })
         break
+      case '区市站点':
+        router.push({
+          path: '/mapTest',
+        })
+        break
       case '后台管理':
         window.open(window.SITE_CONFIG.backUrl + '/#/bscatalogue-bscatalogue')
         window.reload('http://15.2.21.238:9797')
@@ -264,7 +270,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    padding: 0 1.9rem;
+    padding: 0 1rem;
     background-color: rgba(0, 0, 25, 0.7);
     position: fixed;
     z-index: 1000;

front/src/views/home/mapTest/index.vue

@@ -331,6 +331,26 @@
       }
       return res
     }
+    const convertData2 = function (data) {
+      let res = []
+      for (let i = 0; i < data.length; i++) {
+        let dataItem = data[i]
+        let fromCoord = [120.364482, 36.065671]
+        let toCoord = geoCoordMap[dataItem.name]
+        if (fromCoord && toCoord) {
+          res.push([
+            {
+              coord: fromCoord,
+              value: dataItem.value,
+            },
+            {
+              coord: toCoord,
+            },
+          ])
+        }
+      }
+      return res
+    }
     ;[['市南区', areaMenuList.value]].forEach(function (item) {
       option.series.push(
         {
@@ -352,6 +372,25 @@
           },
           data: convertData(item[1]),
         },
+        {
+          type: 'lines',
+          zlevel: 2,
+          effect: {
+            show: true,
+            period: 4, //箭头指向速度，值越小速度越快
+            trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
+            symbol: 'arrow', //箭头图标
+            symbolSize: 5, //图标大小
+          },
+          lineStyle: {
+            normal: {
+              width: 1, //尾迹线条宽度
+              opacity: 1, //尾迹线条透明度
+              curveness: -0.3, //尾迹线条曲直度
+            },
+          },
+          data: convertData2(item[1]),
+        },
         {
           type: 'effectScatter',
           coordinateSystem: 'geo',
@@ -427,7 +466,7 @@
           symbolOffset: [0, -25],
           data: [
             {
-              name: item[0],
+              name: '',
               value: geoCoordMap[item[0]].concat([10]),
             },
           ],
@@ -608,12 +647,18 @@
           background-size: 100%;
           position: relative;
           top: -0.9rem;
-          left: -1.88rem;
+          left: -1.84rem;
         }
       }
       .xha {
         top: 5.45rem;
-        left: 9.6rem;
+        left: 3.5rem;
+        background: url('~@/assets/home/box_bg2.png') no-repeat;
+        .zx {
+          background: url('~@/assets/home/zx2.png') no-repeat;
+          top: -0.9rem;
+          left: 2.82rem;
+        }
       }
       .lsq {
         top: 3.7rem;