echarts实现单个城市下所有区域地图

 

一：需求：展示中国某一个市下面所有的区域地图并轮播高亮显示（以南京市为例）

二：数据来源  DataV.GeoAtlas地理小工具系列（写这篇文章的时候提示服务升级）

三：具体实现如下（vue实现）

dom部分：<div style="width: 300px; height: 300px" ref="chartsDOM"></div>

data 数据部分：

data() {

    return { 

      MAP_URL: "https://geo.datav.aliyun.com"

      cityCode: "320100",//城市的code编码在第二部分数据来源中获得

      mapChart: null,//地图实例

      mapChartInterval: null,//定时器

      mapData: [//地图区域部分的数据

        {

          name: "六合区",

          schoonNum: 20,

          studentNum: 501,

          averageScore: 50.5,

          rate: "77.8%",

        },

        {

          name: "鼓楼区",

          schoonNum: 19,

          studentNum: 5001,

          averageScore: 30,

          rate: "28.8%",

        },

        {

          name: "浦口区",

          schoonNum: 18,

          studentNum: 2574,

          averageScore: 58.5,

          rate: "29.8%",

        },

        {

          name: "栖霞区",

          schoonNum: 17,

          studentNum: 158,

          averageScore: 78.5,

          rate: "78.8%",

        },

        {

          name: "玄武区",

          schoonNum: 23,

          studentNum: 6874,

          averageScore: 69.5,

          rate: "39.8%",

        },

        {

          name: "建邺区",

          schoonNum: 37,

          studentNum: 2589,

          averageScore: 88.5,

          rate: "58.8%",

        },

        {

          name: "秦淮区",

          schoonNum: 32,

          studentNum: 258,

          averageScore: 18.5,

          rate: "99.8%",

        },

        {

          name: "雨花台区",

          schoonNum: 54,

          studentNum: 259,

          averageScore: 89.5,

          rate: "77.8%",

        },

        {

          name: "江宁区",

          schoonNum: 38,

          studentNum: 2589,

          averageScore: 36.5,

          rate: "94.8%",

        },

        {

          name: "溧水区",

          schoonNum: 29,

          studentNum: 7895,

          averageScore: 78.5,

          rate: "19.8%",

        },

        {

          name: "高淳区",

          schoonNum: 33,

          studentNum: 2988,

          averageScore: 28.5,

          rate: "28.8%",

        },

      ]

    };

  }

js部分：

methods:{

   initMap() {

      let that = this;

      // 初始化统计图对象

      that.mapChart = this.$echarts.init(this.$refs["chartsDOM"]);

      // 显示 loading 动画

      that.mapChart.showLoading();

      // 再得到数据的基础上，进行地图绘制

      axios

        // .get(this.MAP_URL + "/areas_v3/bound/" + this.cityCode + "_full.json") //本地调试可以使用，发布到服务器后由于阿里云的防盗链接口会403

        .get("static/areaMap/" + this.cityCode + "_full.json") //将所需的城市地图文件下载下来放本地

        .then((res) => {

          // 得到结果后，关闭动画

          that.mapChart.hideLoading();

          // 注册地图(数据放在axios返回对象的data中哦)

          this.$echarts.registerMap(" NANJIN", res.data);

          let option = {

            tooltip: {

              trigger: "item",

              borderColor: "#1FC9F3",

              formatter: function (params) {

                let result = params.data;

                return (res =

                  "<div>" +

                  result.name +

                  "</div>" +

                  '<div style="text-align:left;">' +

                  "学校个数：" +

                  result.schoonNum +

                  "<br>" +

                  "学校学生：" +

                  result.studentNum +

                  "<br>" +

                  "平均得分：" +

                  result.averageScore +

                  "<br>" +

                  "得分率：" +

                  result.rate +

                  "</div>");

              },

            },

            series: [

              {

                type: "map",

                map: "NANJIN", // 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）

                // aspectScale: 1,//地图长度比默认0.75

                zoom: 1,

                roam: true,

                scaleLimit: {//地图缩放

                  min: 1,

                  max: 3,

                },

                label: {

                  show: true,

                  normal: {

                    //正常时的样式

                    show: false,

                    textStyle: {

                      color: "#333",

                    },

                  },

                  emphasis: {

                    //高亮时的样式设置

                    show: true,

                    textStyle: {

                      color: "#fff",

                      fontSize: 14,

                    },

                  },

                },

                itemStyle: {

                  normal: {

                    areaColor: "#fff",

                    borderColor: "#03b8c0",

                  },

                },

                emphasis: {

                  //高亮状态下的样式

                  itemStyle: {

                    //多边形样式

                    areaColor: "#1FC9F3",

                  },

                },

                data: this.mapData,

              },

            ],

          };

          that.mapChart.setOption(option);

          if (this.mapChartInterval) {

            window.clearInterval(that.mapChartInterval);

          }

          let currentIndex = -1;

          this.mapChartInterval = setInterval(function () {

            let dataLen = option.series[0].data.length;

            // 取消之前高亮的图形

            that.mapChart.dispatchAction({

              type: "downplay",

              seriesIndex: 0,

              dataIndex: currentIndex,

            });

            currentIndex = (currentIndex + 1) % dataLen;

            // 高亮当前图形

            that.mapChart.dispatchAction({

              type: "highlight",

              seriesIndex: 0,

              dataIndex: currentIndex,

            });

            // 显示 tooltip

            that.mapChart.dispatchAction({

              type: "showTip",

              seriesIndex: 0,

              dataIndex: currentIndex,

            });

          }, 2000);

        });

    },

}

四：难点，易出错说明

1. 采用直接访问数据来源的方式上线后由于阿里云的防盗链机制会出现接口403

        解决办法：1.阿里云官网花钱购买服务2.后端处理转发接口3.下载城市json文件到本地项目

2.mapData数据源中name（区县的名称）一定要和json文件里的相同

3.注册时 this.$echarts.registerMap(" NANJIN", res.data);其中的名字（NANJIN）要和series中 map: "NANJIN",相同

4.数据来源 可以通过此链接直接浏览器访问获取https://geo.datav.aliyun.com/areas_v3/bound/340100_full.jsonhttps://geo.datav.aliyun.com/areas_v3/bound/340100_full.json(不同城市替换code就行)