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

代码语言：javascript复制

<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>

关于地图中心点显示在窗口的中心

1. 获取地图中心点

代码语言：javascript复制

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

1. 将地图中心点设置在窗口中心

代码语言：javascript复制

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

centroid（质心）的定义

centroid（质心）是一个几何学上的概念，它指的是一个形状中所有点的平均位置。对于多边形等复杂形状，质心通常位于形状内部，且是该形状的一个平衡点。

在FeatureCollection中的应用

当我们谈论FeatureCollection中的centroid时，我们实际上是在谈论如何计算或获取这个集合中每个地理特征的质心。 在许多地理信息系统和平台中，如GEE，提供了直接计算Geometry（几何形状）质心的方法，如ee.Geometry.centroid()。这个方法可以被应用于FeatureCollection中的每个Feature，以获取其几何形状的质心。

获取地图数据可点击此处

json echarts require 地图 数据

0 人点赞