echarts 演示地图开发

front/package.json

@@ -29,6 +29,7 @@
     "image-webpack-loader": "^8.1.0",
     "imagemin-gifsicle": "^7.0.0",
     "imagemin-mozjpeg": "^10.0.0",
+    "jquery": "^3.6.0",
     "js-cookie": "^3.0.0-rc.3",
     "md-editor-v3": "^1.11.10",
     "mitt": "^3.0.0",

front/public/static/echartsMapJson/china2.json

@@ -0,0 +1,32 @@
+{
+	"type": "FeatureCollection",
+	"features": [{
+		"type": "Feature",
+		"properties": {
+			"adcode": 110000,
+			"name": "中国",
+			"center": [116.405285, 39.904989],
+			"centroid": [116.41995, 40.18994],
+			"childrenNum": 16,
+			"level": "province",
+			"parent": {
+				"adcode": 100000
+			},
+			"subFeatureIndex": 0,
+			"acroutes": [100000]
+		},
+		"geometry": {
+			"type": "MultiPolygon",
+			"coordinates": [
+				[
+					[
+                        [135.08,53.56],
+                        [135.08,3.86],
+                        [73.51,3.86],
+                        [73.51,53.56]
+                    ]
+				]
+			]
+		}
+	}]
+}

front/src/router/index.js

@@ -64,6 +64,15 @@ export const constantRoutes = [
       icon: 'error-warning-line',
     },
   },
+  {
+    path: '/mapTest',
+    name: 'mapTest',
+    component: () => import('@/views/home/mapTest'),
+    meta: {
+      title: '地图测试',
+      icon: 'error-warning-line',
+    },
+  },
   {
     path: '/',
     component: Layout,

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

@@ -0,0 +1,624 @@
+<template>
+  <home-header></home-header>
+  <div class="survey-left">
+    <div ref="cityMap" class="city-map-content-echarts"></div>
+    <div class="mask">
+      <div class="box xha">
+        <div class="top">
+          <span>西海岸</span>
+          <span>
+            跳转至该站点
+            <i></i>
+          </span>
+        </div>
+        <div class="bottom">
+          <div class="item">
+            <span>基础设施</span>
+            <i></i>
+            <span>35282</span>
+          </div>
+          <div class="item">
+            <span>数据资源</span>
+            <i></i>
+            <span>11</span>
+          </div>
+          <div class="item">
+            <span>应用资源</span>
+            <i></i>
+            <span>23</span>
+          </div>
+          <div class="item">
+            <span>组件服务</span>
+            <i></i>
+            <span>8</span>
+          </div>
+        </div>
+        <div class="zx"></div>
+      </div>
+      <div class="box lsq">
+        <div class="top">
+          <span>崂山区</span>
+          <span>
+            跳转至该站点
+            <i></i>
+          </span>
+        </div>
+        <div class="bottom">
+          <div class="item">
+            <span>基础设施</span>
+            <i></i>
+            <span>13000</span>
+          </div>
+          <div class="item">
+            <span>数据资源</span>
+            <i></i>
+            <span>860</span>
+          </div>
+          <div class="item">
+            <span>应用资源</span>
+            <i></i>
+            <span>30</span>
+          </div>
+        </div>
+        <div class="zx"></div>
+      </div>
+    </div>
+  </div>
+  <ability-to-recommend-bottom></ability-to-recommend-bottom>
+</template>
+<script setup>
+  import { ref, onMounted } from 'vue'
+  import HomeHeader from '@/views/home/components/header'
+  import AbilityToRecommendBottom from '@/views/home/components/AbilityToRecommendBottom'
+  import geoJson from '/public/static/echartsMapJson/qingdao.json'
+  // const loadedDataUrl = '/public/static/echartsMapJson/qingdao.json'
+  const echarts = require('echarts')
+  const areaMenuList = ref([
+    // 全市概况
+    // {
+    //   name: '市南区',
+    //   code: 'shinan',
+    //   className: 'classsn',
+    //   value: 0,
+    // },
+    {
+      name: '市北区',
+      code: 'shibei',
+      className: 'classsb',
+      value: 0,
+    },
+    {
+      name: '西海岸',
+      code: 'xihaian',
+      className: 'classxha',
+      value: 0.2,
+    },
+    {
+      name: '崂山区',
+      code: 'laoshan',
+      className: 'classls',
+      value: 0.2,
+    },
+    {
+      name: '李沧区',
+      code: 'licang',
+      className: 'classlc',
+      value: 0,
+    },
+    {
+      name: '城阳区',
+      code: 'chengyang',
+      className: 'classcy',
+      value: 0,
+    },
+    {
+      name: '即墨区',
+      code: 'jimo',
+      className: 'classjm',
+      value: 0,
+    },
+    {
+      name: '胶州市',
+      code: 'jiaozhou',
+      className: 'classjz',
+      value: 0,
+    },
+
+    {
+      name: '平度市',
+      code: 'pingdu',
+      className: 'classpd',
+      value: 0,
+    },
+
+    {
+      name: '莱西市',
+      code: 'laixi',
+      className: 'classlx',
+      value: 0,
+    },
+  ])
+
+  let option = {}
+  let myChart = {}
+  // 初始化地图
+  const initMap = () => {
+    const center = geoJson.features.map((item) => {
+      const geoAreaName = item.properties.name // geo文件中的地理名称
+      return {
+        name: geoAreaName,
+        coord: item.properties.centroid,
+      }
+    })
+    // 坐标map
+    var geoCoordMap = {}
+    center.forEach((val) => {
+      geoCoordMap[val.name] = [val.coord[0], val.coord[1]]
+      if (val.name === '西海岸') {
+        geoCoordMap[val.name] = [
+          val.coord[0] - 0.057495,
+          val.coord[1] - 0.119879,
+        ]
+      } else if (val.name === '市北区') {
+        geoCoordMap[val.name] = [val.coord[0], val.coord[1]]
+      } else if (val.name === '市南区') {
+        geoCoordMap[val.name] = [120.364482, 36.065671]
+      }
+    })
+    console.log('所有坐标===============>', geoCoordMap)
+    // 数据信息
+    var customerBatteryCityData = []
+    areaMenuList.value.forEach((val) => {
+      customerBatteryCityData.push({ name: val.name, value: val.num })
+    })
+    myChart = echarts.init(
+      document.querySelectorAll('.city-map-content-echarts')[0]
+    )
+    echarts.registerMap('qingdao', geoJson)
+    const img = new Image()
+    img.src = '/src/assets/home/map-piece.png'
+    const imgActive = new Image()
+    imgActive.src = '/src/assets/home/map-piece-active.png'
+    option = {
+      // visualMap: {
+      //   show: false,
+      //   max: 100,
+      //   seriesIndex: 1,
+      //   inRange: {
+      //     color: ['#000000', 'yellow', 'pink'],
+      //   },
+      // },
+      visualMap: {
+        //图例值控制
+        min: 0,
+        max: 1,
+        calculable: true,
+        show: false,
+        color: ['#f44336', '#fc9700', '#ffde00', '#fff'],
+        textStyle: {
+          color: '#fff',
+        },
+      },
+      geo: [
+        {
+          map: 'qingdao',
+          roam: false, // 是否允许缩放
+          aspectScale: 0.8,
+          zoom: 1.1, // 默认显示级别
+          top: 50,
+          itemStyle: {
+            borderColor: '#72ccff',
+            borderWidth: 2,
+            areaColor: {
+              image: img,
+              repeat: 'repeat',
+            },
+          },
+          emphasis: {
+            itemStyle: {
+              areaColor: {
+                image: imgActive,
+                repeat: 'repeat',
+              },
+              borderWidth: 2,
+            },
+            label: {
+              color: '#fff',
+            },
+          },
+          regions: [
+            {
+              name: '市南区',
+              itemStyle: {
+                areaColor: {
+                  image: imgActive,
+                  repeat: 'repeat',
+                },
+              },
+            },
+          ],
+          z: 2,
+        },
+      ],
+      series: [
+        {
+          type: 'scatter',
+          coordinateSystem: 'geo',
+          z: 5,
+          symbolSize: [0.1, 0.1],
+          data: [
+            // {
+            //   city: '市南区',
+            //   value: [120.364482, 36.065671],
+            // },
+          ],
+        },
+        // 地图
+        {
+          type: 'map',
+          mapType: 'qingdao',
+          geoIndex: -1,
+          aspectScale: 0.8,
+          zoom: 1.1, // 默认显示级别
+          top: 55,
+          z: 1,
+          itemStyle: {
+            areaColor: '#1e7dc0',
+            borderColor: '#72ccff',
+            borderWidth: 2,
+          },
+          silent: true,
+          tooltip: {
+            show: false,
+          },
+        },
+        {
+          geoIndex: 0,
+          // coordinateSystem: 'geo',
+          showLegendSymbol: true,
+          type: 'map',
+          roam: true,
+          label: {
+            normal: {
+              show: false,
+              textStyle: {
+                color: '#fff',
+              },
+            },
+            emphasis: {
+              show: false,
+              textStyle: {
+                color: '#fff',
+              },
+            },
+          },
+
+          itemStyle: {
+            normal: {
+              borderColor: '#2ab8ff',
+              borderWidth: 1.5,
+              areaColor: '#12235c',
+            },
+            emphasis: {
+              areaColor: '#2AB8FF',
+              borderWidth: 0,
+              color: 'red',
+            },
+          },
+          map: 'qingdao', // 使用
+          data: customerBatteryCityData,
+          // data: this.difficultData //热力图数据   不同区域 不同的底色
+        },
+      ],
+    }
+    const convertData = function (data) {
+      let res = []
+      for (let i = 0; i < data.length; i++) {
+        let dataItem = data[i]
+        let fromCoord = geoCoordMap[dataItem.name]
+        let toCoord = [120.364482, 36.065671]
+        if (fromCoord && toCoord) {
+          res.push([
+            {
+              coord: fromCoord,
+              value: dataItem.value,
+            },
+            {
+              coord: toCoord,
+            },
+          ])
+        }
+      }
+      return res
+    }
+    ;[['市南区', areaMenuList.value]].forEach(function (item) {
+      option.series.push(
+        {
+          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: convertData(item[1]),
+        },
+        {
+          type: 'effectScatter',
+          coordinateSystem: 'geo',
+          zlevel: 2,
+          rippleEffect: {
+            //涟漪特效
+            period: 3, //动画时间，值越小速度越快
+            brushType: 'stroke', //波纹绘制方式 stroke, fill
+            scale: 8, //波纹圆环最大限制，值越大波纹越大
+          },
+          label: {
+            normal: {
+              show: false,
+              position: 'right', //显示位置
+              offset: [5, 0], //偏移设置
+              formatter: function (params) {
+                //圆环显示文字
+                return params.data.name
+              },
+              fontSize: 13,
+            },
+            emphasis: {
+              show: true,
+            },
+          },
+          symbol: 'circle',
+          symbolSize: function (val) {
+            return 5 + val[2] * 5 //圆环大小
+          },
+          itemStyle: {
+            normal: {
+              show: false,
+              color: '#f00',
+            },
+          },
+          data: item[1].map(function (dataItem) {
+            return {
+              name: dataItem.name,
+              value: geoCoordMap[dataItem.name].concat([dataItem.value]),
+            }
+          }),
+        },
+        //被攻击点
+        {
+          type: 'scatter',
+          coordinateSystem: 'geo',
+          zlevel: 2,
+          rippleEffect: {
+            period: 4,
+            brushType: 'stroke',
+            scale: 4,
+          },
+          label: {
+            normal: {
+              show: true,
+              position: 'bottom',
+              //offset:[5, 0],
+              color: '#6b5858',
+              formatter: '{b}',
+              textStyle: {
+                color: '#6b5858',
+                fontSize: 18,
+                fontWeight: 600,
+              },
+            },
+            emphasis: {
+              show: true,
+              color: '#f60',
+            },
+          },
+          symbol: 'image://' + require('@/assets/home/rb.png'),
+          symbolSize: 40,
+          symbolOffset: [0, -25],
+          data: [
+            {
+              name: item[0],
+              value: geoCoordMap[item[0]].concat([10]),
+            },
+          ],
+        },
+        // 黄岛崂山
+        {
+          type: 'scatter',
+          coordinateSystem: 'geo',
+          zlevel: 2,
+          rippleEffect: {
+            period: 4,
+            brushType: 'stroke',
+            scale: 4,
+          },
+          label: {
+            normal: {
+              show: true,
+              position: 'bottom',
+              //offset:[5, 0],
+              color: '#fbd500',
+              formatter: '{b}',
+              textStyle: {
+                color: '#fbd500',
+                fontSize: 18,
+                fontWeight: 600,
+              },
+            },
+            emphasis: {
+              show: true,
+              color: '#f60',
+            },
+          },
+          symbol: 'image://' + require('@/assets/home/yb.png'),
+          symbolSize: 40,
+          symbolOffset: [0, -20],
+          data: [
+            {
+              name: '西海岸',
+              value: geoCoordMap['西海岸'].concat([10]),
+            },
+          ],
+        },
+        {
+          type: 'scatter',
+          coordinateSystem: 'geo',
+          zlevel: 2,
+          rippleEffect: {
+            period: 4,
+            brushType: 'stroke',
+            scale: 4,
+          },
+          label: {
+            normal: {
+              show: true,
+              position: 'bottom',
+              //offset:[5, 0],
+              color: '#fbd500',
+              formatter: '{b}',
+              textStyle: {
+                color: '#fbd500',
+                fontSize: 18,
+                fontWeight: 600,
+              },
+            },
+            emphasis: {
+              show: true,
+              color: '#f60',
+            },
+          },
+          symbol: 'image://' + require('@/assets/home/yb.png'),
+          symbolSize: 40,
+          symbolOffset: [0, -20],
+          data: [
+            {
+              name: '崂山区',
+              value: geoCoordMap['崂山区'].concat([10]),
+            },
+          ],
+        }
+      )
+    })
+
+    myChart.setOption(option)
+  }
+  onMounted(() => {
+    initMap()
+    myChart.on('mouseover', function () {
+      myChart.dispatchAction({
+        type: 'downplay',
+      })
+    })
+  })
+</script>
+<style lang="less" scoped>
+  .survey-left {
+    margin-top: 0.64rem;
+    width: 100%;
+    height: 7.5rem;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    background: url('~@/assets/home/echarts_bg.png') no-repeat;
+    background-size: 100%;
+    .city-map-content-echarts {
+      width: 11rem;
+      height: 7rem;
+      margin: 0rem auto;
+    }
+    .mask {
+      position: absolute;
+      z-index: 1000;
+      width: 100%;
+      height: 7rem;
+      margin: 0rem auto;
+      .box {
+        position: absolute;
+        width: 3.18rem;
+        height: 1.36rem;
+        padding: 0.1rem 0.35rem 0;
+        background: url('~@/assets/home/box_bg.png') no-repeat;
+        background-size: 100%;
+        .top {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          border-bottom: 1px solid rgba(161, 160, 161, 0.637);
+          span:nth-of-type(1) {
+            font-size: 0.18rem;
+          }
+          span:nth-of-type(2) {
+            cursor: pointer;
+            i {
+              display: inline-block;
+              width: 0.1rem;
+              height: 0.1rem;
+              background: url('~@/assets/home/tz.png') no-repeat;
+              background-size: 100%;
+            }
+          }
+        }
+        .bottom {
+          display: flex;
+          justify-content: space-around;
+          margin-top: 0.1rem;
+          .item {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            i {
+              display: inline-block;
+              width: 0.18rem;
+              height: 0.18rem;
+              margin: 0.02rem 0;
+            }
+          }
+          .item:nth-of-type(1) > i {
+            background: url('~@/assets/home/map_jcss.png') no-repeat center;
+            background-size: contain;
+          }
+          .item:nth-of-type(2) > i {
+            background: url('~@/assets/home/map_sjzy.png') no-repeat center;
+            background-size: contain;
+          }
+          .item:nth-of-type(3) > i {
+            background: url('~@/assets/home/map_yyzy.png') no-repeat center;
+            background-size: contain;
+          }
+          .item:nth-of-type(4) > i {
+            background: url('~@/assets/home/map_zjfw.png') no-repeat center;
+            background-size: contain;
+          }
+        }
+        .zx {
+          width: 1.5rem;
+          height: 0.66rem;
+          background: url('~@/assets/home/zx.png') no-repeat;
+          background-size: 100%;
+          position: relative;
+          top: -0.9rem;
+          left: -1.88rem;
+        }
+      }
+      .xha {
+        top: 5.45rem;
+        left: 9.6rem;
+      }
+      .lsq {
+        top: 3.7rem;
+        left: 11.95rem;
+      }
+    }
+  }
+</style>