使用高德API制作热力图(Vue)

一、前置条件

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

 

二、引入高德api

 

三、了解热力图数据结构

data: [{lng: 116.405285, lat: 39.904989, count: 65},{}, …]

字段含义：
lng 经度，lat 纬度，count 出现次数

在实际应用中，可以GeoHash对 经纬度坐标进行编码，减小数据包大小

 

四、了解热力图参数和方法
1.setDataSet(dataset:Object)
用于设置热力图展现的数据集，dataset数据集格式为：
{
　　max: Number 权重的最大值,
　　data: Array 坐标数据集
}

2.show()
显示热力图

3.hide()
隐藏热力图

4.radius
热力图中单个点的半径，默认：30，单位：pixel；半径范围内所有的点都会算作此点的数目，比如30px范围内有两个点，一个点的count是12，另一个是18，渲染是会将两个点算成一个点，其count值为30

5.max
代表热点图区分热度的界限，当某点count数超过max一定比例，即显示对应gradient配置的颜色,点的count值决定了它在grident中的颜色

6.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"
}

五、实现页面：

1.初始化地图时，获取用户位置，展示用户当前城市热力图
2.切换城市时，获取该城市热力图数据
3.控制热力图的显示与隐藏
4.当某个城市无热力图数据时，隐藏按钮；反之，则显示按钮
5.max得合理取值，太小会几乎一片红色，太大几乎看不到热力图颜色，在此项目中max取城市中所有点count平均值

  1 
 24 
 25