前端系列——vue2+高德地图web端开发（热力图）

前言

热力图其实实现起来不难原理是在图层上将获取到的坐标点进行层级渲染形成多层的圆，每层的圆以不同的颜色进行展示，当多个圆叠加到一起就形成了热力图

组件间的调用说明

在Vue中我将组件拆为map.vue和config.vue使用一个父页面将这两个组件拼合到一起在这里插入图片描述

总体思路

首先选择config.vue中的复选框，传递复选框被选中的标志给Map.vue（标志比如若复选框选中则传递true，消除选中则传递false）【这里用到兄弟组件间的传值】
Map.vue接收到复选框选中的标记后进行true和false的判断，判断为true则调用热力图函数代码即可

代码

热力图坐标点搜索

我们先对热力图需要的坐标点进行搜索，这里的目的是第一次搜索坐标点的数量，页数，等信息，因为多数需要的坐标点少则几个，多则上百，近千，我们在这个函数中获取到必要的数据信息即可注意这里的兴趣点城市，最详细可以搜索到区的信息，街道不行在这里插入图片描述

searchhotchartpos(val) {
      this.map.plugin(['AMap.PlaceSearch'], () => {
        //构造地点查询类
        var placeSearch = new AMap.PlaceSearch({
          pageSize: 50, // 单页显示结果条数
          pageIndex: 1, // 页码
          city: this.searchPlaceInput, // 兴趣点城市
          citylimit: true //是否强制限制在设置的城市内搜索
          //map: this.map, // 展现结果的地图实例
          // panel: 'panel', // 结果列表将在此容器中进行展示。
          // autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
        })
        //关键字查询
        placeSearch.search(val, (status, result) => {
          // console.log(result)

          this.getHotChartPos(val, result)
        })
      })
      this.$notify({
        title: '成功',
        message: '热力图获取成果，但是由于电脑性能，我们仅加载部分数据',
        type: 'success'
      })

对搜索到的数据进行实际的获取

由于高德实行分页所以我们需要在调用一个函数对目标进行实际的搜索获取每一个需要的对象的坐标

getHotChartPos(detail, result) {
      let lengthSize = result.poiList.pageSize
      const count = result.poiList.count
      // const lengthPage = count / lengthSize
      if (lengthSize > count) {
        lengthSize = count
      }
      for (var n = 0; n < 2; n++) {
        // this.map.plugin(['AMap.PlaceSearch'], () => {
        //构造地点查询类
        var realSearch = new AMap.PlaceSearch({
          pageSize: 50, // 单页显示结果条数
          pageIndex: n + 1, // 页码
          city: this.searchPlaceInput, // 兴趣点城市
          citylimit: true //是否强制限制在设置的城市内搜索
          // map: this.map, // 展现结果的地图实例
          // panel: 'panel', // 结果列表将在此容器中进行展示。
          // autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
        })
        realSearch.search(detail, (status, result) => {
          // for (var j = 0; j < 50; j++) {
          // this.map.remove(this.map.getAllOverlays('marker'))
          //var centerPoint = [result.poiList.pois[j].location.lng, result.poiList.pois[j].location.lat]
          // console.log(result)
          //热力图
          this.showHatChart(result)
          // }
        })
      }
    },

展示热力图

到这里，我们就可以将需要的坐标加到热力图中让页面渲染其中的info是对热力图中的点进行处理，count是用于设置渲染强烈程度的

showHatChart(result) {
      var info = []
      for (let i = 0; i < 50; i++) {
        info.push({
          lng: result.poiList.pois[i].location.lng,
          lat: result.poiList.pois[i].location.lat,
          count: 3 * 6.4 * Math.round(Math.random() * (10 - 2) + 2)
        })
      }

      this.map.plugin(['AMap.HeatMap'], () => {
        // console.log('nn')
        //初始化heatmap对象
        this.heatmap = new AMap.HeatMap(this.map, {
          radius: 56, //给定半径
          opacity: [0, 0.5]
          /*,
            gradient:{
                0.5: 'blue',
                0.65: 'rgb(117,211,248)',
                0.7: 'rgb(0, 255, 0)',
                0.9: '#ffea00',
                1.0: 'red'
            }
             */
        })
        //设置数据集
        this.heatmap.setDataSet({
          data: info,
          max: 100
        })
        this.heatmapList.push(this.heatmap)
        this.heatmap.show()
      })
    },

结果展示

在这里插入图片描述