首页地图+飞线 初版

首页地图+飞线 初版

src/utils/effectScatterData.ts

@@ -0,0 +1,59 @@
+export default [
+    {
+        name: '长沙市',
+        value: [112.94, 28.23],
+    },
+    {
+        name: '怀化市',
+        value: [110.0, 27.57],
+    },
+    {
+        name: '益阳市',
+        value: [112.36, 28.55],
+    },
+    {
+        name: '常德市',
+        value: [111.7, 29.03],
+    },
+    {
+        name: '岳阳市',
+        value: [113.13, 29.36],
+    },
+    {
+        name: '张家界市',
+        value: [110.48, 29.12],
+    },
+    {
+        name: '邵阳市',
+        value: [111.47, 27.24],
+    },
+    {
+        name: '娄底市',
+        value: [111.99, 27.7],
+    },
+    {
+        name: '湘潭市',
+        value: [112.95, 27.83],
+    },
+    {
+        name: '株洲市',
+        value: [113.13, 27.83],
+    },
+    {
+        name: '湘西土家族苗族自治州',
+        value: [109.67, 28.22],
+    },
+    {
+        name: '衡阳市',
+        value: [112.57, 26.89],
+    },
+
+    {
+        name: '永州市',
+        value: [111.61, 26.42],
+    },
+    {
+        name: '郴州市',
+        value: [113.02, 25.77],
+    },
+]

src/utils/linesData.ts

@@ -0,0 +1,83 @@
+export default [
+    {
+        // fromName: '怀化市',
+        // toName: '长沙市',
+        coords: [
+            [110.0, 27.57],
+            [112.94, 28.23]
+        ]
+    },
+
+    {
+        coords: [
+            [112.36, 28.55], //益阳市
+            [112.94, 28.23]
+        ]
+    },
+    {
+        coords: [
+            [111.7, 29.03], //常德市
+            [112.94, 28.23]
+        ]
+    },
+    {
+        coords: [
+            [113.13, 29.36], //岳阳市
+            [112.94, 28.23]
+        ]
+    },
+    {
+        coords: [
+            [110.48, 29.12], //张家界市
+            [112.94, 28.23]
+        ]
+    },
+    {
+        coords: [
+            [111.47, 27.24], //邵阳市
+            [112.94, 28.23]
+        ]
+    },
+    {
+        coords: [
+            [111.99, 27.7], //娄底市
+            [112.94, 28.23]
+        ]
+    },
+    {
+        coords: [
+            [112.95, 27.83], //湘潭市
+            [112.94, 28.23]
+        ]
+    },
+    {
+        coords: [
+            [113.13, 27.83], //株洲市
+            [112.94, 28.23]
+        ]
+    },
+    {
+        coords: [
+            [109.67, 28.22], //湘西土家族苗族自治州
+            [112.94, 28.23]
+        ]
+    },
+    {
+        coords: [
+            [112.57, 26.89], //衡阳市
+            [112.94, 28.23]
+        ]
+    },
+    {
+        coords: [
+            [111.61, 26.42], //永州市
+            [112.94, 28.23]
+        ]
+    },
+    {
+        coords: [
+            [113.02, 25.77], //郴州市
+            [112.94, 28.23]
+        ]
+    }
+]

src/views/page/indexMim.vue

@@ -177,6 +177,8 @@
 </template>
 
 <script lang="ts" setup>
+import effectScatterData from '@/utils/effectScatterData'
+import linesData from '@/utils/linesData'
 import 'echarts-gl'
 // @ts-ignore
 import {getAreaCode} from './js/area'
@@ -184,6 +186,7 @@ import {JsonResult} from '@/axios'
 import {Ref, ref, watch, onMounted, onBeforeMount, reactive, getCurrentInstance, nextTick} from 'vue'
 import * as echarts from 'echarts'
 import api from '@/axios'
+import {fa} from 'element-plus/es/locale'
 const {proxy} = getCurrentInstance() as any
 const day = proxy.day
 onMounted(() => {
@@ -464,27 +467,7 @@ const get3 = (city: any, district: any, town: any) => {
       }
     })
 }
-// const convertData = (data) => {
+
-//   var res = []
-//   for (var i = 0; i < data.length; i++) {
-//     var dataItem = data[i]
-//     var fromCoord = chinaGeoCoordMap[dataItem[0].name]
-//     var toCoord = [116.4551, 40.2539]
-//     if (fromCoord && toCoord) {
-//       res.push([
-//         {
-//           coord: fromCoord,
-//           value: dataItem[0].value,
-//         },
-//         {
-//           coord: toCoord,
-//         },
-//       ])
-//     }
-//   }
-//   return res
-// }
-var mapJson = ''
 const flattenTree = (treeData: any) => {
   const result: any[] = []
   function traverse(node: any) {
@@ -501,10 +484,10 @@ const flattenTree = (treeData: any) => {
   return result
 }
 const maptitle = ref('')
-const initMapdt = (data: any, podat: any, nameb: any) => {
+const initMapdt = (data: any, podat: any, name: any) => {
+  console.log('initMapdt(name)_________', name)
   var tree4data = flattenTree(JSON.parse(localStorage.getItem('tree4data')))
-  // maptitle.value = tree4data.find(element => element.code == JSON.parse(data)['name'])['title'];
+  maptitle.value = name
-  maptitle.value = nameb
   localStorage.setItem('nowCode', JSON.parse(data)['name'])
   const myChart = echarts.init(document.getElementById('myMap'))
   // myChart.showLoading();
@@ -516,92 +499,319 @@ const initMapdt = (data: any, podat: any, nameb: any) => {
   var option = {
     tooltip: {
       trigger: 'item',
-      textStyle: {fontSize: '14', color: '#fff', fontFamily: 'Arial'},
+      // textStyle: {fontSize: '14', color: '#fff', fontFamily: 'Arial'},
-      backgroundColor: '#092b6a',
+      // backgroundColor: '#092b6a',
-      formatter: (params: any) => {
+      // 当加入飞线（lines 或 lines3D）时，会和之前的 tooltip 配置发生冲突或覆盖，导致 tooltip 无法正常显示。
+      // 需要 tooltip 针对不同的系列进行正确配置，或者通过自定义 formatter 来处理多个系列的数据。
+      formatter: function (params: any) {
+        // console.log(111, params)
+        // 判断当前触发的系列类型
+        if (params.seriesType === 'map') {
+          console.log("params.seriesType === 'map'")
+
+          // 地图上的tooltip
           let datat = podat
           let itemWithId2 = datat.children.find((item: any) => item.grope === params.name)
-        if (itemWithId2 == null || itemWithId2 == undefined) {
+          if (!itemWithId2) {
-          return '<br /> 报警:' + '0' + '<br /> 警情:' + '0' + ' <br /> AI预警:' + '0'
+            return `
+              <div style="
+                 background: url('/keji_border.png') no-repeat center center;
+                 background-size: contain;
+                 height: 150px;
+                 width: 300px;
+                 display: flex;
+                 flex-direction: column;
+                 justify-content: center;
+                 align-items: center;
+                 color: #fff;
+                 padding: 10px;
+                 box-sizing: border-box;
+               ">
+                 报警: 0<br /> 
+                 警情: 0<br /> 
+                 AI预警: 0
+               </div>
+              `
           } else {
-          return '<br /> 报警:' + itemWithId2.alarmCount + '<br /> 警情:' + itemWithId2.caseCount + ' <br /> AI预警:' + itemWithId2.aiCount
+            return `
+              <div style="
+                 background: url('/keji_border.png') no-repeat center center;
+                 background-size: contain;
+                 height: 150px;
+                 width: 300px;
+                 display: flex;
+                 flex-direction: column;
+                 justify-content: center;
+                 align-items: center;
+                 color: #fff;
+                 padding: 10px;
+                 box-sizing: border-box;
+               ">
+                 报警: ${itemWithId2.alarmCount}<br /> 
+                 警情: ${itemWithId2.caseCount}<br /> 
+                 AI预警: ${itemWithId2.aiCount}
+               </div>
+              `
           }
+        } else if (params.seriesType === 'lines') {
+          // 飞线上的tooltip
+          return `线路: ${params.data.fromName} → ${params.data.toName}`
+        } else if (params.seriesType === 'effectScatter') {
+          // 飞线终点的涟漪效果
+          return `终点: ${params.name}`
+        }
+
+        // 如果未匹配到系列类型，则返回空
+        return ''
       }
     },
-    series: [
+    geo: [
       {
-        type: 'map3D',
-        name: '地图',
-        selectedMode: 'single', // 地图高亮单选
-        regionHeight: 1, // 地图高度
         map: 'myMap',
-        viewControl: {
+        aspectScale: 1,
-          distance: 168, // 地图视角 控制初始大小
+        zoom: 0.9,
-          alpha: 180, // 倾斜角度
+        layoutCenter: ['50%', '50%'],
-          rotateSensitivity: 0
+        layoutSize: '100%',
-        },
+        show: true,
+        roam: false,
         label: {
-          show: true, // 是否显示名字
+          show: true, //省市文字显示开关
-          color: '#fff', // 文字颜色
+          color: '#fff'
-          fontSize: 15, // 文字大小
-          fontWeight: 'bold' // 文字大小
         },
         itemStyle: {
-          color: '#0A3E77', // 地图背景颜色
+          areaColor: {
-          borderWidth: 1, // 分界线wdith
+            type: 'linear',
-          borderColor: '#a4d8f0', // 分界线颜色
+            x: 1200,
-          opacity: 0.9
+            y: 0,
+            x2: 0,
+            y2: 0,
+            colorStops: [
+              {
+                offset: 0,
+                color: 'rgba(3,27,78,0.75)'
+              },
+              {
+                offset: 1,
+                color: 'rgba(58,149,253,0.75)'
+              }
+            ],
+            global: true // 缺省为 false
+          },
+          borderColor: '#c0f3fb',
+          borderWidth: 0.8
         },
         emphasis: {
-          label: {
-            show: true, // 是否显示高亮
-            textStyle: {
-              color: '#fff' // 高亮文字颜色
-            }
-          },
           itemStyle: {
-            color: '#3a69c1', // 地图高亮颜色
+            show: false,
-            borderWidth: 10, // 分界线wdith
-            borderColor: '#6BECF5' // 分界线颜色
-          }
-        },
-
-        light: {
-          main: {
             color: '#fff',
-            intensity: 1,
+            areaColor: 'rgba(0,254,233,0.6)'
-            shadow: true,
+            // areaColor: '#3a69c1'
-            shadowQuality: 'high',
+            // areaColor: '#07315e'
-            alpha: 25, //
-            beta: 20
           },
-          ambient: {
+          label: {
-            color: '#fff',
-            intensity: 0.6
-          }
-        },
-        lines3D: {
             show: true,
-          data: [
-            {
-              coords: [
-                [111.51, 29.02], // 起点坐标
-                [109.22793, 29.12239] // 终点坐标
-              ],
-              lineStyle: {
-                width: 2,
             color: '#fff'
           }
         }
-            // 可以添加更多的线条
+      },
-          ]
+      // 重影
+      {
+        type: 'map',
+        map: 'myMap',
+        zlevel: -1,
+        aspectScale: 1,
+        zoom: 0.9,
+        layoutCenter: ['50%', '51%'],
+        layoutSize: '100%',
+        roam: false,
+        silent: true,
+        itemStyle: {
+          borderWidth: 1,
+          borderColor: 'rgba(58,149,253,0.8)',
+          shadowColor: 'rgba(172, 122, 255,0.5)',
+          shadowOffsetY: 5,
+          shadowBlur: 15,
+          areaColor: 'rgba(5,21,35,0.1)'
+        }
+      },
+      {
+        type: 'map',
+        map: 'myMap',
+        zlevel: -2,
+        aspectScale: 1,
+        zoom: 0.9,
+        layoutCenter: ['50%', '52%'],
+        layoutSize: '100%',
+        roam: false,
+        silent: true,
+        itemStyle: {
+          borderWidth: 1,
+          borderColor: 'rgba(58,149,253,0.6)',
+          shadowColor: 'rgba(65, 214, 255,0.6)',
+          shadowOffsetY: 5,
+          shadowBlur: 15,
+          areaColor: 'rgba(5,21,35,0.1)'
+        }
+      },
+      {
+        type: 'map',
+        map: 'myMap',
+        zlevel: -3,
+        aspectScale: 1,
+        zoom: 0.9,
+        layoutCenter: ['50%', '53%'],
+        layoutSize: '100%',
+        roam: false,
+        silent: true,
+        itemStyle: {
+          borderWidth: 1,
+          borderColor: 'rgba(58,149,253,0.4)',
+          shadowColor: 'rgba(29, 111, 165,1)',
+          shadowOffsetY: 15,
+          shadowBlur: 10,
+          areaColor: 'rgba(5,21,35,0.1)'
+        }
+      },
+      {
+        type: 'map',
+        map: 'myMap',
+        zlevel: -4,
+        aspectScale: 1,
+        zoom: 0.9,
+        layoutCenter: ['50%', '54%'],
+        layoutSize: '100%',
+        roam: false,
+        silent: true,
+        itemStyle: {
+          borderWidth: 5,
+          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: [
+      {
+        type: 'map',
+        map: 'myMap',
+        geoIndex: 0, //geoIndex：第一个图层
+        tooltip: {
+          trigger: 'item',
+          backgroundColor: 'rgba(0,0,0,0)',
+          borderColor: 'rgba(0,0,0,0)',
+          extraCssText: 'box-shadow: 0 0 0 rgba(0, 0, 0, 0);',
+          textStyle: {fontSize: '16', color: '#fff'},
+          formatter: function (params: any) {
+            // tooltip 是在这里生效的，而不是上面那个配置
+            // console.log(222, params)
+            let datat = podat
+            let itemWithId2 = datat.children.find((item: any) => item.grope === params.name)
 
+            if (!itemWithId2) {
+              return `
+              <div style="
+                 background: url('/keji_border.png') no-repeat center center;
+                 background-size: contain;
+                 height: 150px;
+                 width: 300px;
+                 display: flex;
+                 flex-direction: column;
+                 justify-content: center;
+                 align-items: center;
+                 color: #fff;
+                 padding: 10px;
+                 box-sizing: border-box;
+               ">
+                 报警: 0<br /> 
+                 警情: 0<br /> 
+                 AI预警: 0
+               </div>
+              `
+            } else {
+              return `
+              <div style="
+                 background: url('/keji_border.png') no-repeat center center;
+                 background-size: contain;
+                 height: 150px;
+                 width: 300px;
+                 display: flex;
+                 flex-direction: column;
+                 justify-content: center;
+                 align-items: center;
+                 color: #fff;
+                 padding: 10px;
+                 box-sizing: border-box;
+               ">
+                 报警: ${itemWithId2.alarmCount}<br /> 
+                 警情: ${itemWithId2.caseCount}<br /> 
+                 AI预警: ${itemWithId2.aiCount}
+               </div>
+              `
+            }
+          }
+        },
+        data: [] as any[] // 添加与你的数据相关联的数据
+      },
+      {
+        type: 'lines', // 飞线图
+        tooltip: {
+          show: false // 禁用飞线的 tooltip
+        },
+        zlevel: 2,
+        effect: {
+          show: true,
+          period: 3, //箭头指向速度，值越小速度越快
+          trailLength: 0.03, //特效尾迹长度[0,1]值越大，尾迹越长重
+          symbol: 'arrow', //箭头图标
+          symbolSize: 6 //图标大小
+        },
+        lineStyle: {
+          color: '#EE5652',
+          width: 1, //尾迹线条宽度
+          opacity: 1, //尾迹线条透明度
+          curveness: 0.3 //尾迹线条曲直度
+        },
+        data: linesData,
+        symbol: ['none', 'circle'], //飞线起点终点点位样式
+        symbolSize: 10 // 飞线起点终点点位大小
+      },
+      {
+        // 散点图
+        type: 'effectScatter', //在地图上绘制具有动态效果的散点图,实现视觉上的效果，比如涟漪效果或闪烁效果
+        zlevel: 3, //图层的深度，值越大表示图层越高，覆盖在其他图层之上。通常用于分层显示效果
+        coordinateSystem: 'geo',
+        tooltip: {
+          show: false // 禁用散点的 tooltip
+        },
+        data: effectScatterData,
+        symbol: 'circle', // 设置散点的图形为圆形
+        symbolSize: [10, 10], // 设置散点的大小，宽度为 20，高度为 10
+        itemStyle: {
+          color: 'orange', // 散点颜色设置为橙色
+          shadowBlur: 10, // 设置散点的阴影模糊大小
+          shadowColor: 'orange' // 阴影颜色为橙色
+        },
+        effectType: 'ripple', //动画效果类型设置为涟漪效果，即散点会呈现出波纹扩散的效果
+        // showEffectOn:emphasis移入显示动画，render一开始显示动画
+        // showEffectOn:render: 表示在图表渲染时立即显示动画效果
+        showEffectOn: 'render',
+        rippleEffect: {
+          scale: 5, // 涟漪效果的扩展倍数，越大波纹越大
+          brushType: 'stroke' // 涟漪效果的绘制方式，stroke 表示仅绘制波纹的边框，不填充
+        }
+      }
+    ]
+  }
+  if (name !== '湖南省') {
+    // option.series = option.series.filter((series) => series.type !== 'lines')
+    option.series[1].data = []
+    option.series[2].data = []
     myChart.setOption(option)
-
+  } else {
+    myChart.setOption(option)
+  }
   window.addEventListener('resize', function () {
     myChart.resize()
   })
@@ -920,6 +1130,7 @@ const initMap2 = (arr: any) => {
 <style scoped lang="scss">
 :deep(.dv-scroll-board .header) {
  font-size: 13px;
+;
 }
 
 :deep(.dv-scroll-board .rows .row-item) {
@@ -1137,6 +1348,8 @@ const initMap2 = (arr: any) => {
   margin-right: 0.5%;
   border: 1px solid #3876B9;
   background-image: url(./indeximag/able.jpg);
+  // background-image: url(./indeximag/bg4.jpg);
+
   background-size: 100% 100%;
  }
 }