Vue + Echart实现国省市县地图下钻

一、效果图（中国 --> 甘肃省 --> 陇南市 --> 康县）

 

 

二、 代码实现

鸣谢：地图JSON格式信息拾取工具：DataV.GeoAtlas地理小工具系列 (aliyun.com)

<template>
  <div class="mapDrill" id="mapDrill" @click="callBackChinaMap"></div>
</template>

<script>
  import echarts from "echarts";
  import china from 'echarts/map/json/china.json'
  import gansu from 'echarts/map/json/province/gansu.json'
  import axios from 'axios'

  echarts.registerMap('china', china)

  const provinces = ['shanghai', 'hebei', 'shanxi', 'neimenggu', 'liaoning', 'jilin', 'heilongjiang', 'jiangsu', 'zhejiang', 'anhui', 'fujian', 'jiangxi', 'shandong', 'henan', 'hubei', 'hunan', 'guangdong', 'guangxi', 'hainan', 'sichuan', 'guizhou', 'yunnan', 'xizang', 'shanxi1', 'gansu', 'qinghai', 'ningxia', 'xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen', 'taiwan'];
  const provincesText = ['上海', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门', '台湾'];

  const city = ['lanzhou', 'jiayuguan', 'jinchang', 'baiyin', 'tianshui', 'wuwei', 'zhangye', 'pingliang', 'jiuquan', 'qingyang', 'dingxi', 'longnan', 'linxia', 'gannan']
  const cityText = ['兰州市', '嘉峪关市', '金昌市', '白银市', '天水市', '武威市', '张掖市', '平凉市', '酒泉市', '庆阳市', '定西市', '陇南市', '临夏市', '甘南市']

  const county = ['wuduqu', 'chengxian', 'wenxian', 'taichangxian', 'kangxian', 'xihexian', 'lixian', 'huixian', 'liangdangxian'];
  const countyText = ['武都区', '成县', '文县', '宕昌县', '康县', '西和县', '礼县', '徽县', '两当县',];

  export default {
    created() {
    },
    mounted() {
      this.$nextTick(() => {
        this.initMap();
      });
    },
    data() {
      return {
        map: {},
      };
    },
    props: {},
    methods: {
      // 初始化地图
      initMap() {
        this.map = echarts.init(document.querySelector('.mapDrill'));
        // 初始默认中国地图： place: china
        let option = this.getMapOpt()
        if (option && typeof option === "object") {
          this.map.setOption(option, true);
        }
        // 点击获取省份，加载省份地理信息，渲染地图
        this.map.on('click', (param) => {
          event.stopPropagation() // 阻止冒泡
          // 找到省份名称
          let provinceIndex = provincesText.findIndex(x => {
            return param.name === x
          })
          if (provinceIndex === -1) return
          let provinceAlphabet = provinces[provinceIndex]
          // 重新渲染各省份地图
          this.getProvinceMapOpt(provinceAlphabet)
        });
      },
      // 定义地图option, 渲染地图，默认中国地图，可自定义范围：place：china, place：gansu,
      getMapOpt(place) {
        if (undefined === place) {
          place = 'china';
        }
        let option = {
          backgroundColor: '#404a59',
          title: {
            text: "地图下钻",
            left: "center",
            show: false,
          },
          geo: {
            map: place ? place : 'china',
            label: {
              emphasis: {
                show: true,
                textStyle: {
                  color: '#fff'
                },
              }
            },
            roam: true,
            itemStyle: {
              normal: {
                areaColor: '#031525',
                borderColor: '#3B5077'
              },
              emphasis: {
                areaColor: '#0f2c70'
              }
            }
          },
        }
        return option;
      },
      // 点击页面, 返回显示中国地图
      callBackChinaMap() {
        let option = this.getMapOpt()
        this.map.setOption(option, true);
      },
      // 显示各省地图
      getProvinceMapOpt(provinceAlphabet) {
        axios.get('static/province/' + provinceAlphabet + '.json').then((result) => {
          echarts.registerMap(provinceAlphabet, result.data)
          let option = this.getMapOpt(provinceAlphabet)
          this.map.setOption(option, true);
        })
        // 点击某省份地图，加载渲染当前省份的某城市地图
        this.map.on('click', (param) => {
          event.stopPropagation() // 阻止冒泡
          // 找到城市名
          let cityIndex = cityText.findIndex(x => {
            return param.name === x
          })
          if (cityIndex === -1) return
          let cityAlphabet = city[cityIndex]
          // 重新渲染各城市地图
          this.getCityMapOpt(cityAlphabet)
        })
      },
      // 显示各城市地图
      getCityMapOpt(cityAlphabet) {
        axios.get('static/city/' + cityAlphabet + '.json').then((result) => {
          echarts.registerMap(cityAlphabet, result.data)
          let option = this.getMapOpt(cityAlphabet)
          this.map.setOption(option, true);
        });
        // 点击某城市地图，加载渲染当前城市的某区县地图
        this.map.on('click', (param) => {
          event.stopPropagation() // 阻止冒泡
          // 找到区县名称
          let countyIndex = countyText.findIndex(x => {
            return param.name === x
          })
          if (countyIndex === -1) return
          let countyAlphabet = county[countyIndex]
          // 重新渲染各区县地图
          this.getCountyMapOpt(countyAlphabet)
        })
      },
      // 显示各区县地图
      getCountyMapOpt(countyAlphabet) {
        axios.get('static/county/' + countyAlphabet + '.json').then((result) => {
          echarts.registerMap(countyAlphabet, result.data)
          let option = this.getMapOpt(countyAlphabet)
          this.map.setOption(option, true);
        })
      },
    },
    computed: {}
  };
</script>

<style lang="less" scoped>
  .mapDrill {
    width: 100%;
    height: 100%;
  }
</style>