使用echarts+Amap 实现地图下钻并且带有散点图

最新推荐文章于 2024-05-28 09:17:06 发布

lancnn

最新推荐文章于 2024-05-28 09:17:06 发布

阅读量3.5k

点赞数 7

分类专栏： echarts 文章标签：实现地图下钻有散点图 echarts echarts 地图下钻 echarts 散点图

本文链接：https://blog.csdn.net/weixin_41767649/article/details/107947114

版权

echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

主要实现功能：使用echarts+Amap 实现地图下钻并且带有散点图。
效果：
在这里插入图片描述

在项目文件中引入 import echarts from 'echarts';
在index.html文件中引入高德地图：

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=自己的key&plugin=AMap.DistrictSearch"></script>
<script src="//webapi.amap.com/ui/1.0/main.js"></script>

去高德地图注册并生成自己的key，调用高德地图的接口是有调用次数限制的，次数太多会收费，在使用的时候要注意。高德地图传送门

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=97e17a5e76b498925b1b181dc9691168&plugin=AMap.DistrictSearch"></script>
    <script src="//webapi.amap.com/ui/1.0/main.js"></script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

主要代码在sctterMap.vue中。

sctterMap.vue：

<!-- sctterMap.vue 地图下钻并且带有散点图 -->
<template>
<div class="wrapper">
  <div class="echarts" ref="chartMap"></div>
  <p class="back" @click.stop="backTop">返回</p>
</div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'dotMap',
  data() {
    return {
      myCharts: null,
      map: {},
      parentJson: [],
      geoJsonData: {},
      mapData: [],
      parentCode: [100000]
    }
  },
  mounted() {
    this.getGeoJson(100000)
  },
  methods: {
    //获取geoJson数据
    getGeoJson(adcode) {
      this.map = new window.AMap.Map('map', {
        resizeEnable: true,
        center: [116.30946, 39.937629],
        zoom: 3
      })
      let that = this
      window.AMapUI.loadUI(['geo/DistrictExplorer'], DistrictExplorer => { //高德地图的行政区划查询
        var districtExplorer = (window.districtExplorer = new DistrictExplorer({
          eventSupport: true, //打开事件支持
          map: this.map
        }))
        districtExplorer.loadAreaNode(adcode, function(error, areaNode) {
          if (error) {
            console.error(error)
            return
          }
          let Json = areaNode.getSubFeatures()
          if (Json.length > 0 && Json[0].properties.level == 'district') {
            that.parentJson = Json
          } else if (Json.length == 0) {
            Json = that.parentJson.filter(item => {
              if (item.properties.adcode == adcode) {
                return item
              }
            })
          }
          that.geoJsonData = {
            features: Json
          }
          that.getMapData()
        })
      })
    },
    //获取数据
    getMapData() {
      this.mapData = this.geoJsonData.features.map((item) => {
        return {
          name: item.properties.name,
          value: [item.properties.center[0], item.properties.center[1], parseInt(Math.random() * 60)],
          level: item.properties.level,
          citycode: item.properties.adcode
        }
      })
      //去渲染echarts
      this.initEcharts()
    },
    initEcharts() {
      this.myChart = echarts.init(this.$refs.chartMap)
      window.addEventListener('resize', () => {
        this.myChart.resize()
      })
      echarts.registerMap('Map', this.geoJsonData)
      this.myChart.setOption({
          backgroundColor: '#0e265d',
          tooltip: {
            trigger: 'item',
            formatter: p => {
              let val = p.value
              if (window.isNaN(val)) {
                val = 0
              }
              let txtCon = p.name + '<br>' + '<hr>' + '数值 : ' + p.value[2]
              return txtCon
            }
          },
          title: {
            show: true,
            x: 'center',
            y: 'top',
            text: '地图下钻带散点图',
            textStyle: {
              color: 'rgb(97, 142, 205)',
              fontSize: 16
            }
          },
          geo: {
            show: true,
            type: 'map',
            map: 'Map', //使用
            roam: true,
            nameProperty: '北京市',
            itemStyle: {
              normal: {
                show: true,
                areaColor: '#091632',
                borderColor: '#1773c3',
                borderWidth: '1',
                shadowColor: '#1773c3'
              },
              //emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
              emphasis: {
                show: false,
                areaColor: '#0e265d',
                borderColor: '#83BAFF',
                shadowColor: '#1773c3',
                shadowBlur: 20
              }
            },
            label: {
              normal: {
                show: true, //显示省份标签
                color: '#ddb926'
              },
              emphasis: {
                //对应的鼠标悬浮效果
                show: false,
                color: '#ddb926'
              }
            },
            zoom: 1.25
          },
          series: [{
              name: '城市',
              type: 'scatter',
              coordinateSystem: 'geo',
              data: this.mapData,
              //这里可以设置点的大小
              symbolSize: function(val) {
                return val[2] / 2;
              },
              label: {
                normal: {
                  formatter: '{b}',
                  position: 'right',
                  show: false //是否显示值
                },
                emphasis: {
                  show: false
                }
              },
              itemStyle: {
                normal: {
                  color: '#ddb926'
                }
              }
            },
            {
              name: '前5',
              type: 'effectScatter',
              coordinateSystem: 'geo',
              data: this.mapData.slice(0, 5),
              symbolSize: function(val) {
                return val[2] / 2;
              },
              showEffectOn: 'render', //前5名显示动画效果
              rippleEffect: {
                brushType: 'stroke'
              },
              hoverAnimation: true,
              label: {
                normal: {
                  formatter: p => {
                    return p.value[2]
                  },
                  position: 'center',
                  show: false
                }
              },
              itemStyle: {
                normal: {
                  color: '#f4e925',
                  shadowBlur: 10,
                  shadowColor: '#333'
                }
              },
              zlevel: 1
            }
          ]
        },
        true
      )
      let that = this
      this.myChart.off('click')
      this.myChart.on('click', params => { //地图点击事件
        if (params.componentType == "series") {
          let cityCode = params.data.citycode;
          that.parentCode.push(cityCode)
          that.getGeoJson(cityCode)
        } else {
          let name = params.name;
          this.mapData.forEach((item) => {
            if (item.name == name) {
              if (that.parentCode.indexOf(item.citycode) != -1) return;
              that.parentCode.push(item.citycode)
              that.getGeoJson(item.citycode)
            }
          })
        }
      })
    },
    //返回上一级
    backTop() {
      if (this.parentCode.length === 1) return
      // //删除最后一位
      this.parentCode.pop()
      this.getGeoJson(this.parentCode[this.parentCode.length - 1])
    }
  }
}
</script>

<style lang="less" scoped>
.wrapper {
    position: relative;
    width: 100%;
    height: 100vh;
}
.echarts {
    width: 100%;
    height: 100%;
    position: relative;
}

.back {
    position: absolute;
    left: 2%;
    top: 2%;
    color: #eee;
    z-index: 99999;
    cursor: pointer;
}
</style>

lancnn

关注

7
点赞
踩
21

收藏

觉得还不错? 一键收藏
打赏
2
评论
使用echarts+Amap 实现地图下钻并且带有散点图

主要实现功能：使用echarts+Amap 实现地图下钻并且带有散点图。在项目文件中引入 import echarts from 'echarts';在index.html文件中引入高德地图：<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=自己的key&plugin=AMap.DistrictSearch"></script><scri
复制链接

扫一扫