ECharts 可视化全国各省、市、县（区）地图 区域钻取 - 绘制地图

registerMap 听起来名称是有点误会的。也是我想的不周到，其实它相当于一个main，相当于一个方法容器，如下图，将绘制一系列地图的拆分成为一个模块，其实是比较好理解的。而registerMap的作用就是将这些module methods给加载进来，可以看到rendHEAD方法，这个其实是绘制主地图的方法，本文用某省作为HEAD头层，那么它们的关系看上去就是一个单向链表，一节一节的将下级城市推演出来。那么，一起看看是如何绘制它们的吧?

• rendHEAD 绘制省级地图
• rendCity 绘制市区地图
• Huizhi

registerMap () {
  console.log('开始注册地图')
  // 加载头部地图
  this.rendHEAD()
  // 点击事件
  this.cityMap.on('click', $mod => {
    const { name, value } = $mod.data
    switch ($mod.data.zoom) {
      case 1:
        this.rendCity(name, value)
        this.setHashMap($mod.data.zoom + 1, name, value)
        break
      case 2: {
        const oneMap = {
          type: 'FeatureCollection',
          features: [$mod.data.data],
          parent: value,
          zoom: 3
        }
        echarts.registerMap(name, oneMap)
        this.renderMap(name, [{
          name: name,
          parent: value,
          zoom: 3
        }])
        this.setHashMap($mod.data.zoom + 1, name, value)
      } break
      case 3:
        this.rendHEAD()
        this.clearHashMap()
        break
    }
  })
}

绘制头层（省级）下的城市

JiangxiMap是我们通过require引入进来的JSON，这个可以根据自己喜好来决定是用ajax请求还是通过模块加载都可以。只需要将json中的文件内容拿到就好了。JSON中的features记录了需要的下级市信息，通过一个循环，将城市名称内容都集中到一个数组，它最终将作为ECharts的data来显示，可以自定义你需要的数据。为将来点击事件做处理。然后将ECharts.registerMap来注册地图信息，最后通过renderMap方法进行地图展示。

rendHEAD () {
  const mapName = []
  JiangxiMap.features.forEach(city => {
    // 城市名称信息
    mapName.push({
      // 名称
      name: city.properties.name,
      // 城市编码，对应文件名
      value: city.id,
      // 层级
      zoom: 1
    })
  })
  // 注册
  echarts.registerMap('江西省', JiangxiMap)
  // 加载
  this.renderMap('江西省', mapName)
}

绘市级内容

在绘制省级内容的时候，传入了一个mapName的配置对象数组。当点击ECharts地图区域时，它会返回一个当前市的对象出来。如图$mod.data就是传入进行的数据。参考上面，很快就理解了这个数据到底是什么。根据value去导入或请求当前市的数配置文件，结构和绘制省是一样。一样的流。遍历features后这次拿到的是当前市下所有的县区资料。这里注意，将遍历出来的整个箱放在countyName[data]中，让它带入到各自的县中去。为什么这么做下面绘制县区会做解释。照葫芦画瓢一样的。

// 绘制市级别地图
rendCity (name, value) {
  // name代表的是该地区中文名称
  // value 代表行政编号，如：3600000
  const fileName = value
  const cityData = require(`@/plugin/map/city/${fileName}.json`)
  echarts.registerMap(name, cityData)
  // 县区名称配置
  const countyName = []
  cityData.features.forEach(county => {
    countyName.push({
      name: county.properties.name,
      value: null,
      data: county,
      parent: value,
      zoom: 2
    })
  })
  // 加载地图
  this.renderMap(name, countyName)
},

绘制县区内容

因为县区内容的独立性。代表着，县区是没有下级的。因此就不需要配置文件展现下级。上个市区绘制时，在Echarts的 data中直接放入一个城市数据。所以可以用来伪造成一个块就可以单独展示了。也就是在市的基础上，抛弃掉非进入县区的地图。 将点击地图县的时候，上一层就注入的data此时就是当前县区的地图配置。但是因为没有节点，所以它不能作为json直接使用注册，z而是做了一层蒙版。可以看到oneMap，相当于给它套了个壳，当等于：

• 市级别地图展现的内容：['县1', '县2', '区1']
• 套模板后显示的内容：['当前县']

通过包装，在通过渲染方法，可以得到县的地图展示。

// 生成单独的县区数据，
const oneMap = {
  type: 'FeatureCollection',
  features: [$mod.data.data],
  value: null,
  parent: value,
  zoom: 3
}
// 注册
echarts.registerMap(name, oneMap)
// 加载
this.renderMap(name, [{
  name: name,
  parent: value,
  zoom: 3
}])