【Vue使用高德API制作热力图】

程序媛_文乐

已于 2022-08-23 13:58:43 修改

阅读量2.5k

点赞数 1

分类专栏：前端框架文章标签： vue.js javascript 前端

于 2022-08-23 11:17:20 首次发布

本文链接：https://blog.csdn.net/weixin_44665318/article/details/126479973

版权

前端框架专栏收录该内容

13 篇文章

订阅专栏

Vue使用高德API制作热力图

前提条件

需先申请高德地图key，https://lbs.amap.com

1.在 HTML 页面中引入高德地图 JSAPI 的 JS 文件
2.获取到 DOM 元素
3.将其作为容器，连同其它参数，传递给 new AMap.Map，创建一个地图实例
往地图里加入更多的元素

使用高德地图 JSAPI

<script src="//webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
//高德官方文档提供热力图数据
<script src="//a.amap.com/jsapi_demos/static/resource/heatmapData.js"></script>

放置地图

 <div id="container"></div>

初始化map对象

  initMap() {
      this.map = new AMap.Map("container", {
        resizeEnable: true,
        center: [116.480983, 39.989628],
        zoom: 11,
        mapStyle: 'amap://styles/grey', // 极夜蓝
        //自定义地图样式：https://lbs.amap.com/dev/mapstyle/index
      });
    }

生成热力图map

    // 判断浏览区是否支持canvas
    isSupportCanvas() {
      const elem = document.createElement('canvas')
      return !!(elem.getContext && elem.getContext('2d'))
    },
    createHeatMap() {
      const heatmapData = []
      let heatmap
      //js中原数组生成新数组
      //mapList:项目中后端传回展示数据，处理得到热力图对应数据结构
      const bikeMapList = JSON.parse(JSON.stringify(mapList))
      bikeMapList.forEach((mark) => {
        const item = {
          lng: mark.siteLon,
          lat: mark.siteLat,
          count: mark.currentNum
        }
        heatmapData.push(item)
      })
      console.log('heatmapData:', heatmapData)
      if (!this.isSupportCanvas()) {
        this.$message.error(
          '热力图仅对支持canvas的浏览器适用,您所使用的浏览器不能使用热力图功能,请换个浏览器试试。'
        )
      }
      vm.map.plugin('AMap.HeatMap', function() {
        // 初始化heatmap对象
        heatmap = new AMap.HeatMap(vm.map, {
          radius: 60, // 给定半径
          opacity: [0, 0.8],
          gradient: {
            0.5: 'blue',
            0.65: 'rgb(117,211,248)',
            0.7: 'rgb(0, 255, 0)',
            0.9: '#ffea00',
            1.0: 'red'
          }
        })
        // max得合理取值，太小会几乎一片红色，太大几乎看不到热力图颜色，
        //在此项目中max取城市中所有点count平均值
        const sum = heatmapData.reduce((prev, curr) => {
          if (typeof prev === 'object') {
            return prev.count + curr.count
          }
          return prev + curr.count
        })
        const max = sum / heatmapData.length
        // 设置数据集
        heatmap.setDataSet({
          data: heatmapData,
          max: max
        })
      })
    },

完整代码

<template>
  <div>
    <div id="container"></div>
    <div class="input-card" style="width: auto;">
      <div class="input-item">
        <button class="btn" @click="heatmap.show()">显示热力图</button>
      </div>
      <div class="input-item">
        <button class="btn" @click="heatmap.hide()">关闭热力图</button>
      </div>
    </div>
  </div>
</template>

<script>
//项目所需展示数据
import {heatmapData} from './heatmapData';
export default {
  mounted() {
    // 延迟加载，防止出现AMap not defined
    setTimeout(() => {
      this.initMap();
      this.createHeatMap();
    }, 1000);
  },
  beforeDestroy() {
    this.map && this.map.destroy();
  },
  data() {
    return {
      map: null,
      heatmap: null
    };
  },
  methods: {
    initMap() {
      this.map = new AMap.Map("container", {
        resizeEnable: true,
        center: [116.480983, 39.989628],
        zoom: 11,
        mapStyle: 'amap://styles/grey', // 极夜蓝
        //自定义地图样式：https://lbs.amap.com/dev/mapstyle/index
      });
    },
    // 判断浏览区是否支持canvas
    isSupportCanvas() {
      const elem = document.createElement('canvas')
      return !!(elem.getContext && elem.getContext('2d'))
    },
    createHeatMap() {
      const heatmapData = []
      let heatmap
      //js中原数组生成新数组
      //mapList:项目中后端传回展示数据，处理得到热力图对应数据结构
      const bikeMapList = JSON.parse(JSON.stringify(mapList))
      bikeMapList.forEach((mark) => {
        const item = {
          lng: mark.siteLon,
          lat: mark.siteLat,
          count: mark.currentNum
        }
        heatmapData.push(item)
      })
      console.log('heatmapData:', heatmapData)
      if (!this.isSupportCanvas()) {
        this.$message.error(
          '热力图仅对支持canvas的浏览器适用,您所使用的浏览器不能使用热力图功能,请换个浏览器试试。'
        )
      }
      vm.map.plugin('AMap.HeatMap', function() {
        // 初始化heatmap对象
        heatmap = new AMap.HeatMap(vm.map, {
          radius: 60, // 给定半径
          opacity: [0, 0.8],
          gradient: {
            0.5: 'blue',
            0.65: 'rgb(117,211,248)',
            0.7: 'rgb(0, 255, 0)',
            0.9: '#ffea00',
            1.0: 'red'
          }
        })
        // max得合理取值，太小会几乎一片红色，太大几乎看不到热力图颜色，
        //在此项目中max取城市中所有点count平均值
        const sum = heatmapData.reduce((prev, curr) => {
          if (typeof prev === 'object') {
            return prev.count + curr.count
          }
          return prev + curr.count
        })
        const max = sum / heatmapData.length
        // 设置数据集
        heatmap.setDataSet({
          data: heatmapData,
          max: max
        })
      })
    }
};
</script>
<style lang="less" scoped>
@import url("https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css");

#container {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 500px;
}
.input-card .btn {
  margin-right: 1.2rem;
  width: 9rem;
}
</style>

实现效果

在这里插入图片描述

了解热力图相关数据信息

/**数据结构字段含义：
lng 经度，lat 纬度，count 出现次数
*/
data: [
{lng: 116.405285,
lat: 39.904989,
count: 65},
{}, …]

//了解热力图参数
1.setDataSet(dataset:Object)
用于设置热力图展现的数据集，dataset数据集格式为：
{
　　data: Array 坐标数据集
　　max: Number 权重的最大值,
}
2.radius
热力图中单个点的半径，默认：30，单位：pixel；半径范围内所有的点都会算作此点的数目，
比如30px范围内有两个点，一个点的count是12，另一个是18，渲染是会将两个点算成一个点，
其count值为30
3.max
代表热点图区分热度的界限，当某点count数超过max一定比例，
即显示对应gradient配置的颜色,点的count值决定了它在grident中的颜色
4.gradient
热力图的渐变区间，热力图按照设置的颜色及间隔显示热力图；
若不设置，就会使用heatmap.js标准配色方案
heatmap.js标准配色方案：
{
　　0.5: “blue”,
　　0.65: “rgb(117,211,248)”,
　　0.7: “rgb(0, 255, 0)”,
　　0.9: “#ffea00”,
　　1: “red”
}
5.max
max得合理取值，太小会几乎一片红色，太大几乎看不到热力图颜色，在此项目中max取城市中所有点count平均值