Echarts +Amap 实现点击地图下钻功能

1、最近的项目需求中，需要实现地图下钻到区的功能，所以在查阅一些资料后，决定使用Amap。

     下钻效果：

       

2、前期工作：

     ①、首先要去高德api上申请密钥，免费的一天可以发出5000次：developer.amap.com/

     ②、控制台 新建应用，就会生成一个key

       

3、在vue中引入

// 打开 index.html

* xxxx  是你的key值  比如：'4565465413213465asdaaffafaa'

 <script type="text/javascript" src="//webapi.amap.com/maps?v=1.4.15&key=xxxxxxxxxxxxxxxxxxx"></script>
  <!-- UI组件库 1.0 -->
  <script type="text/javascript" src="//webapi.amap.com/ui/1.1/main.js"></script>

//这里我们是用cdn引入的,所以要在build/webpack.base.conf.js里面让webpack不处理aMap的依赖库
externals: {
    'AMap':'AMap',
   'AMapUI': 'AMapUI'
}

4、高德api：用获取行政区的api方法也就是 AMapUI 组件库（https://lbs.amap.com/api/amap-ui/intro）的 DistrictExplorer 进行行政区geoJson的获取。 （详细使用请仔细阅读）

//获取geoJson数据

 mounted(){
     this.getGeoJson(100000);
   }
  methods:{

     getGeoJson(adcode) {
      this.map = new AMap.Map("map", {
        resizeEnable: true,
        center: [116.30946, 39.937629],
        zoom: 3
      });
      let that = this;
      AMapUI.loadUI(["geo/DistrictExplorer"], DistrictExplorer => {
        var districtExplorer = (window.districtExplorer = new DistrictExplorer({
          eventSupport: true, //打开事件支持
          map: this.map
        }));
        districtExplorer.loadAreaNode(adcode, function(error, areaNode) {
          if (error) {
            // console.error(error);
            return;
          }
          let Json = areaNode.getSubFeatures();

          if (Json.length > 0 && Json[0].properties.level == "district") {
            that.parentJson = Json;
          } else if (Json.length == 0) {
            Json = that.parentJson.filter(item => {
              if (item.properties.adcode == adcode) {
                return item;
              }
            });
          }
          that.geoJsonData = {
            features: Json
          };
          //console.log(that.geoJsonData);

          // 此处可执行 获取 地图数据的方法

          //获取地图数据 例如：

          this.getMapData()
        });

      });
    },
}
    

5、使用Echarts加载地图 （热力图）

    ①、地图数据 格式：

//  数据格式
 
//  name,value是必须参数，后面的根据自己实际情况自定义添加
[
  {
    name：'山东',
    value: 1,
    leave:''
  }
]

  ②、渲染

<template>
   <div class="map" ref="cndb_echartsData" style="height:100%;width:100%">
</template>

 drawLineEchertsChange(sjcnsjArr) {
      console.log(sjcnsjArr);
      var e = document.body.clientWidth;
      // 基于准备好的dom，初始化echarts实例
        this.myEchertsSix= echarts.init(this.$refs.cndb_echartsData)
    //注册地图,前面名字自定义,后面是高德获取的geoJson
      this.$echarts.registerMap("Map", this.geoJsonData);
      myEchertsSix.setOption({
        tooltip: {
          // 鼠标移到图里面的浮动提示框
          // formatter详细配置： https://echarts.baidu.com/option.html#tooltip.formatter
          formatter(params, ticket, callback) {
            // params.data 就是series配置项中的data数据遍历
            let localValue, perf, downloadSpeep, usability, point;
            if (params.data) {
              // console.log(params.data)
              localValue = params.data.value;
              perf = params.data.perf;
              downloadSpeep = params.data.downloadSpeep;
              usability = params.data.usability;
              point = params.data.point;
            } else {
              // 为了防止没有定义数据的时候报错写的
              localValue = 0;
              perf = 0;
              downloadSpeep = 0;
              usability = 0;
              point = 0;
            }
            //     let htmlStr = `
            //   <div style='font-size:18px;'> ${params.name}</div>
            //   <p style='text-align:left;margin-top:3px;'>
            //    测试1：${localValue}<br/>
            //   </p>
            // `;
            //     return htmlStr;
          }
          // backgroundColor:"#ff7f50",//提示标签背景颜色
          // textStyle:{color:"#fff"} //提示标签字体颜色
        },
        visualMap: {
          // 左下角的颜色区域
          type: "piecewise", // 定义为分段型 visualMap
          min: -2,
          max: 1,
          itemWidth: 8,
          itemHeight: 8,
          left: "-1%", //组件离容器左侧的距离,'left', 'center', 'right','20%'
          top: "70%", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
          right: "auto", //组件离容器右侧的距离,'20%'
          bottom: "auto", //组件离容器下侧的距离,'20%'w
          padding: 0.5,
          textGap: 5,
          pieces: [
            { value: -1, label: "实际<设计", color: "#4E79E0" },
            { value: 0, label: "实际=设计", color: "#564EBC" },
            { value: 1, label: "实际>设计", color: "#3C9CFF" }
          ],
          textStyle: {
            color: "#C0A4C3",
            fontSize: 9
          }
        },
        geo: {
          map: "Map",
          show: true,
          zoom: 1.25,
          geoIndex: 1,
          aspectScale: 0.75, //长宽比
          showLegendSymbol: true, // 存在legend时显示
          roam: false,
          label: {
            normal: {
              //静态的时候展示样式
              show: false, //是否显示地图省份得名称
              textStyle: {
                color: "#fff",
                fontSize: 9
                // fontFamily: "Arial"
              }
            },
            emphasis: {
              //动态展示的样式
              color: "#43d0d6"
            }
          },
          itemStyle: {
            // 地图区域的多边形 图形样式。
            borderColor: "rgba(0, 0, 0, 0.2)",
            emphasis: {
              // 高亮状态下的多边形和标签样式
              shadowBlur: 20,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          }
        },
        series: [
          {
            name: "地图",
            type: "map",
            data: sjcnsjArr,
            geoIndex: 0,
            // coordinateSystem: "geo",
            label: {
              show: true
            },
            roam: false,
            layoutCenter: ["60%", "60%"], //属性定义地图中心在屏幕中的位置，一般结合layoutSize 定义地图的大小
            layoutSize: "100%"
          }
        ]
      });
      window.addEventListener("resize", function() {
        // console.log("222222222")
        myEchertsSix.resize(); //myChart指自己定义的echartsDom对象
      });
    },

6、效果如下：

7、参考资源：

     Echarts社区：https://gallery.echartsjs.com/editor.html?c=xz3jGj90ns