echarts实现下钻功能的地图

实现步骤

1. 初始化，获取全国的坐标json数据
2. 绘制中国地图，同时监听点击事件，使用递归方式实现下钻功能
3. 点击下一层级，获取对应地区的坐标json数据–添加监听事件–实现下钻

注：getGeoJson方法是获取阿里云的地图坐标数据
阿里云地图API

vue实现代码

<template>
  <div id="mainMap"></div>
</template>
<script>
import echarts from "echarts";
import "../json/map/china.js";
import $ from "jquery";

export default {
  name: "echarts",
  data() {
    return {
      chart: null,
      publicUrl: 'https://geo.datav.aliyun.com/areas_v3/bound/'
    };
  },
  mounted() {
    this.initChart(); // 初始化界面
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    // 初始时，获取全国的数据
    async initChart() {
      let chart = echarts.init(document.getElementById('mainMap'));
      let alladcode = await this.getGeoJson('all.json') // 调用方法获取json文件数据
      let chinaGeoJson = await this.getGeoJson('100000_full.json')

      this.initCharts(chinaGeoJson, '全国', chart, alladcode) // 第一次画图
    },
    // 获取地图json数据
    async getGeoJson(jsonName){
      return await $.get(this.publicUrl + jsonName)
    },
    
    // 画图
    initCharts(geoJson, name, chart, alladcode){
      echarts.registerMap(name, geoJson);
        let option = {
          backgroundColor: "#061740",
          title: {
            text: name,
            left: 'center'
          },
          series: [{
            type: 'map',
            map: name,
            itemStyle: {
              areaColor: '#1890ff'
            }
          }]
        }
        chart.setOption(option, true); // 设置true，上一次渲染的数据不会影响下二次
        chart.off('click')
        // 监听点击事件，递归实现下钻功能
        chart.on('click', params => {
          let clickRegionCode = alladcode.filter(areaJson => areaJson.name === params.name)[0].adcode;
          this.getGeoJson(clickRegionCode + '_full.json')
            .then(regionGeoJson => 
              this.initCharts(regionGeoJson, params.name, chart, alladcode))
            .catch(err => {
              this.getGeoJson('100000_full.json').then(
                chinaGeoJson => this.initCharts(chinaGeoJson, '全国', chart, alladcode)
              )
            })
        })
        console.log(222, option)

      
    },
  },
};
</script>

效果图