vue2地图下钻功能实现

一、背景

产品提了需求，想要一个功能，展示全国各省份信息，点击下钻展示市县。网上搜了下，自己整理一份，留作参考。

二、地图资源获取，大概两种方式。

一种是使用DataV api接口，但是仅限本地开始调试，线上环境慎用。

一种是下载资源包到本地环境。我是使用的第二种。

DataV数据可视化平台：https://datav.aliyun.com/portal/school/atlas/area_selector

三、项目引入

import chinaJson from '@/assets/china.json' // 引入全国省份地图包
import cityJson from '@/assets/city.json' // 引入全国市地图包

我这边是对数据做了预处理，删掉了南海诸岛的地图，只显示缩略图。

china.json文件

　　第一步

第二步

 三、整体实现

<template>
  <div class="bmap">
    <div class="back">
      <Button v-show="backVisible" type="primary" @click="goBack">返回</Button>
    </div>
    <div id="bmapBox" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import chinaJson from '@/assets/china.json' // 引入全国省份地图包
import cityJson from '@/assets/city.json' // 引入全国市地图包

export default {
  name: 'bmap',
  data() {
    return {
      myChart: null, // 地图实例
      zoom: 0.8, // 缩放比例,
      mapName: 'china', // 地图名称 Chian不显示南海诸岛
      mapGeoJson: chinaJson, // 地图json数据
      mapData: [
        { name: '天津市', value: 88 },
        { name: '上海市', value: 66 },
        { name: '重庆市', value: 42 },
        { name: '河北省', value: 99 },
        { name: '河南省', value: 52 },
        { name: '云南省', value: 33 },
        { name: '辽宁省', value: 22 },
        { name: '黑龙江省', value: 22 },
        { name: '湖南省', value: 22 },
        { name: '安徽省', value: 22 },
        { name: '山东省', value: 22 },
        { name: '新疆维吾尔自治区', value: 22 },
        { name: '江苏省', value: 22 },
        { name: '浙江省', value: 22 },
        { name: '江西省', value: 15 },
        { name: '湖北省', value: 33 },
        { name: '广西壮族自治区', value: 22 },
        { name: '甘肃省', value: 88 },
        { name: '山西省', value: 16 },
        { name: '内蒙古', value: 56 },
        { name: '陕西省', value: 33 },
        { name: '吉林省', value: 99 },
        { name: '福建省', value: 28 },
        { name: '贵州省', value: 25 },
        { name: '广东省', value: 33 },
        { name: '青海省', value: 88 },
        { name: '西藏自治区', value: 25 },
        { name: '内蒙古自治区', value: 1 },
        { name: '四川省', value: 45 },
        { name: '宁夏回族自治区', value: 36 },
        { name: '海南省', value: 22 },
        { name: '台湾省', value: 22 },
        { name: '香港特别行政区', value: 22 },
        { name: '澳门特别行政区', value: 22 }
      ], // 地图数据
      backVisible: false // 返回按钮是否显示
    }
  },
  methods: {
    // 点击返回，地图返回上一级
    goBack() {
      this.mapName = 'china'
      this.mapGeoJson = chinaJson
      this.mapData = [
        { name: '天津市', value: 88 },
        { name: '上海市', value: 66 },
        { name: '重庆市', value: 42 },
        { name: '河北省', value: 99 },
        { name: '河南省', value: 52 },
        { name: '云南省', value: 33 },
        { name: '辽宁省', value: 22 },
        { name: '黑龙江省', value: 22 },
        { name: '湖南省', value: 22 },
        { name: '安徽省', value: 22 },
        { name: '山东省', value: 22 },
        { name: '新疆维吾尔自治区', value: 22 },
        { name: '江苏省', value: 22 },
        { name: '浙江省', value: 22 },
        { name: '江西省', value: 15 },
        { name: '湖北省', value: 33 },
        { name: '广西壮族自治区', value: 22 },
        { name: '甘肃省', value: 88 },
        { name: '山西省', value: 16 },
        { name: '内蒙古', value: 56 },
        { name: '陕西省', value: 33 },
        { name: '吉林省', value: 99 },
        { name: '福建省', value: 28 },
        { name: '贵州省', value: 25 },
        { name: '广东省', value: 33 },
        { name: '青海省', value: 88 },
        { name: '西藏自治区', value: 25 },
        { name: '内蒙古自治区', value: 1 },
        { name: '四川省', value: 45 },
        { name: '宁夏回族自治区', value: 36 },
        { name: '海南省', value: 22 },
        { name: '台湾省', value: 22 },
        { name: '香港特别行政区', value: 22 },
        { name: '澳门特别行政区', value: 22 }
      ]
      this.init()
      this.backVisible = false
    },
    // 渲染地图
    renderChart() {
      // 注册地图
      echarts.registerMap(this.mapName, this.mapGeoJson)
      // 根据 json 数据拼装 mapdata， 用于地图点击下钻时传递数据，主要有adcode、name
      const mapdata = {}
      this.mapGeoJson.features.map((item) => {
        const { name, adcode, level } = item.properties
        mapdata[name] = { name, adcode, level }
      })
      const _data = this.merData(mapdata, this.mapData) // 合并数据
      // 配置option
      this.setOption(this.mapName, _data)
    },
    merData(obj, arr) {
      return arr.map((item) => {
        const _data = obj[item.name] || {}
        return Object.assign({}, _data, item) // 合并ite
      })
    },
    // 设置地图option
    setOption(name, data) {
      const option = {
        // tooltip 提示配置项
        tooltip: {
          formatter: function (params) {
            // 根据需要进行数据处理或格式化操作
            return `name: ${params.name}<br>value: ${params.value || 0}`
          }
        },
        visualMap: {
          show: false, // 不展示，只要数据映射功能
          type: 'continuous',
          showLabel: true,
          calculabel: true,
          left: '50',
          min: 0,
          max: 100,
          inRange: {
            color: ['#edfbfb', '#b7d6f3', '#40a9ed', '#3598c1', '#215096']
          }
        },
        // 地理坐标系组件用于地图的绘制
        geo: [
          {
            // 使用 registerMap 注册的地图名称。
            map: name,
            // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
            roam: true,
            zoom: this.zoom,
            // 图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
            selectedMode: 'single',
            label: {
              show: true,
              color: '#666666',
              fontSize: 12,
              formatter: (params) => {
                // 根据需要进行数据处理或格式化操作
                // 获取数值
                const _item = this.mapData.find((item) => item.name === params.name)
                let value = 0
                if (_item && _item.hasOwnProperty('value')) {
                  value = _item.value
                }
                return `${value}\n${params.name}`
              }
            },
            // 地图区域的多边形 图形样式。
            itemStyle: {
              // 地图区域的颜色
              areaColor: '#71d5a1', // 绿色
              // 图形的描边颜色
              borderColor: '#2979ff' // 蓝色
            },
            // 设置高亮状态下的多边形和标签样式
            emphasis: {
              // 设置区域样式
              itemStyle: {
                areaColor: '#ffff99', // 黄色
                borderColor: '#f29100' // 描边颜色黄色
              },
              // 设置字体
              label: {
                fontSize: 16, // 16px
                color: '#f29100' // 白色
              }
            }
          }
        ],
        series: [
          {
            type: 'map',
            map: name,
            geoIndex: 0,
            roam: true,
            zoom: this.zoom,
            data
          }
        ]
      }
      this.myChart.setOption(option, true)
    },
    handleChartClick(params) {
      console.log(params, 'click params')

      // 省份下钻
      if (params.data) {
        const { adcode, level } = params.data
        if (level === 'province') {
          if (adcode === 710000) {
            this.$Message.warning('没有该省份数据!')
            this.handleCancelHighlight({ target: null })
            return
          }
          this.mapName = 'province'
          const provinceJson = cityJson.features.filter((item) => {
            if (item.properties && item.properties.parent) {
              return item.properties.parent.adcode === adcode
            }
            return false
          })
          // 构建省份地图
          const map = { type: 'FeatureCollection', features: provinceJson }
          this.mapGeoJson = map
          // mock市数据
          const _mapdata = []
          map.features.map((item) => {
            const { name, adcode, level } = item.properties
            _mapdata.push({ name, adcode, level, value: Math.floor(Math.random() * 100) })
          })
          this.mapData = _mapdata
          this.renderChart()
          this.backVisible = true
        }
      }
    },
    handleCancelHighlight(params) {
      console.log(params, 'cancel highlight')

      if (!params.target) {
        this.myChart.dispatchAction({
          type: 'select'
        })
      }
    },
    init() {
      this.myChart = this.myChart || echarts.init(document.getElementById('bmapBox'))
      // 初始化中国地图
      this.renderChart()
      // 设置地图点击事件
      this.myChart.on('click', this.handleChartClick)
      // 点击地图外边
      this.myChart.getZr().on('click', this.handleCancelHighlight)
    },
    resize() {
      this.myChart.resize()
    }
  },
  mounted() {
    this.init()
    window.addEventListener('resize', this.resize)
  },
  beforeDestroy() {
    this.myChart.dispose()
    window.removeEventListener('resize', this.resize)
  }
}
</script>

<style lang="less" scoped>
.bmap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .back {
    flex-shrink: 0;
    padding: 2px 0;
  }
  #bmapBox {
    flex: 1;
  }
}
</style>