我这里实现的是河南省的地图  点击要下钻的区域展示相应区域的地图，点击地图外部空白处返回上一级。

一、准备geojson数据

网址：DataV.GeoAtlas地理小工具系列

下载需要的geojson数据。保存到src/assets文件夹下

准备河南省的地市编码json文件（all_henan.json）,该文件网上比较难找，我在这里贴出来all_henan.json文件

 [
    {
      "adcode": "410100",
      "name": "郑州市"
    }, {
      "adcode": "410200",
      "name": "开封市"
    }, {
      "adcode": "410300",
      "name": "洛阳市"
    }, {
      "adcode": "410400",
      "name": "平顶山市"
    }, {
      "adcode": "410500",
      "name": "安阳市"
    }, {
      "adcode": "410600",
      "name": "鹤壁市"
    }, {
      "adcode": "410700",
      "name": "新乡市"
    }, {
      "adcode": "410800",
      "name": "焦作市"
    }, {
      "adcode": "410900",
      "name": "濮阳市"
    }, {
      "adcode": "411000",
      "name": "许昌市"
    }, {
      "adcode": "411100",
      "name": "漯河市"
    }, {
      "adcode": "411200",
      "name": "三门峡市"
    }, {
      "adcode": "411300",
      "name": "南阳市"
    }, {
      "adcode": "411400",
      "name": "商丘市"
    }, {
      "adcode": "411500",
      "name": "信阳市"
    }, {
      "adcode": "411600",
      "name": "周口市"
    }, {
      "adcode": "411700",
      "name": "驻马店市"
    }, {
      "adcode": "419001",
      "name": "济源市"
    }]

如果要做全国地图，全国的省地市编码json文件（all.json）如下：（如果匹配有问题的话，可能需要加上省，如"河南"改为"河南省"）

[{
  "name": "安徽",
  "city": [{
    "adcode": "340100",
    "name": "合肥"
  }, {
    "adcode": "340200",
    "name": "芜湖"
  }, {
    "adcode": "340300",
    "name": "蚌埠"
  }, {
    "adcode": "340400",
    "name": "淮南"
  }, {
    "adcode": "340500",
    "name": "马鞍山"
  }, {
    "adcode": "340600",
    "name": "淮北"
  }, {
    "adcode": "340700",
    "name": "铜陵"
  }, {
    "adcode": "340800",
    "name": "安庆"
  }, {
    "adcode": "341000",
    "name": "黄山"
  }, {
    "adcode": "341100",
    "name": "滁州"
  }, {
    "adcode": "341200",
    "name": "阜阳"
  }, {
    "adcode": "341300",
    "name": "宿州"
  }, {
    "adcode": "341500",
    "name": "六安"
  }, {
    "adcode": "341600",
    "name": "亳州"
  }, {
    "adcode": "341700",
    "name": "池州"
  }, {
    "adcode": "341800",
    "name": "宣城"
  }]
}, {
  "name": "福建",
  "city": [{
    "adcode": "350100",
    "name": "福州"
  }, {
    "adcode": "350200",
    "name": "厦门"
  }, {
    "adcode": "350300",
    "name": "莆田"
  }, {
    "adcode": "350400",
    "name": "三明"
  }, {
    "adcode": "350500",
    "name": "泉州"
  }, {
    "adcode": "350600",
    "name": "漳州"
  }, {
    "adcode": "350700",
    "name": "南平"
  }, {
    "adcode": "350800",
    "name": "龙岩"
  }, {
    "adcode": "350900",
    "name": "宁德"
  }]
}, {
  "name": "广东",
  "city": [{
    "adcode": "440100",
    "name": "广州"
  }, {
    "adcode": "440200",
    "name": "韶关"
  }, {
    "adcode": "440300",
    "name": "深圳"
  }, {
    "adcode": "440400",
    "name": "珠海"
  }, {
    "adcode": "440500",
    "name": "汕头"
  }, {
    "adcode": "440600",
    "name": "佛山"
  }, {
    "adcode": "440700",
    "name": "江门"
  }, {
    "adcode": "440800",
    "name": "湛江"
  }, {
    "adcode": "440900",
    "name": "茂名"
  }, {
    "adcode": "441200",
    "name": "肇庆"
  }, {
    "adcode": "441300",
    "name": "惠州"
  }, {
    "adcode": "441400",
    "name": "梅州"
  }, {
    "adcode": "441500",
    "name": "汕尾"
  }, {
    "adcode": "441600",
    "name": "河源"
  }, {
    "adcode": "441700",
    "name": "阳江"
  }, {
    "adcode": "441800",
    "name": "清远"
  }, {
    "adcode": "441900",
    "name": "东莞"
  }, {
    "adcode": "442000",
    "name": "中山"
  }, {
    "adcode": "445100",
    "name": "潮州"
  }, {
    "adcode": "445200",
    "name": "揭阳"
  }, {
    "adcode": "445300",
    "name": "云浮"
  }]
}, {
  "name": "广西",
  "city": [{
    "adcode": "450100",
    "name": "南宁"
  }, {
    "adcode": "450200",
    "name": "柳州"
  }, {
    "adcode": "450300",
    "name": "桂林"
  }, {
    "adcode": "450400",
    "name": "梧州"
  }, {
    "adcode": "450500",
    "name": "北海"
  }, {
    "adcode": "450600",
    "name": "防城港"
  }, {
    "adcode": "450700",
    "name": "钦州"
  }, {
    "adcode": "450800",
    "name": "贵港"
  }, {
    "adcode": "450900",
    "name": "玉林"
  }, {
    "adcode": "451000",
    "name": "百色"
  }, {
    "adcode": "451100",
    "name": "贺州"
  }, {
    "adcode": "451200",
    "name": "河池"
  }, {
    "adcode": "451300",
    "name": "来宾"
  }, {
    "adcode": "451400",
    "name": "崇左"
  }]
}, {
  "name": "贵州",
  "city": [{
    "adcode": "520100",
    "name": "贵阳"
  }, {
    "adcode": "520200",
    "name": "六盘水"
  }, {
    "adcode": "520300",
    "name": "遵义"
  }, {
    "adcode": "520400",
    "name": "安顺"
  }, {
    "adcode": "520500",
    "name": "毕节"
  }, {
    "adcode": "520600",
    "name": "铜仁"
  }, {
    "adcode": "522300",
    "name": "黔西南布依族苗族自治州"
  }, {
    "adcode": "522600",
    "name": "黔东南苗族侗族自治州"
  }, {
    "adcode": "522700",
    "name": "黔南布依族苗族自治州"
  }]
}, {
  "name": "甘肃",
  "city": [{
    "adcode": "620100",
    "name": "兰州"
  }, {
    "adcode": "620200",
    "name": "嘉峪关"
  }, {
    "adcode": "620300",
    "name": "金昌"
  }, {
    "adcode": "620400",
    "name": "白银"
  }, {
    "adcode": "620500",
    "name": "天水"
  }, {
    "adcode": "620600",
    "name": "武威"
  }, {
    "adcode": "620700",
    "name": "张掖"
  }, {
    "adcode": "620800",
    "name": "平凉"
  }, {
    "adcode": "620900",
    "name": "酒泉"
  }, {
    "adcode": "621000",
    "name": "庆阳"
  }, {
    "adcode": "621100",
    "name": "定西"
  }, {
    "adcode": "621200",
    "name": "陇南"
  }, {
    "adcode": "622900",
    "name": "临夏回族自治州"
  }, {
    "adcode": "623000",
    "name": "甘南藏族自治州"
  }]
}, {
  "name": "河北",
  "city": [{
    "adcode": "130100",
    "name": "石家庄"
  }, {
    "adcode": "130200",
    "name": "唐山"
  }, {
    "adcode": "130300",
    "name": "秦皇岛"
  }, {
    "adcode": "130400",
    "name": "邯郸"
  }, {
    "adcode": "130500",
    "name": "邢台"
  }, {
    "adcode": "130600",
    "name": "保定"
  }, {
    "adcode": "130700",
    "name": "张家口"
  }, {
    "adcode": "130800",
    "name": "承德"
  }, {
    "adcode": "130900",
    "name": "沧州"
  }, {
    "adcode": "131000",
    "name": "廊坊"
  }, {
    "adcode": "131100",
    "name": "衡水"
  }]
}, {
  "name": "黑龙江",
  "city": [{
    "adcode": "230100",
    "name": "哈尔滨"
  }, {
    "adcode": "230200",
    "name": "齐齐哈尔"
  }, {
    "adcode": "230300",
    "name": "鸡西"
  }, {
    "adcode": "230400",
    "name": "鹤岗"
  }, {
    "adcode": "230500",
    "name": "双鸭山"
  }, {
    "adcode": "230600",
    "name": "大庆"
  }, {
    "adcode": "230700",
    "name": "伊春"
  }, {
    "adcode": "230800",
    "name": "佳木斯"
  }, {
    "adcode": "230900",
    "name": "七台河"
  }, {
    "adcode": "231000",
    "name": "牡丹江"
  }, {
    "adcode": "231100",
    "name": "黑河"
  }, {
    "adcode": "231200",
    "name": "绥化"
  }, {
    "adcode": "232700",
    "name": "大兴安岭"
  }]
}, {
  "name": "河南省",
  "adcode": "410000",
  "city": [{
    "adcode": "410100",
    "name": "郑州"
  }, {
    "adcode": "410200",
    "name": "开封"
  }, {
    "adcode": "410300",
    "name": "洛阳"
  }, {
    "adcode": "410400",
    "name": "平顶山"
  }, {
    "adcode": "410500",
    "name": "安阳"
  }, {
    "adcode": "410600",
    "name": "鹤壁"
  }, {
    "adcode": "410700",
    "name": "新乡"
  }, {
    "adcode": "410800",
    "name": "焦作"
  }, {
    "adcode": "410900",
    "name": "濮阳"
  }, {
    "adcode": "411000",
    "name": "许昌市"
  }, {
    "adcode": "411100",
    "name": "漯河"
  }, {
    "adcode": "411200",
    "name": "三门峡"
  }, {
    "adcode": "411300",
    "name": "南阳"
  }, {
    "adcode": "411400",
    "name": "商丘"
  }, {
    "adcode": "411500",
    "name": "信阳"
  }, {
    "adcode": "411600",
    "name": "周口"
  }, {
    "adcode": "411700",
    "name": "驻马店"
  }, {
    "adcode": "419001",
    "name": "济源"
  }]
}, {
  "name": "湖北",
  "city": [{
    "adcode": "420100",
    "name": "武汉"
  }, {
    "adcode": "420200",
    "name": "黄石"
  }, {
    "adcode": "420300",
    "name": "十堰"
  }, {
    "adcode": "420500",
    "name": "宜昌"
  }, {
    "adcode": "420600",
    "name": "襄阳"
  }, {
    "adcode": "420700",
    "name": "鄂州"
  }, {
    "adcode": "420800",
    "name": "荆门"
  }, {
    "adcode": "420900",
    "name": "孝感"
  }, {
    "adcode": "421000",
    "name": "荆州"
  }, {
    "adcode": "421100",
    "name": "黄冈"
  }, {
    "adcode": "421200",
    "name": "咸宁"
  }, {
    "adcode": "421300",
    "name": "随州"
  }, {
    "adcode": "422800",
    "name": "恩施土家族苗族自治州"
  }, {
    "adcode": "429004",
    "name": "仙桃"
  }, {
    "adcode": "429005",
    "name": "潜江"
  }, {
    "adcode": "429006",
    "name": "天门"
  }, {
    "adcode": "429021",
    "name": "神农架林区"
  }]
}, {
  "name": "湖南",
  "city": [{
    "adcode": "430100",
    "name": "长沙"
  }, {
    "adcode": "430200",
    "name": "株洲"
  }, {
    "adcode": "430300",
    "name": "湘潭"
  }, {
    "adcode": "430400",
    "name": "衡阳"
  }, {
    "adcode": "430500",
    "name": "邵阳"
  }, {
    "adcode": "430600",
    "name": "岳阳"
  }, {
    "adcode": "430700",
    "name": "常德"
  }, {
    "adcode": "430800",
    "name": "张家界"
  }, {
    "adcode": "430900",
    "name": "益阳"
  }, {
    "adcode": "431000",
    "name": "郴州"
  }, {
    "adcode": "431100",
    "name": "永州"
  }, {
    "adcode": "431200",
    "name": "怀化"
  }, {
    "adcode": "431300",
    "name": "娄底"
  }, {
    "adcode": "433100",
    "name": "湘西土家族苗族自治州"
  }]
}, {
  "name": "海南",
  "city": [{
    "adcode": "460100",
    "name": "海口"
  }, {
    "adcode": "460200",
    "name": "三亚"
  }, {
    "adcode": "460300",
    "name": "三沙"
  }, {
    "adcode": "460400",
    "name": "儋州"
  }]
}, {
  "name": "吉林",
  "city": [{
    "adcode": "220100",
    "name": "长春"
  }, {
    "adcode": "220200",
    "name": "吉林"
  }, {
    "adcode": "220300",
    "name": "四平"
  }, {
    "adcode": "220400",
    "name": "辽源"
  }, {
    "adcode": "220500",
    "name": "通化"
  }, {
    "adcode": "220600",
    "name": "白山"
  }, {
    "adcode": "220700",
    "name": "松原"
  }, {
    "adcode": "220800",
    "name": "白城"
  }, {
    "adcode": "222400",
    "name": "延边朝鲜族自治州"
  }]
}, {
  "name": "江苏",
  "city": [{
    "adcode": "320100",
    "name": "南京"
  }, {
    "adcode": "320200",
    "name": "无锡"
  }, {
    "adcode": "320300",
    "name": "徐州"
  }, {
    "adcode": "320400",
    "name": "常州"
  }, {
    "adcode": "320500",
    "name": "苏州"
  }, {
    "adcode": "320600",
    "name": "南通"
  }, {
    "adcode": "320700",
    "name": "连云港"
  }, {
    "adcode": "320800",
    "name": "淮安"
  }, {
    "adcode": "320900",
    "name": "盐城"
  }, {
    "adcode": "321000",
    "name": "扬州"
  }, {
    "adcode": "321100",
    "name": "镇江"
  }, {
    "adcode": "321200",
    "name": "泰州"
  }, {
    "adcode": "321300",
    "name": "宿迁"
  }]
}, {
  "name": "江西",
  "city": [{
    "adcode": "360100",
    "name": "南昌"
  }, {
    "adcode": "360200",
    "name": "景德镇"
  }, {
    "adcode": "360300",
    "name": "萍乡"
  }, {
    "adcode": "360400",
    "name": "九江"
  }, {
    "adcode": "360500",
    "name": "新余"
  }, {
    "adcode": "360600",
    "name": "鹰潭"
  }, {
    "adcode": "360700",
    "name": "赣州"
  }, {
    "adcode": "360800",
    "name": "吉安"
  }, {
    "adcode": "360900",
    "name": "宜春"
  }, {
    "adcode": "361000",
    "name": "抚州"
  }, {
    "adcode": "361100",
    "name": "上饶"
  }]
}, {
  "name": "辽宁",
  "city": [{
    "adcode": "210100",
    "name": "沈阳"
  }, {
    "adcode": "210200",
    "name": "大连"
  }, {
    "adcode": "210300",
    "name": "鞍山"
  }, {
    "adcode": "210400",
    "name": "抚顺"
  }, {
    "adcode": "210500",
    "name": "本溪"
  }, {
    "adcode": "210600",
    "name": "丹东"
  }, {
    "adcode": "210700",
    "name": "锦州"
  }, {
    "adcode": "210800",
    "name": "营口"
  }, {
    "adcode": "210900",
    "name": "阜新"
  }, {
    "adcode": "211000",
    "name": "辽阳"
  }, {
    "adcode": "211100",
    "name": "盘锦"
  }, {
    "adcode": "211200",
    "name": "铁岭"
  }, {
    "adcode": "211300",
    "name": "朝阳"
  }, {
    "adcode": "211400",
    "name": "葫芦岛"
  }]
}, {
  "name": "内蒙古",
  "city": [{
    "adcode": "150100",
    "name": "呼和浩特"
  }, {
    "adcode": "150200",
    "name": "包头"
  }, {
    "adcode": "150300",
    "name": "乌海"
  }, {
    "adcode": "150400",
    "name": "赤峰"
  }, {
    "adcode": "150500",
    "name": "通辽"
  }, {
    "adcode": "150600",
    "name": "鄂尔多斯"
  }, {
    "adcode": "150700",
    "name": "呼伦贝尔"
  }, {
    "adcode": "150800",
    "name": "巴彦淖尔"
  }, {
    "adcode": "150900",
    "name": "乌兰察布"
  }, {
    "adcode": "152200",
    "name": "兴安盟"
  }, {
    "adcode": "152500",
    "name": "锡林郭勒盟"
  }, {
    "adcode": "152900",
    "name": "阿拉善盟"
  }]
}, {
  "name": "宁夏",
  "city": [{
    "adcode": "640100",
    "name": "银川"
  }, {
    "adcode": "640200",
    "name": "石嘴山"
  }, {
    "adcode": "640300",
    "name": "吴忠"
  }, {
    "adcode": "640400",
    "name": "固原"
  }, {
    "adcode": "640500",
    "name": "中卫"
  }]
}, {
  "name": "青海",
  "city": [{
    "adcode": "630100",
    "name": "西宁"
  }, {
    "adcode": "630200",
    "name": "海东"
  }, {
    "adcode": "632200",
    "name": "海北藏族自治州"
  }, {
    "adcode": "632300",
    "name": "黄南藏族自治州"
  }, {
    "adcode": "632500",
    "name": "海南藏族自治州"
  }, {
    "adcode": "632600",
    "name": "果洛藏族自治州"
  }, {
    "adcode": "632700",
    "name": "玉树藏族自治州"
  }, {
    "adcode": "632800",
    "name": "海西蒙古族藏族自治州"
  }]
}, {
  "name": "山西",
  "city": [{
    "adcode": "140100",
    "name": "太原"
  }, {
    "adcode": "140200",
    "name": "大同"
  }, {
    "adcode": "140300",
    "name": "阳泉"
  }, {
    "adcode": "140400",
    "name": "长治"
  }, {
    "adcode": "140500",
    "name": "晋城"
  }, {
    "adcode": "140600",
    "name": "朔州"
  }, {
    "adcode": "140700",
    "name": "晋中"
  }, {
    "adcode": "140800",
    "name": "运城"
  }, {
    "adcode": "140900",
    "name": "忻州"
  }, {
    "adcode": "141000",
    "name": "临汾"
  }, {
    "adcode": "141100",
    "name": "吕梁"
  }]
}, {
  "name": "山东",
  "city": [{
    "adcode": "370100",
    "name": "济南"
  }, {
    "adcode": "370200",
    "name": "青岛"
  }, {
    "adcode": "370300",
    "name": "淄博"
  }, {
    "adcode": "370400",
    "name": "枣庄"
  }, {
    "adcode": "370500",
    "name": "东营"
  }, {
    "adcode": "370600",
    "name": "烟台"
  }, {
    "adcode": "370700",
    "name": "潍坊"
  }, {
    "adcode": "370800",
    "name": "济宁"
  }, {
    "adcode": "370900",
    "name": "泰安"
  }, {
    "adcode": "371000",
    "name": "威海"
  }, {
    "adcode": "371100",
    "name": "日照"
  }, {
    "adcode": "371200",
    "name": "莱芜"
  }, {
    "adcode": "371300",
    "name": "临沂"
  }, {
    "adcode": "371400",
    "name": "德州"
  }, {
    "adcode": "371500",
    "name": "聊城"
  }, {
    "adcode": "371600",
    "name": "滨州"
  }, {
    "adcode": "371700",
    "name": "菏泽"
  }]
}, {
  "name": "四川",
  "city": [{
    "adcode": "510100",
    "name": "成都"
  }, {
    "adcode": "510300",
    "name": "自贡"
  }, {
    "adcode": "510400",
    "name": "攀枝花"
  }, {
    "adcode": "510500",
    "name": "泸州"
  }, {
    "adcode": "510600",
    "name": "德阳"
  }, {
    "adcode": "510700",
    "name": "绵阳"
  }, {
    "adcode": "510800",
    "name": "广元"
  }, {
    "adcode": "510900",
    "name": "遂宁"
  }, {
    "adcode": "511000",
    "name": "内江"
  }, {
    "adcode": "511100",
    "name": "乐山"
  }, {
    "adcode": "511300",
    "name": "南充"
  }, {
    "adcode": "511400",
    "name": "眉山"
  }, {
    "adcode": "511500",
    "name": "宜宾"
  }, {
    "adcode": "511600",
    "name": "广安"
  }, {
    "adcode": "511700",
    "name": "达州"
  }, {
    "adcode": "511800",
    "name": "雅安"
  }, {
    "adcode": "511900",
    "name": "巴中"
  }, {
    "adcode": "512000",
    "name": "资阳"
  }, {
    "adcode": "513200",
    "name": "阿坝藏族羌族自治州"
  }, {
    "adcode": "513300",
    "name": "甘孜藏族自治州"
  }, {
    "adcode": "513400",
    "name": "凉山彝族自治州"
  }]
}, {
  "name": "陕西",
  "city": [{
    "adcode": "610100",
    "name": "西安"
  }, {
    "adcode": "610200",
    "name": "铜川"
  }, {
    "adcode": "610300",
    "name": "宝鸡"
  }, {
    "adcode": "610400",
    "name": "咸阳"
  }, {
    "adcode": "610500",
    "name": "渭南"
  }, {
    "adcode": "610600",
    "name": "延安"
  }, {
    "adcode": "610700",
    "name": "汉中"
  }, {
    "adcode": "610800",
    "name": "榆林"
  }, {
    "adcode": "610900",
    "name": "安康"
  }, {
    "adcode": "611000",
    "name": "商洛"
  }]
}, {
  "name": "天津",
  "city": [{
    "adcode": "120100",
    "name": "天津市市辖区"
  }]
}, {
  "name": "台湾",
  "city": [{
    "adcode": "719002",
    "name": "台北"
  }, {
    "adcode": "719019",
    "name": "高雄"
  }, {
    "adcode": "719017",
    "name": "台中"
  }, {
    "adcode": "719016",
    "name": "台南"
  }, {
    "adcode": "719010",
    "name": "新北"
  }, {
    "adcode": "719011",
    "name": "基隆"
  }, {
    "adcode": "719006",
    "name": "新竹"
  }, {
    "adcode": "719004",
    "name": "嘉义"
  }]
}, {
  "name": "西藏",
  "city": [{
    "adcode": "540100",
    "name": "拉萨"
  }, {
    "adcode": "540200",
    "name": "日喀则"
  }, {
    "adcode": "540300",
    "name": "昌都"
  }, {
    "adcode": "540400",
    "name": "林芝"
  }, {
    "adcode": "540500",
    "name": "山南"
  }, {
    "adcode": "540600",
    "name": "那曲"
  }, {
    "adcode": "542500",
    "name": "阿里"
  }]
}, {
  "name": "新疆",
  "city": [{
    "adcode": "650100",
    "name": "乌鲁木齐"
  }, {
    "adcode": "650200",
    "name": "克拉玛依"
  }, {
    "adcode": "650400",
    "name": "吐鲁番"
  }, {
    "adcode": "650500",
    "name": "哈密"
  }, {
    "adcode": "652300",
    "name": "昌吉回族自治州"
  }, {
    "adcode": "652700",
    "name": "博尔塔拉蒙古自治州"
  }, {
    "adcode": "652800",
    "name": "巴音郭楞蒙古自治州"
  }, {
    "adcode": "652900",
    "name": "阿克苏"
  }, {
    "adcode": "653000",
    "name": "克孜勒苏柯尔克孜自治州"
  }, {
    "adcode": "653100",
    "name": "喀什"
  }, {
    "adcode": "653200",
    "name": "和田"
  }, {
    "adcode": "654000",
    "name": "伊犁哈萨克自治州"
  }, {
    "adcode": "654200",
    "name": "塔城"
  }, {
    "adcode": "654300",
    "name": "阿勒泰"
  }, {
    "adcode": "659001",
    "name": "石河子"
  }, {
    "adcode": "659002",
    "name": "阿拉尔"
  }, {
    "adcode": "659003",
    "name": "图木舒克"
  }, {
    "adcode": "659004",
    "name": "五家渠"
  }]
}, {
  "name": "云南",
  "city": [{
    "adcode": "530100",
    "name": "昆明"
  }, {
    "adcode": "530300",
    "name": "曲靖"
  }, {
    "adcode": "530400",
    "name": "玉溪"
  }, {
    "adcode": "530500",
    "name": "保山"
  }, {
    "adcode": "530600",
    "name": "昭通"
  }, {
    "adcode": "530700",
    "name": "丽江"
  }, {
    "adcode": "530800",
    "name": "普洱"
  }, {
    "adcode": "530900",
    "name": "临沧"
  }, {
    "adcode": "532300",
    "name": "楚雄彝族自治州"
  }, {
    "adcode": "532500",
    "name": "红河哈尼族彝族自治州"
  }, {
    "adcode": "532600",
    "name": "文山壮族苗族自治州"
  }, {
    "adcode": "532800",
    "name": "西双版纳傣族自治州"
  }, {
    "adcode": "532900",
    "name": "大理白族自治州"
  }, {
    "adcode": "533100",
    "name": "德宏傣族景颇族自治州"
  }, {
    "adcode": "533300",
    "name": "怒江傈僳族自治州"
  }, {
    "adcode": "533400",
    "name": "迪庆藏族自治州"
  }]
}, {
  "name": "浙江",
  "city": [{
    "adcode": "330100",
    "name": "杭州"
  }, {
    "adcode": "330200",
    "name": "宁波"
  }, {
    "adcode": "330300",
    "name": "温州"
  }, {
    "adcode": "330400",
    "name": "嘉兴"
  }, {
    "adcode": "330500",
    "name": "湖州"
  }, {
    "adcode": "330600",
    "name": "绍兴"
  }, {
    "adcode": "330700",
    "name": "金华"
  }, {
    "adcode": "330800",
    "name": "衢州"
  }, {
    "adcode": "330900",
    "name": "舟山"
  }, {
    "adcode": "331000",
    "name": "台州"
  }, {
    "adcode": "331100",
    "name": "丽水"
  }]
},
  {
    "name": "上海",
    "city": [{
      "adcode": "310000",
      "name": "上海市区"
    }]
  },
  {
    "name": "重庆",
    "city": [{
      "adcode": "500000",
      "name": "重庆市区"
    }]
  },
  {
    "name": "北京",
    "city": [{
      "adcode": "110000",
      "name": "北京市区"
    }]
  }
]

二、点击区域下钻事件： click事件:myChart.on('click', params => {});  

      // 解绑click事件
      myChart.off("click");
      //给地图添加监听事件
      myChart.on('click', params => {
        //let alladcode=require('@/assets/all.json')
        if(alladcode){
          let clickRegion = alladcode.filter(areaJson => areaJson.name === params.name);
          let clickRegionCode;
          if(clickRegion){
            clickRegionCode=clickRegion[0].adcode;
          }else{
            clickRegionCode=410000;
          }
          let regionGeoJson=this.getGeoJson(clickRegionCode + '_full.json');
          this.$emit('setName',params.name)
          this.initMapChart(regionGeoJson, params.name, myChart, clickRegion[0].city)
        }
      })

三、点击外部空白区域返回上一级：myChart.getZr().on('click', params=>{}); 

      myChart.getZr().on('click', params => {
        if(params.target) {
          //画布非空白区
          return;
        } else {
          //画布空白区 返回上一级
          let alladcode=require('@/assets/all_henan.json')
          let regionGeoJson=this.getGeoJson(410000 + '_full.json');
          this.$emit('setName','河南省')
          this.initMapChart(regionGeoJson, '河南省', myChart, alladcode)
        }
      });

四、完整代码 

CenterCmp.vue

<template>
  <div class="center-cmp">
    <div class="map" ref="mapChart" style="width: 4.166667rem /* 800/192 */;height:2.59375rem /* 498/192 */;"></div>
  </div>
</template>

<script>
export default {
  name: 'CenterCmp',
  components: {},
  data () {
    return {
      config: {
        data: [ ],
        color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
        lineWidth: 30,
        radius: '55%',
        activeRadius: '60%'
      },
      alladcode:[],
      publicUrl:'//geo.datav.aliyun.com/areas_v3/bound/',
      labelConfig: {
        data: ['收费站', '监控中心', '道路外场', '其他']
      }
    }
  },
  methods: {
    initChart: function () {
      const echarts = require('echarts')
      const el = this.$refs.mapChart
      const chart = echarts.init(el)
      let alladcode =  require('@/assets/all_henan.json')
      let chinaGeoJson =  require('@/assets/410000_full.json')
      this.initMapChart(chinaGeoJson, '河南省', chart, alladcode)
    },
    //获取地图json数据
    getGeoJson (jsonName) {
      // this.$axios.get(this.publicUrl + jsonName).then(result => {
      //   return  result;
      return require('@/assets/'+jsonName)
      // })
    },
    initMapChart (geoJson, name, chart, alladcode) {
      //geoJson = require('@/assets/410000_full_xuchang.json')
      const el = this.$refs.mapChart
      const echarts = require('echarts')
      const myChart = echarts.init(el)
      echarts.registerMap('geo', geoJson)

      const option = {
        // 这里渲染地图
        // 数据映射
        visualMap: {
          type: 'piecewise', // 分段标签
          min: 0, // 最小值
          max: 50, // 最大值，不设置为无限大
          right: 30, // 距离右侧位置
          bottom: 30, // 距离底部位置
          orient: 'vertical', // 组件竖直放置
          align: 'left', // 色块在左
          textGap: 14, // 文字主体之间的距离
          itemSymbol: 'circle', // 右下角映射组件使用圆点形状
          show: true,
          seriesIndex: 0, // 指定取哪个系列的数据(series.data)，若不设置则会影响图上标点颜色设置。
          // 一以下是分段式视觉映射组件的每一段的范围
          // gt：大于、gte：大于等于、lt：小于、lte：小于等于。
          textStyle:{
            color:'#fff'//文字颜色
          },
          pieces: [
            {
              gt: 5,
              label: '5个以上',
              color: '#1492FF',//图元颜色
            },
            {
              gte: 2,
              lte: 5,
              label: '2-5个',
              color: '#59AAF5'
            },
            {
              gte: 0,
              lt: 2,
              label: '0-2个',
              color: '#99CBF9'
            }
          ]
          /*
          pieces或者inRange内设置颜色试验时都能生效，个人认为需要传入组件控制颜色时
          再选择用inRange，两个都存在并给予不同的颜色，显示以pieces为主。
          */
        },
        geo: {
          map: 'geo', // 上面引入的数据名
          show: true,
          roam: false, // 关闭拖拽
          label: {
            show: true,
            color: '#fff',
            fontSize: 15
          },
          itemStyle: {
            areaColor: '#1492FF', // 地图区域的颜色(没有数据时会按照这个颜色显示)
            borderColor: '#fff', // 地图区域的边框
            borderWidth: 0.6
          },
          emphasis: { // 高亮的显示设置
            label: {
              color: '#fff'
            },
            itemStyle: {
              areaColor: '#9DE3FF'
            }
          },
          select: { // 选中显示设置
            label: {
              color: '#fff'
            },
            itemStyle: {
              areaColor: '#9DE3FF'
            }
          }
        },
        series: [
          // 配置数据的显示
          {
            type: 'map', // 类型map
            geoIndex: 0, // 指定geo属性后，series-map.map 属性，以及 series-map.itemStyle 等样式配置不再起作用，而是采用 geo 中的相应属性。
            data: [ ]
          },
          // 以下配置了图中白色标记圆点的显示
          {
            type: 'scatter', // 类型：散点
            coordinateSystem: 'geo', // 使用地理坐标系
            itemStyle: {
              color: {
                type: 'radial', // 径向渐变，前三个参数分别是圆心 x, y 和半径
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [
                  {
                    offset: 0.5,
                    color: '#fff' // 50% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgb(0 0 0 / 0%)' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              },
              borderColor: '#fff', // 边框白色
              borderWidth: 1 // 边框宽度
            },
            symbolSize: 10, // 散点大小
            data: [ ],
            zlevel: 1
          }
        ]
      }

      myChart.setOption(option)
      myChart.getZr().on('click', params => {
        if(params.target) {
          //画布非空白区
          return;
        } else {
          //画布空白区 返回上一级
          let alladcode=require('@/assets/all_henan.json')
          let regionGeoJson=this.getGeoJson(410000 + '_full.json');
          this.$emit('setName','河南省')
          this.initMapChart(regionGeoJson, '河南省', myChart, alladcode)
        }
      });
      // 解绑click事件
      myChart.off("click");
      //给地图添加监听事件
      myChart.on('click', params => {
        //let alladcode=require('@/assets/all.json')
        if(alladcode){
          let clickRegion = alladcode.filter(areaJson => areaJson.name === params.name);
          let clickRegionCode;
          if(clickRegion){
            clickRegionCode=clickRegion[0].adcode;
          }else{
            clickRegionCode=410000;
          }
          let regionGeoJson=this.getGeoJson(clickRegionCode + '_full.json');
          this.$emit('setName',params.name)
          this.initMapChart(regionGeoJson, params.name, myChart, clickRegion[0].city)
        }
      })
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    }
  },
  mounted () {
    this.initChart()
  }
}
</script>

<style lang='less'>
.center-cmp {
  width: 4.166667rem /* 800/192 */;
  height: 3.125rem /* 600/192 */;
  // width: 100%;
  // height: 100%;
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-direction: column;

  .cc-header {
    height: .364583rem /* 70/192 */;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .15625rem /* 30/192 */;
  }

  .cc-details {
    height: .625rem /* 120/192 */;
    display: flex;
    justify-content: center;
    font-size: .166667rem /* 32/192 */;
    align-items: center;

    .card {
      background-color: rgba(4,49,128,.6);
      color: #08e5ff;
      height: .364583rem /* 70/192 */;
      width: .364583rem /* 70/192 */;
      font-size: .234375rem /* 45/192 */;
      font-weight: bold;
      line-height: .364583rem /* 70/192 */;
      text-align: center;
      margin: .052083rem /* 10/192 */;
    }
  }

  .cc-main-container {
    position: relative;
    flex: 1;
    display: flex;

    .ccmc-middle {
      width: 50%;
      height: 90%;

      .active-ring-name {
        font-size: .104167rem /* 20/192 */ !important;
      }
    }

    .ccmc-left, .ccmc-right {
      width: 25%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-size: .125rem /* 24/192 */;

      span {
        font-size: .208333rem /* 40/192 */;
        font-weight: bold;
      }

      .station-info {
        height: 80px;
        display: flex;
        align-items: center;
      }
    }

    .ccmc-left {
      align-items: flex-end;

      span {
        margin-left: .104167rem /* 20/192 */;
      }
    }

    .ccmc-right {
      align-items: flex-start;

      span {
        margin-right: .104167rem /* 20/192 */;
      }
    }
  }

  .label-tag {
    position: absolute;
    width: 2.604167rem /* 500/192 */;
    height: .15625rem /* 30/192 */;
    bottom: .052083rem /* 10/192 */;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>

​