echarts渲染地图，根据地图编码获取区域地图

echarts渲染地图，根据地图编码获取区域地图

• 项目要求
• 功能实现
• • • 下载所需要的安装包
    • 引入所需配置文件与初始化
    • 引入echarts文件和所需要的数据项
    • 创建echarts地图
• 完整代码

项目要求

• 默认展示主地图，点击后根据对应的编码进入省市区的地图，如果匹配不到对应的编码，则返回地图的主界面。
• 效果图
• 

功能实现

下载所需要的安装包

npm i axios
npm i echarts

引入所需配置文件与初始化

省市区编码JSON数据（数据过长，有需要请移步）

引入echarts文件和所需要的数据项

import * as echarts from "echarts";
import axios from "axios";
import { cityCode } from "@/components/cityCode.js";

创建echarts地图

• 此处会用到外部链接来获取地图JSON数据（100000是主视图的地区编码）：获取地图JSON数据
  

 // 初始化地图数据
    init() {
      // 主地图的JSON文件下载
      //所用到的链接就是红框中的链接
      let path = `https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json`;
      const params = this.cityCode;
      axios.get(path).then((res) => {
        echarts.registerMap("china", res.data);
        this.changeOptions("china");
        this.myChart = echarts.init(document.querySelector("#echatsMap"));
        this.myChart.setOption(this.distributionOptions);
        // 点击省份子区域的时候可以切换到省份地图
        this.myChart.on("click", (chinaParam) => {
          if (!this.cityCode) {
            this.cityCode = params;
            this.getProvinceMapOpt("100000", "");
          } else {
            const conform = this.cityCode.find((x) =>
              chinaParam.name.includes(x.name)
            );
            if (conform) {
              this.cityCode = conform.city;
              this.getProvinceMapOpt(conform.adcode, conform.name);
            } else {
              this.cityCode = params;
              this.getProvinceMapOpt("100000", "");
            }
          }
        });
      });
      window.onresize = function () {
        if (this.myChart) this.myChart.resize();
      };
    },

完整代码

<template>
  <div>
    <div id="echatsMap" style="width: 100%; height: 800px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import axios from "axios";
import { cityCode } from "@/components/cityCode.js";
export default {
  name: "echatsMap",
  components: {},
  data() {
    return {
      cityCode: cityCode,
      myChart: "",
      distributionOptions: "",
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
  },
  methods: {
    // 初始化地图数据
    init() {
      // 主地图的JSON文件下载
      let path = `https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json`;
      const params = this.cityCode;
      axios.get(path).then((res) => {
        echarts.registerMap("china", res.data);
        this.changeOptions("china");
        this.myChart = echarts.init(document.querySelector("#echatsMap"));
        this.myChart.setOption(this.distributionOptions);
        // 点击省份子区域的时候可以切换到省份地图
        this.myChart.on("click", (chinaParam) => {
          if (!this.cityCode) {
            this.cityCode = params;
            this.getProvinceMapOpt("100000", "");
          } else {
            const conform = this.cityCode.find((x) =>
              chinaParam.name.includes(x.name)
            );
            if (conform) {
              this.cityCode = conform.city;
              this.getProvinceMapOpt(conform.adcode, conform.name);
            } else {
              this.cityCode = params;
              this.getProvinceMapOpt("100000", "");
            }
          }
        });
      });
      window.onresize = function () {
        if (this.myChart) this.myChart.resize();
      };
    },
    // 下载/显示各省地图
    getProvinceMapOpt(provinceAlphabet, name) {
      // 根据地区编码获取所在地区的JSON地图
      let path = `https://geo.datav.aliyun.com/areas_v3/bound/${provinceAlphabet}_full.json`;
      if (provinceAlphabet === 100000) {
        path = "/mapJson/china.json";
      }
      axios.get(path).then((res) => {
        echarts.registerMap(name, res.data);
        this.changeOptions(name);
        this.myChart.setOption(this.distributionOptions, true);
      });
    },
    // echarts 配置项
    changeOptions(name) {
      // 经纬度数据
      const seriesList = [
        {
          data: [{ value: [106.9, 27.7] }, { value: [105.29, 27.32] }],
        },
      ];
      // 图标
      const series = seriesList.map((v) => {
        return {
          type: "scatter", //配置显示方式为用户自定义
          coordinateSystem: "geo",
          data: v.data,
          // 自定义图标的样式  支持svg与bse64
          symbol: function (params, key) {
            return "image://" + require("@/assets/logo.png");
          },
          symbolSize: 16,
        };
      });

      // options
      this.distributionOptions = {
        tooltip: {
          // 提示框组件
          show: true, // 显示提示框组件
          trigger: "item", // 触发类型
          triggerOn: "mousemove", // 触发条件
          formatter: "名称:{b}<br/>坐标:{c}",
        },
        series, // 数据
        geo: {
          map: name || "china", // 引入地图 省份或者 国家
          layoutCenter: ["50%", "50%"], //设置后left/right/top/bottom等属性无效
          layoutSize: "45%",
          roam: true, //开启鼠标缩放
          zoom: 2,
          label: {
            normal: {
              //静态的时候展示样式
              show: true, //是否显示地图省份得名称
              textStyle: {
                color: "#fff",
                fontSize: 10,
                fontFamily: "Arial",
              },
            },
            emphasis: {
              // 高亮状态下的样式
              //动态展示的样式
              color: "#fff",
            },
          },
          itemStyle: {
            // 地图区域的多边形 图形样式。
            normal: {
              borderColor: "#fff", // 边框颜色
              areaColor: "#1c2f59", //  区域颜色
              textStyle: {
                // 文字颜色
                color: "#fff",
              },
              // shadowBlur: 10, // 图形阴影的模糊大小
              // shadowOffsetX: 10, // 阴影水平方向上的偏移距离。
            },
            emphasis: {
              areaColor: "#1c2f59",
              color: "#fff",
            },
          },
        
        },
      };
    },
  },
};
</script>