vue+echarts地图下钻(全国-省-市)

本文中使用的数据为行政区编码json数据,大家自行下载.(本人超级菜鸟一枚,逻辑比较混乱,记录一下以免以后遇到相似功能忘记怎么写)

地图资源:

 

整体思路:1.先注册全国地图,通过全国地图的json数据, 把全国各个省份的名字以及行政区编码抽出来组成新数组.2.然后单击地图时通过点击到的省份名找到数组中相应的对象,获取到这条对象的行政区编码 3.根据行政区编码去动态加载省份json数据,重新注册新的地图.市区地图同理

1.给地图图表设置一个容器,需要设置容器大小

  <div class="map" id="map"></div>

2.安装echarts(这里引入了echarts5版本)

cnpm install echarts -S

3.在需要使用地图的组件内引入

import * as echarts from "echarts";

4.本地引入地图json文件,保存在public文件夹下的static(自行新建)

5.在methods中定义初始化地图函数

   注意:如果你在项目中引入json数据,报错找不到json数据的话,在jsconfig.json中添加以下代码,重启即可解决

"resolveJsonModule": true,

 init() {
      var map = document.getElementById("map");
       //先加载全国地图,使用require引入json数据
      const china = require("../../public/static/100000.json");
      //在data中定义city,给city初始值为China
      this.city = china;
       //注册地图
      echarts.registerMap("城市", this.city);
      const option = {
        geo: {
          type: "map",
          map: "城市",    
          zoom: 1.2,
          label: {
            normal: {
              show: !0,
              fontSize: "12",
              fontWeight: "bolder",
              color: "#000000",
            },
          },
        }
      
      };
      // 使用刚指定的配置项和数据显示图表。
      var myChart = echarts.init(map);
      myChart.setOption(option);      

      // 窗口自适应
      (window.onresize = function () {
        myChart.resize();
      }),

      
    },

6.在上面的init()函数中插入以下代码,定义单击事件实现地图下钻,双击返回上一级地图

// mapStack存储历史注册地图数据,第一个元素设置为全国地图数据
      var mapStack = [];
      mapStack.push(this.city);
      var timeFn = null;
     

// 监听图表点击事件
        myChart.on("click", (params) => {
          clearTimeout(timeFn);
          timeFn = setTimeout(() => {
            console.log("地图被点击了", params.name);

            // 返回到全国地图时，需要把this.city重置为全国地图数据
            if(mapStack.length==1){
              this.city=china
            }
            // 因为this.city一直在变化，所以用mapStack存储一下历史记录，用于双击返回
              else if(mapStack.length==2){
              this.city=mapStack[mapStack.length - 1]
            }


            var city1 = this.city;
            // 调用函数获取当前点击城市json数据，加载城市地图
            this.city = this.changeCity(city1, params.name);
            // 让历史数据一直保持在3个之内，存储显示过的地图数据
            if (mapStack.length < 3) {
              mapStack.push(this.city);
            }

            //此时的this.city为当前点击的城市的json数据,重新注册地图
            echarts.registerMap("城市", this.city);

            const cityOption = {
              geo: {
                type: "map",
                map: "城市",
              },
            };
            myChart.setOption(cityOption);
          }, 250);
        });

     
      //双击事件
      myChart.on("dblclick", () => {
        clearTimeout(timeFn);
        // 把当前展示的城市数据删掉
        mapStack.splice(mapStack.length - 1, 1);
        // 把数组中的最后一个元素注册到地图
        echarts.registerMap("城市", mapStack[mapStack.length - 1]);
        const cityOption = {
          geo: {
            type: "map",
            map: "城市",
          },
        };
        myChart.setOption(cityOption);
      });

7.第6步中调用的方法写在methods中

// 抽取全国省份名和行政区代码放在数组中
cityData(city) {
      let arr = [];
      for (var i = 0; i < city.features.length; i++) {
        if (!city.features[i].properties.adcode) {
          arr.push({
            name: city.features[i].properties.name,
            decode: city.features[i].id,
          });
        }
        arr.push({
          name: city.features[i].properties.name,
          decode: city.features[i].properties.adcode,
        });
      }
      return arr;
    },

    // 改变城市数据，获取点击的地区编码
    changeCity(city, name) {
      const arr1 = this.cityData(city);
      // 过滤点击的城市名的对象，取出对应行政区编码
      let xzqbmList = arr1.filter((ele) => {
        if (ele.name === name) {
          return ele;
        }
      });
      const xzqbm = xzqbmList[0].decode;
      console.log("点击的是", xzqbm);
      if (!xzqbm) {
        return city;
      }
      //动态获取点击的城市数据
      city = require("../../public/static/" + xzqbm + ".json");
      console.log(city);
      return city;
    },

8.在mounted中调用init()函数

 mounted() {
    setTimeout(() => {
      this.init();
    }, 1000);
  },

这样就可以完成一个简单的从全国地图下钻到省份地图,再到市区地图的效果了.