vue echarts地图省市区下钻

一 项目做了一个省市区下钻

全国

放不出来图

 市

县区

二 直接上代码

这就是上面丑丑的省市区，代码没优化，撸出来什么样就是什么样，

看着这几个if  感觉自己好low, 但是比较直观哈哈哈 low就low吧，

尾部我把用到map json丢上来就完整了，待会看看能不能优化一下

<template>
  <div class="MapChart">
    <div ref="MapArea" class="echarts"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import chinaJson from '@/core/map/china.json'

export default {
  name: 'MapChart',
  data() {
    return {
      currentLevel: 0, //1 全国下省份, 2 省份下市区  3 县区
      currentClick: null,

      currentCityList: []

    }
  },
  mounted() {
    this.chart = echarts.init(this.$refs.MapArea)
    this.initEcharts()
  },
  beforeDestroy() {
    this.chart.dispose()
  },
  methods: {
    initEcharts() {
      let regionsList = []

      //全国下省份
      if(!this.currentLevel) {
        regionsList = chinaJson.features.map((item) => ({
          name: item.properties.name,
          type: '省份',
          itemStyle: {
            color: 'rgba(222, 224, 232, 1)',
            areaColor: 'rgba(222, 224, 232, 1)'
          }
        }))  //地图上要显示的区域以及颜色

        let outProvince = [] //数组定义在这里, 可以在地图上去除部分省份 =》 ['江苏', '江西']
        let objMap = {
          ...chinaJson,
          features: chinaJson.features.filter((item) => !outProvince.includes(item.properties.name)) //这里可以过滤不需要展示省份，可以和regionsList联动使用
        }
        echarts.registerMap('chinaJson', objMap)  //chinaJSon自定义名称，但是无法显示右下角南海诸岛， 可以设置成china
      }
      
      //省份下市区
      if(this.currentLevel == 1) {
        //console.log(this.currentLevel, this.currentClick)
        let { id } = chinaJson.features.filter((item) => this.currentClick == item.properties.name)[0].properties
        //console.log(id)  //找出  @/core/map/china.json 里面内蒙古id  同事在此路径geometryProvince文件下  id.json就是对应该省份对应的市级数据
        let cityList = require(`@/core/map/geometryProvince/${id}.json`) //获取城市数据
        regionsList =  cityList.features.map((item) => ({
          name: item.properties.name,
          type: '城市',
          itemStyle: {
            color: 'rgba(222, 224, 232, 1)',
            areaColor: 'rgba(222, 224, 232, 1)'
          }
        }))
        this.currentCityList = cityList
        //console.log(regionsList)
        let outCityList = [] //剔除不需要城市
        let objMap = {
          ...chinaJson,
          features: cityList.features.filter((item) => !outCityList.includes(item.properties.name)) //这里可以过滤不需要展示城市，可以和regionsList联动使用
        }
        echarts.registerMap('chinaJson', objMap)  //chinaJSon自定义名称，但是无法显示右下角南海诸岛， 可以设置成china
      }

      //市区下县区
      if(this.currentLevel == 2) {
        //console.log(this.currentLevel, this.currentClick, this.currentCityList)
        let { id } = this.currentCityList.features.filter((item) => this.currentClick == item.properties.name)[0].properties
        //console.log(id, this.currentCityList.features.filter((item) => this.currentClick == item.properties.name)[0])
        let areaList = require(`@/core/map/geometryCouties/${id}00.json`) //获取区县数据, 这里加${id}00  是因为查出来id没有00  但是json文件是有的所以拼接了一下
        //console.log(areaList)
        regionsList =  areaList.features.map((item) => ({
          name: item.properties.name,
          type: '县区',
          itemStyle: {
            color: 'rgba(222, 224, 232, 1)',
            areaColor: 'rgba(222, 224, 232, 1)'
          }
        }))

        let outAreaList = [] //剔除不需要县区
        let objMap = {
          ...chinaJson,
          features: areaList.features.filter((item) => !outAreaList.includes(item.properties.name)) //这里可以过滤不需要展示县区，可以和regionsList联动使用
        }
        echarts.registerMap('chinaJson', objMap)  //chinaJSon自定义名称，但是无法显示右下角南海诸岛， 可以设置成china
      }




      let option = {
        geo: {
          map: 'chinaJson' , //china可以显示右下加南海诸岛，别的名称无法显示
          roam: false,
          zoom: 1.1,
          aspectScale: 0.8, // 拉伸地图 值为0-1
          regions: regionsList,
          label: {
            show: true,
            color: '#fff',
          },
          emphasis: { // 设置鼠标移上去hover效果
            // show: true,
            label: {
              color: '#000',
            }

          }
        },
      }
      // console.log(option)
      this.chart.setOption(option)
      this.chart.off('click') //解决点击地图会触发两次问题
      this.chart.on('click', (params) => {
        console.log(params)
        this.currentLevel = params.region.type == '省份' ? 1 : params.region.type == '城市' ? 2  : params.region.type == '县区' ? 3 : 0
        this.currentClick = params.name
        this.currentLevel != 3 && this.initEcharts()  //县区下没有别的级别
      })
    }
  }
}
</script>

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

配套map数据

地图资源省市区下钻数据json-Javascript文档类资源-CSDN下载， 配套上传不需要积分，

demo页面就这样

加油呀，我还是一个小菜鸟，

2022-7-6更新

源码demo包体， npm install一下就可以运行了，不需要积分需要自取

地图下钻demo代码包体-Javascript文档类资源-CSDN下载