Echarts地图省市县穿透及区域居中显示

<template>
  <div class="echart-bmap_wrapper">
    <div class="btn">
      <button  v-if="level !== 0" type="primary" @click="int" size="mini">
        河北省
      </button>
      <button v-if="level === 2" type="primary" @click="intCity" size="mini">
        {{ levelName }}
      </button>
    </div>
    <div class="bmap-box" id="bmapChartBox"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import logo from '@/assets/img/jh.png';
// import axios from "axios";
export default {
  name: "echartBmap",
  data() {
    return {
      // 地图数据
      mapData: {
        河北省: require("./json/hebei.json"),
        //张家口市
        张家口市: require("./json/zjk/zjk.json"),
        桥西区: require("./json/zjk/qx.json"),
        宣化区: require("./json/zjk/xh.json"),
        桥东区: require("./json/zjk/qd.json"),

        //承德市
        承德市: require("./json/cd/cd.json"),
        双桥区: require("./json/cd/sq.json"),
        双滦区: require("./json/cd/sl.json"),


        //唐山市
        唐山市: require("./json/ts/ts.json"),
        曹妃甸区: require("./json/ts/cfd.json"),
        路南区: require("./json/ts/ln.json"),
        迁西县: require("./json/ts/qx.json"),
        迁安市: require("./json/ts/qa.json"),
        玉田县: require("./json/ts/yt.json"),
        路北区: require("./json/ts/lb.json"),
        丰南区: require("./json/ts/fn.json"),
        丰润区: require("./json/ts/fr.json"),
        乐亭县: require("./json/ts/lt.json"),
        遵化市: require("./json/ts/zh.json"),

        //秦皇岛市
        秦皇岛市: require("./json/qhd/qhd.json"),
        海港区: require("./json/qhd/hg.json"),
        北戴河区: require("./json/qhd/bdh.json"),
        山海关区: require("./json/qhd/shg.json"),

        //保定市
        保定市: require("./json/bd/bd.json"),
        徐水区: require("./json/bd/xs.json"),
        竞秀区: require("./json/bd/jx.json"),
        高碑店市: require("./json/bd/gbd.json"),
        涿州区: require("./json/bd/zz.json"),
        容城县: require("./json/bd/rc.json"),
        安新县: require("./json/bd/ax.json"),
        雄县: require("./json/bd/xx.json"),
        
        // 廊坊市
        廊坊市: require("./json/lf/lf.json"),
        广阳区: require("./json/lf/gy.json"),
        安次区: require("./json/lf/ac.json"),

        // 沧州市
        沧州市: require("./json/cz/cz.json"),
        黄骅市: require("./json/cz/hh.json"),
        任丘市: require("./json/cz/rq.json"),
        运河区: require("./json/cz/yh.json"),

        // 衡水市
        衡水市: require("./json/hs/hs.json"),
        桃城区: require("./json/hs/tc.json"),

        // 邢台市
        邢台市: require("./json/xt/xt.json"),
        信都区: require("./json/xt/xd.json"),

        // 邯郸市
        邯郸市: require("./json/hd/hd.json"),
        武安市: require("./json/hd/wa.json"),
        复兴区: require("./json/hd/fx.json"),
        邯山区: require("./json/hd/hs.json"),
        丛台区: require("./json/hd/ct.json"),

        //石家庄
        石家庄市: require("./json/sjz/sjz.json"),
        裕华区: require("./json/sjz/yhq.json"),
        正定县: require("./json/sjz/zdx.json"),
        辛集市: require("./json/sjz/xj.json"),
        鹿泉区: require("./json/sjz/lqq.json"),
        //雄安新区: require("./json/xaxq.json"),
      },
      level: 0, //自定义 河北省级0 市级1 区县级2
      levelName: "",
      option: {
        backgroundColor: "#fff", // 画布颜色
        tooltip: {
          triggerOn:"click", // hover改成点击
          enterable:true,// hover改成点击
          backgroundColor: "rgba(255,255,255,1)",
          borderColor: "#333",
          formatter: function (params) {
            console.log("2323", params.data);
            var result = "";
            result += params.data.name + "<br>";
            result += "<span>" + params.data.address + "</span><br>";
            result += "<span>" + params.data.phone + "</span><br>";
            result += "<span>" + params.data.workRule + "</span>";
            return result;
          },
        },
        //地理坐标系组件用于地图的绘制
        geo: [
          {
            map: "hebei",
            aspectScale: 1, // 这个参数用于 scale 地图的长宽比
            roam: false, // 是否允许缩放
            zoom: 1, // 当前视角的缩放比例
            center: [116.692385, 39.198286], // 河北省地图中心点坐标
            layoutSize: "100%", //地图的大小,支持相对于屏幕宽高的百分比或者绝对的像素大小。
            layoutCenter: ["50%", "50%"], //地图中心在屏幕中的位置
            label: {
              show: true, // 是否地图显示区域的文字，各省市的名字
              color: "#fff",
              fontSize:14,// 省市名称文字大小
            },
            itemStyle: {
              // 区域颜色
              areaColor: {
                type: "radial", //渐变方式
                x: 0.7,
                y: 0.5,
                r: 0.4,
                // 修改地图颜色 渐变效果
                colorStops: [
                  {
                    offset: 0,
                    color: "#0160AD", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#0160AD", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
              emphasis: {
                areaColor: "blue", // 鼠标移入区域背景颜色
                borderWidth: 0,
              },
              borderColor: "#FFFFFF",
              borderWidth: 1,
            },
            emphasis: {
              itemStyle: {
                areaColor: "#0160AD",
              },
              label: {
                show: 1,
                color: "#fff",
              },
            },
            zlevel: 3,
          },
        ],
        series: [
          {
            type: "scatter", // 图表类型
            coordinateSystem: "geo", // 坐标系  geo使用地理坐标系
            symbolSize:16, // 闪烁点的大小
            zlevel: 10, // 这里是关键，一定要放在 series中，显示层级，
            emphasis: {
              scale: true,
            },
            symbol:'image://' + logo,
            itemStyle: {
              // 点的颜色可以根据 params 参数里面的值去设定不通的颜色
              color: function () {
                return "white";
              },
              // shadowBlur: 10,
              // shadowColor: "#333",
            },
            data: [], // 点的数据，包含经纬度
          },
        ],
      },
      // 网点数据
      cityData: require("./json/position.json"),
    };
  },
   created() {
   
  },
  mounted() {
    console.log(this.position);
    this.drawMap(this.mapData["河北省"], 1, '河北省');
  },
  methods: {
    int() {
      this.level = 0;
      this.drawMap(this.mapData["河北省"], 1, '河北省');
    },
    intCity() {
      this.level = 1;
      console.log("this.levelName", this.levelName);
      this.drawMap(this.mapData[this.levelName], 1, this.levelName);
    },
    setMapCenterZoomData(data, zoom, center) {
      this.option.series[0].data = data;
      this.option.geo[0].zoom = zoom;
      this.option.geo[0].center = center;
      console.log('this.option', this.option)
    },
    drawMap(json, type = 0, city) {
      this.echarts = echarts;
      this.dom = document.getElementById("bmapChartBox");
      this.myChart = this.echarts.init(this.dom);
      this.echarts.registerMap("hebei", json);
      if (type == 1) {
        let data = this.cityData[city];
        console.log("data", this.cityData[city]);
        let mapCenter = this.mapData[city].features[0].properties.centroid;
        console.log("获取该区域中心点", mapCenter);
        this.setMapCenterZoomData(data, 1, mapCenter);
      } else {
        this.myChart.clear();
        this.setMapCenterZoomData([], 1, [116.713569, 39.527808]); // 河北省中心地带
      }

      this.myChart.setOption(this.option);
      this.myChart.off("click");
      this.myChart.on("click", (param) => {
        console.log("位置信息", this.cityData[param.name]);
        this.mapData[param.name] && this.myChart.clear();
        this.mapData[param.name] && this.drawMap(this.mapData[city], 1, city);
      });
    },
  },
};
</script>
<style lang="less" scoped>
.echart-bmap_wrapper {
  position: relative;
  .btn {
    position: absolute;
    left: 20px;
    top: 20px;
    z-index: 1;
    button{
      margin-right: 15px;
    }
  }
}
.bmap-box {
  width: 100%;
  height: 900px;
}
</style>

地图数据中有一个features数组，以下结构可以获取地图的质点
请注意不是 center，而是centroid!
cityData.features[0].properties.centroid;

 geo: [
          {
            layoutSize: "100%", //地图的大小,支持相对于屏幕宽高的百分比或者绝对的像素大小。
            layoutCenter: ["50%", "50%"], //地图中心在屏幕中的位置
            }
       ]