Vue+Echarts实现省市县地图下钻（地图钻取）+ 散点图

       在做可视化大屏时，项目需求要实现省市县地图下钻，并且根据不同状态标记点位，散点图位置根据接口返回的地区名与地图名相匹配去拿到对应的位置。以下是福建省及下面市县展示（如需其它省份，请修改区划编码）

其中地图数据用了阿里云数据可视化平台DataV.GeoAtlas

地址：https://datav.aliyun.com/portal/school/atlas/area_selector

实现效果图片展示：

省份地图：

下钻县级地图：

代码如下：

<template>
  <div class="network-map" id="content">
    <div
      style="background: #09153d; padding: 10px; height: calc(100vh - 170px)"
    >
      <div
        id="echatsMap"
        style="width: 100%; height: calc(100vh - 170px)"
      ></div>
    </div>
  </div>
</template>
  
  <script>
import { getLoginLogToday } from "@/api/monitorScreen/monitorScreen.js";
import * as echarts from "echarts";
import axios from "axios";

export default {
  name: "networkMonitorMap",
  data() {
    return {
      cityName: "福建省", // 默认福建省
      tenantCode: 35, // 区划 默认福建
      cityData: {}, // 地图登录数据
      cityDataItem: [], // 城市散点图数据
      publicUrl: "https://geo.datav.aliyun.com/areas_v3/bound/",
      fujianGeoJson: {}, // 数据
      alladcode: {}, // 所有地图数据
      chart: {}, // 图表
    };
  },
  mounted() {
    this.getAllGeoJson("all.json");
  },
  methods: {
    //echarts绘图
    initEcharts(geoJson, name, chart, alladcode) {
      var that = this;
      //获取当前显示地图下方地市的坐标点数据； 用于气泡显示
      let geoCoordMap = {};
      // 获取地区详细信息
      let mapFeatures = geoJson.features;
      // 遍历获取每个地区的经纬度
      mapFeatures.forEach(function (v, i) {
        // 获取当前地区名
        let name = v.properties.name;
        if (name) {
          // 获取当前地区的经纬度
          geoCoordMap[name] = v.properties.center;
        }
      });
      //将data数据进入方法，取需要的参数； 用于气泡显示
      let convertData = function (data) {
        var res = [];
        data.forEach((item) => {
          // 获取当前省份的经纬度坐标
          let geoCoord = geoCoordMap[item.name];
          if (geoCoord) {
            res.push({
              // name 表示地区名称
              name: item.name,
              // value数据格式为：[113.665412, 34.757975, '200']
              value: geoCoord.concat(item.value),
            });
          }
        });
        return res;
      };
      echarts.registerMap(name, geoJson);
      var option = {
        //鼠标经过展示数据方法
        tooltip: {
          triggerOn: "mousemove",
          formatter: function (item) {
            // 根据匹配名字添加赋值value
            for (let k in that.cityData) {
              if (item.name == k) {
                that.$set(item, "value", that.cityData[k]);
              }
            }
            let resData = item;
            if (
              resData.value != null &&
              resData.value != 0 &&
              !isNaN(resData.value)
            ) {
              return resData.name + "<br/>" + "在线人数:" + resData.value;
            } else {
              return item.name + "<br/>" + "在线人数: 0";
            }
          },
          backgroundColor: "rgba(29, 38, 71)",
          // 额外附加的阴影
          extraCssText: "box-shadow:0 0 4px rgba(11, 19, 43,0.8)",
        },
        geo: {
          map: name || "福建省", // 引入地图 省份或者 国家
          layoutCenter: ["50%", "50%"], //设置后left/right/top/bottom等属性无效
          layoutSize: "40%",
          roam: false, //开启鼠标缩放
          zoom: 2,
          label: {
            // 通常状态下的样式
            normal: {
              show: true,
              textStyle: {
                fontSize: 18,
                color: "#fff",
                fontFamily: "impact",
              },
            },
            // 鼠标放上去的样式
            emphasis: {
              textStyle: {
                color: "#fff",
              },
            },
          },
          // 地图区域的样式设置
          itemStyle: {
            normal: {
              borderColor: "#fff",
              borderWidth: 1,
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 1,
                    color: "#112c8f", // 100% 处的颜色
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
              shadowColor: "rgba(128, 217, 248, 1)",
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 10,
            },
            // 鼠标放上去高亮的样式
            emphasis: {
              areaColor: "#389BB7",
              borderWidth: 0,
            },
          },
        },
        //进行气泡标点
        series: [
          {
            type: "map",
            map: convertData(that.cityDataItem),
            geoIndex: 0,
            aspectScale: 0.75, //长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: {
              normal: {
                show: true,
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: "#fff",
                },
              },
            },
            roam: false,
            itemStyle: {
              normal: {
                areaColor: "#031525",
                borderColor: "#3B5077",
              },
              emphasis: {
                areaColor: "#2B91B7",
              },
            },
            animation: true,
            data: convertData(that.cityDataItem),
          },
          {
            name: "散点", // 自定义名称
            type: "effectScatter",
            coordinateSystem: "geo",
            data: convertData(that.cityDataItem),
            showEffectOn: "render",
            symbolSize: 10,
            geoIndex: 0,
            rippleEffect: {
              scale: 4, // 波纹的最大缩放比例
              brushType: "fill",
            },
            encode: {
              value: 2,
            },
            tooltip: {
              trigger: "item",
            },
            hoverAnimation: true,
            itemStyle: {
              normal: {
                color: function (res) {
                  let value = res.value[2];
                  //根据value值对标点进行不同颜色显示
                  if (value == 0) {
                    return "yellow";
                  } else if (value == 1) {
                    return "green";
                  } else {
                    return "red";
                  }
                },
                shadowBlur: 10,
              },
            },
            //鼠标移入时样式
            emphasis: {
              itemStyle: {
                color: "#f4e925", // 高亮颜色
              },
            },
            zlevel: 4,
            symbolSize: 16,
            tooltip: {
              trigger: "item",
              // show:false,
              formatter: function (item) {
                // 根据匹配名字添加赋值value
                for (let k in that.cityData) {
                  if (item.name == k) {
                    that.$set(item, "value", that.cityData[k]);
                  }
                }
                let resData = item;
                if (
                  resData.value != null &&
                  resData.value != 0 &&
                  !isNaN(resData.value)
                ) {
                  return resData.name + "<br/>" + "在线人数:" + resData.value;
                } else {
                  return item.name + "<br/>" + "在线人数: 0";
                }
              },
            },
          },
        ],
      };

      chart.setOption(option);
      // 解绑click事件
      chart.off("click");
      //给地图添加监听事件
      chart.on("click", async (params) => {
        // 获取当前点击的地图code
        let clickRegion = alladcode.find(
          (areaJson) => areaJson.name === params.name
        );
        // 获取要获取地图的json名称
        let regionJsonName = clickRegion.adcode + "_full.json";
        // 获取点击的区域名称
        that.cityName = params.name;
        // 判断当前点击的地图等级,如果是区级，则再次点击时重新回到当前省的数据
        if (clickRegion.level === "district") {
          regionJsonName = "350000_full.json";
          that.tenantCode = 35;
          that.cityName = "福建省";
        } else {
          that.buildData(that.cityName);
        }
        // 根据地图code获取
        that.getGeoJson(regionJsonName, that.cityName, chart, alladcode);
      });
      // 地图适应
      window.onresize = function () {
        if (chart) chart.resize();
      };
    },
    //获取地图json数据
    getGeoJson(jsonName, cityName, chart, alladcode) {
      axios.get(this.publicUrl + jsonName).then((result) => {
        this.fujianGeoJson = result.data;
        const data = {
          tenantIdPrefix: this.tenantCode,
          };
        // 后端接口数据  传当前区划编码获取地图名称匹配散点图
        getLoginLogToday(data).then((res) => {
          if (res && res.status_code == "0000") {
            this.cityDataItem = []; // 散点图数据
              this.cityData = res.data;
            // 构建散点图数据
            Object.keys(res.data).forEach((key) => {
              this.cityDataItem.push({
                name: key,
                value: res.data[key],
              });
            });
            this.initEcharts(this.fujianGeoJson, cityName, chart, alladcode);
          }
        });
      });
    },
    // 获取全部地图json
    getAllGeoJson(jsonName) {
      this.chart = echarts.init(document.getElementById("echatsMap"));
      axios.get(this.publicUrl + jsonName).then((result) => {
        this.alladcode = result.data;
        this.getGeoJson(
          "350000_full.json",
          "福建省",
          this.chart,
          this.alladcode
        );
      });
      },
    // 区划编码的转化
    buildData(name) {
      if (name == "福州市" || name == "fuzhou") {
        this.tenantCode = 3501;
      } else if (name == "厦门市" || name == "xiamen") {
        this.tenantCode = 3502;
      } else if (name == "莆田市" || name == "putian") {
        this.tenantCode = 3503;
      } else if (name == "三明市" || name == "sanming") {
        this.tenantCode = 3504;
      } else if (name == "泉州市" || name == "quanzhou") {
        this.tenantCode = 3505;
      } else if (name == "漳州市" || name == "zhangzhou") {
        this.tenantCode = 3506;
      } else if (name == "南平市" || name == "nanping") {
        this.tenantCode = 3507;
      } else if (name == "龙岩市" || name == "longyan") {
        this.tenantCode = 3508;
      } else if (name == "宁德市" || name == "ningde") {
        this.tenantCode = 3509;
      } else {
        this.tenantCode = 35;
        this.cityName = "福建省";
      }
    },
  },
};
</script>
  
  <style scoped>
.network-map {
  background: url("../../assets/screen.png");
  background-size: cover;
}
</style>
  
  

附接口返回数据格式：

代码直接拿，根据需求去修改颜色、散点图、增加其它图例等！！！