echarts使用地图下钻效果(以及获取县级区域方式)

获取县级区域地图的方式，好像地图比较老，能凑合着用
https://www.poi86.com/
获取到县级地图后需要合并的话，可以使用https://geojson.io/的open打开地图文件进行合并
详细可以看大神做的网站，打开链接： https://hxkj.vip/demo/echartsMap/
具体可以看下面这位博主的操作

https://blog.csdn.net/qq_43399427/article/details/109363472

json文件资源可以在我的资源中下载
下面是案例：

地图下钻

<template>
  <div class="yibin">
    <div id="yibingMap"></div>
    <!-- <el-button class="Btn" type="primary" @click="resetmap">返回</el-button> -->
  </div>
</template>

<script>
import * as echarts from 'echarts'
import $ from 'jquery'
export default {
  data() {
    return {}
  },
  mounted() {
    this.getYiBinMap()
  },
  methods: {
    getYiBinMap() {
      let myChart = echarts.init(document.getElementById('yibingMap'))
      let listBzMap = {
        翠屏区: './yibinAll/cuipingqu.json',
        长宁县: './yibinAll/changningxian.json',
        高县: './yibinAll/gaoxian.json',
        珙县: './yibinAll/hongxian.json',
        江安县: './yibinAll/jianganqu.json',
        筠连县: './yibinAll/junlianxian.json',
        南溪区: './yibinAll/nanxiqu.json',
        屏山县: './yibinAll/pingshanxian.json',
        兴文县: './yibinAll/xinwenxian.json',
        叙州区: './yibinAll/xuzhouqu.json'
      }
      let option = {}
      let timeFn = null
      let yibin = './yibinAll/yibinshi.json'
      loadMap(yibin, '宜宾市')
      function loadMap(yibin, name) {
        $.get(yibin, function (repJson) {
          echarts.registerMap(name, repJson)
          option = {
            title: {
              text: `${name}--地图`,
              left: 'center'
            },
            // 通过设置geo对地图进行是否缩放配置
            geo: [
              {
                map: name,
                roam: false, //是否允许缩放
                zoom: 1.1, //默认显示级别
                scaleLimit: {
                  min: 0.5,
                  max: 5
                }, //缩放级别
                itemStyle: {
                  normal: {
                    areaColor: '#3894ec',
                    borderColor: '#3fdaff',
                    borderWidth: 2,
                    shadowColor: 'rgba(63, 218, 255, 0.5)',
                    shadowBlur: 30
                  },
                  emphasis: {
                    areaColor: '#2B91B7'
                  }
                },
                label: {
                  show: true,
                  color: '#ffffff',
                  emphasis: {
                    color: '#020933'
                  }
                },
                tooltip: {
                  show: false
                }
              }
            ],
            series: []
          }
          myChart.setOption(option, true)
        })
        // myChart.off('click') // 重点代码
      }
      myChart.on('click', function (params) {
        clearTimeout(timeFn)
        //由于单击事件和双击事件冲突，故单击的响应事件延迟250毫秒执行
        timeFn = setTimeout(function () {
          var name = params.name //地区name
          var mapCode = listBzMap[name] //地区的json数据
          if (!mapCode) {
            alert('无此区域地图显示')
            return
          }
          loadMap(mapCode, name)
        }, 250)
      })
      // 绑定双击事件，返回全国地图
      myChart.on('dblclick', function (params) {
        //当双击事件发生时，清除单击事件，仅响应双击事件
        clearTimeout(timeFn)
        //返回全国地图
        loadMap(yibin, '宜宾市')
      })
    }
    // 返回
    // resetmap() {
    //   this.getYiBinMap()
    // }
  }
}
</script>

<style lang="scss" scoped>
.yibin {
  position: relative;
  width: 100%;
  height: 100%;
  #yibingMap {
    width: 100%;
    height: 100%;
  }
  .Btn {
    position: absolute;
    right: 0;
    top: 0;
  }
}
</style>