vue中实现地图下钻

首先说下需求和数据格式，需求是实现中国地图的下钻，下钻到省市区三级，对于直辖市下钻到二级，首先定义了三个数组存放省市区的数据：代码如下

initChart() {
      let chart = $echarts.init(document.getElementById("main"));
      let _self = this;
      $axios.get("/static/public/map/china.json").then(function(res) {
        let d = [];
        for (var i = 0; i < res.data.features.length; i++) {
          for(let j in _self.mapData01){
            if(_self.mapData01[j].province == res.data.features[i].properties.name){
              d.push({ //格式化省份的数据
                name: res.data.features[i].properties.name,
                value: _self.mapData01[j].num,
                selected:true,//数据区域高亮显示色块
                latitude: _self.mapData01[j].latitude,
                longitude: _self.mapData01[j].longitude,
              });
            } else {}
          }
        }
        _self.mapdata = d;
        _self.originalValue = d;
        //注册地图
        $echarts.registerMap("china", res.data);
        //绘制地图
        _self.renderMap("china", d,1);
      });
      //地图点击事件
      chart.on("click", function(params) {
        // console.log( params.name );
        if (params.name in provinces) {
          //如果点击的是34个省、市、自治区，绘制选中地区的二级地图
          $axios
            .get("/static/public/map/province/" + provinces[params.name] + ".json")
            .then(function(res) {
              
              $echarts.registerMap(params.name, res.data);
              var d = [];
              // console.log( params.name );
              if (_self.special.indexOf(params.name) >= 0) {
                // debugger
                for (var i = 0; i < res.data.features.length; i++) {
                  for(let j in _self.mapData03){
                    if(_self.mapData03[j].zone2 == res.data.features[i].properties.name){
                      d.push({
                        name: res.data.features[i].properties.name,
                        value: _self.mapData03[j].num,
                        selected:true,//echarts 绘制地图设置其中某些板块高亮（颜色）
                        latitude: _self.mapData03[j].latitude,
                        longitude: _self.mapData03[j].longitude,
                      });
                    } else {
                    }
                  }
                }
                // console.log(11);
                // console.log(d);
              } else {
                // console.log(22);
                for (var i = 0; i < res.data.features.length; i++) {
                  for(let j in _self.mapData02){
                    if(_self.mapData02[j].zone1 == res.data.features[i].properties.name){
                      d.push({
                        name: res.data.features[i].properties.name,
                        value: _self.mapData02[j].num,
                        selected:true,
                        latitude: _self.mapData02[j].latitude,
                        longitude: _self.mapData02[j].longitude,
                      });
                    } else {
                    }
                  }
                }
              }
              
              _self.renderMap(params.name, d,2);
            }).catch(err => {
              // //注册地图
              // console.log(11);
              // $echarts.registerMap("china", res.data);
              // //绘制地图
              // _self.renderMap("china", d,1);
            });
        } else if (params.seriesName in provinces) {
          //如果是【直辖市/特别行政区】只有二级下钻
          if (_self.special.indexOf(params.seriesName) >= 0) {
            _self.renderMap("china", _self.mapdata,1);
          } else {
            //显示县级地图
            if(cityMap[params.name] == undefined){  //点击第二级向第三级的时候找不到json文件时回到全国地图
              // console.log(11);
              _self.renderMap("china", _self.originalValue,1);
            } else {
              $axios
              .get("/static/public/map/city/" + cityMap[params.name] + ".json")
              .then(function(res) {
                
                $echarts.registerMap(params.name, res.data);
                var d = [];
                for (var i = 0; i < res.data.features.length; i++) {
                  for(let j in _self.mapData03){
                    if(_self.mapData03[j].zone2 == res.data.features[i].properties.name){
                      d.push({
                        name: res.data.features[i].properties.name,
                        value: _self.mapData03[j].num,
                        selected:true,//echarts 绘制地图设置其中某些板块高亮（颜色）
                        latitude: _self.mapData03[j].latitude,
                        longitude: _self.mapData03[j].longitude,
                      });
                    } else {
                    }
                  }
                }
                // debugger
                _self.renderMap(params.name, d,3); 
              });
            }
            
          }
        } else {
          _self.renderMap("china", _self.originalValue,1);
        }
      });
    },
    renderMap(map, data,number) {
      // console.log(map);
      // console.log(number);
      // console.log(data);
      if(number == 2){
        this.backMapName = map;
      }
      this.backMapNumber = number;
      // console.log(this.backMapName);
      // console.log(this.backMapNumber);
      let chart = $echarts.init(document.getElementById("main"));
      // this.option.title.subtext = map;//上方下钻标题
      this.geoData = [];
      this.geoCoordMap = {};
      this.geoTitle = "";//为空不显示热力点，
      let zoom = 1.1;//这点控制地图的大小，因为有的地图下钻很大就需要缩小
      if(number == 1){
        zoom = 1.1;
        this.geoTitle = "";
      } else if(number == 2){
        if(map == "重庆" || map == "北京" || map == "天津" || map == "上海"){
          zoom = 1.2;
        } else if(map == "内蒙古" || map == "黑龙江" || map == "广东" || map == "河南" || map == "辽宁" || map == "福建" || map == "甘肃") {
          zoom = 0.7;
        } else {
          zoom = 1.0;
        }
        
        this.geoTitle = "";
      } else if(number == 3){
        zoom = 1.0;
        for (var i = 0; i < data.length; i++) {
          this.geoData.push({
            name: data[i].name,
            value: data[i].value,
          });
          this.geoCoordMap[data[i].name] = [
            data[i].longitude,
            data[i].latitude
          ];
        }
        // setTimeout(function (){
        //   this.geoTitle = map;
        // },20);
        if(data.length != 0){
          this.geoTitle = map;//我的需求是第三级显示热力点
        } else {
          this.geoTitle = "";
        }
        // console.log(this.geoCoordMap);
      } else if(number == 4){
        zoom = 1.1;
        this.geoTitle = "";
      }

      
      // console.log(this.geoCoordMap);
      this.option.geo =  {
        map: this.geoTitle,
        show: false,
        roam: false,
        label: {
          normal: {
            show: true,
            textStyle: {
              color: "#F0F8FB"
            }
          },
          emphasis: {
            // 对应的鼠标悬浮效果
            show: false,
            textStyle: {
              color: "#F0F8FB"
            }
          }
        },
        itemStyle: {
          normal: {
            show: false,
            areaColor: "#0d202e",//有数据第三级背景色
            borderColor: "rgba(0, 0, 0, 0.2)",
          },
          emphasis: {
            areaColor: "#00c86c"
          }
        }
      };
      
      this.option.series = [
        {
          tooltip: {
            trigger: "item",
            formatter: p => {
              //自定义提示信息
              let dataCon = p.data;
              let txtCon =
                dataCon.name + " " + "场站数" + " : " + dataCon.value[2];
              return txtCon;
            }
          },
          show: false,
          roam: false,
          type: "effectScatter",//热力点属性值
          coordinateSystem: "geo",
          showAllSymbol: true,
          symbolSize: 20,
          symbolRotate: 35,
          label: {
            normal: {
              formatter: "",
              // position: "right",
              show: false,
              textStyle: {
                fontSize: 10,
              },
            },
            emphasis: {
              show: true
            }
          },
          itemStyle: {
            normal: {
              fontSize: 10,
              areaColor: "#00C76C"
            }
          },
          data: this.convertData(this.geoData)
        },
        {
          name: map,
          type: "map",
          mapType: map,
          roam: false,
          zoom:zoom,//地图缩放比例
          tooltip: {
            trigger: "item",
            textStyle: {
              align: "left"
            },
            formatter: function(a, b, c) {
              // console.log(a);
              var txtCon = "";
              if (isNaN(a.value)) {
                txtCon = a.name + " " + "场站数" + " : " + 0;
              } else {
                txtCon = a.name + " " + "场站数" + " : " + a.value.toFixed(0);
              }
              return txtCon;
            }
          },
          nameMap: {
            china: "中国"
          },
          label: {
            normal: {
              show: true,
              textStyle: {
                color: "#ffffff",//地图文字颜色
                // fontSize:this.width<689?10:10,//地图文字大小
                // fontSize:this.width<689?10:10,//地图文字大小
                fontSize: 10,//地图文字大小
              }
            },
            emphasis: {
              // 对应的鼠标悬浮效果
              show: true,
              textStyle: {
                color: "#F0F8FB",
              }
            }
          },
          itemStyle: {
            normal: {
              areaColor: "#3280d5",//整个地图背景色
              borderColor: "rgba(0, 0, 0, 0.2)",
            },
            emphasis: {
              label:{show:true},
              areaColor: "#01C86D",//鼠标悬停背景色
            }
          },
          data: data
        }
      ];
      //渲染地图
      chart.setOption(this.option);
    },
//热力点数据格式化
convertData(data) {
      // console.log(data);
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = this.geoCoordMap[data[i].name];
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value),
          });
        }
      }
      // console.log(res);
      return res;
    },

个人写法，仅供参考，json文件可去“我的下载”下载文件，json文件放在static文件夹下。