echarts地图绘制并实现下钻功能

本文参考网址

使用echarts地图需要先准备好echarts地图渲染需要的json数据，数据可以从阿里云地址中下载自己需要的，下载之后直接引入即可使用，本文针对全国地图做一个简单的demo

阿里云界面如图

// 1、准备echarts地图容器
  <div class="map" ref="myChart" style="width:500px;height:500px;">
  </div>
// js部分
  import * as echarts from 'echarts'
  // 阿里云地址里下载下来全国的json数据，存储为china.json
  import china from './china.json'
let map_level = 'china'
data() {
      return {
       		myChart: null,
       		option: {}
      }
    },
    mounted() {
      this.initMap();
    },
    methods: {
      initMap() {
        this.myChart = echarts.init(document.querySelector('.map'));
        echarts.registerMap('china', china);
        this.myChart.hideLoading();
        this.option = {
          animation : false,
          backgroundColor: 'transparent',
          geo: {
            map: 'china',
            layoutCenter: ["50%", "50%"], //地图位置
            // aspectScale: 1.55, //长宽比
            // layoutSize: '140%',
            zoom: 1,
            // center: [109.975625,39.654296],
            left: 0,
            right: 0,
            top: 0,
            bottom: 0,
            roam: false,// 是否开启鼠标缩放和平移漫游
            label:{
              show: true,// 设为false时不显示区域名称
              color:'#1EBAA4',
              fontSize: 10
            },
            itemStyle: {
              areaColor: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [{
                  offset: 0,
                  color: 'transparent' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: 'transparent' // 100% 处的颜色
                }],
                globalCoord: true // 缺省为 false
              },
              borderColor: 'red',
              shadowColor: 'transparent',
              shadowOffsetX: 10,
              shadowOffsetY: 11

            },
            emphasis: {
              itemStyle: {
                areaColor: 'transparent'
              },
              label:{
                show: false,
                color:'#1EBAA4'
              },
            },
           
          },

          series: [
    
          ]
        };
        this.myChart.setOption(this.option, true);
        let that = this;
        // 添加下钻功能
        this.myChart.on('click', function (params) {
          // console.log(params);
          // 判断地图类型,中国地图则变为省地图,省地图变为市区地图
          map_level = map_level === 'china' ? 'province' : map_level === 'province' ? 'city' : null;
          if (!map_level) return
          if (map_level === 'province') {
            that.createMap('geometryProvince', that.getProvinceId(mapList, params.name), params.name)
          } else if (map_level === 'city') {
            that.createMap('geometryCouties', that.getcityId(cityinfo, params.name), params.name)
          }
        })
      },
      createMap(url, id, name) {
        if (map_level === 'province') {
          // let newJson = provinceList[id];
          // cityinfo = chinaJson
          this.option.geo.map = name;
          echarts.registerMap(name, provinceList[id]);
          // provinceList为省份数据集合，格式为{
          // '省份1id': data1,
          // '省份2id': data2
		  // }
          this.myChart.setOption(this.option, true);
        } else {

        }
      },
      // 获取省份id
      getProvinceId(mapList, name) {
      // mapList为从阿里云下载下来的具体某个省份的经纬度数据,具体逻辑根据自己的实际情况修改
        for (let i in mapList) {
          if (name.indexOf(mapList[i].label)!==-1) {
            return mapList[i].value
          }
        }
      },
      // 获取市区id
      getcityId(cityinfo, name) {
      // 具体逻辑根据自己的实际情况修改
        for (let i in cityinfo.features) {
          if (cityinfo.features[i].properties.name == name) {
            return cityinfo.features[i].properties.id + '00'
          }
        }
      }
    }

最终效果如下

此时会发现，地图下方有个南海诸岛，有时候不需要它需要把它去掉，
使用geo时，可以在geo中设置

regions: [ // 对某块地区的特殊处理，此处可以隐藏掉南海诸岛
			    {
			      name: '南海诸岛', 
			      value: 0,
			      itemStyle: {
			        normal: {
			          opacity: 0, //透明度
			          label: {show: false}
			      }
			    }
			  }
		    ],

除了使用geo来实现外，还可以使用series来实现，关键代码如下：

// option中的geo去掉，使用series
series: [
            {
              name: 'map',
              type: "map",
              mapType: 'china',
              roam: false,
              zoom: 1,
              label: {
                normal: {
                  show: true,
                  textStyle: {
                    color: "#000",
                  },
                },
              },
              itemStyle: {
                normal: {
                  borderColor: "#B79891",
                  borderWidth: "1",
                  areaColor: "transparent",
                },
                emphasis: {
                  areaColor: 'transparent',
                }
              },
              // 去掉南海诸岛
              data: [{ name: "南海诸岛", value: 0, itemStyle: { normal: { opacity: 0, label: { show: false } },
                  emphasis: { opacity: 0, label: { show: false } } } }]
            }
          ]

此时效果如下图

如想把底部边界线也给去掉，可以在china.json中找到以下代码，给注释掉或删除掉

删除之后效果如下：

注意

使用series来实现时，下钻时的方法需要修改下，createMap中的
this.option.geo.map = name;需要改为this.option.series[0].mapType = name;