在地图上绘制热力图的方法
在地图上绘制热力图的方法
杨美红
由于业务需求，要在地图上用热力图的方法展示人群活动的热点地区。经搜索，发现百度地图和高德地图的JavaScript API都提供了热力图的绘制方法，都是将热力图作为新的图层，叠加到地图上。但是百度地图的经纬度体系与我们的经纬度存在偏差，高德的与我们相符，应当使用高德地图JavaScript API。以下是两个API经纬度定位的对比，以亚信大厦为例。
我们经纬度数据在高德上的展示，能够准确定位到亚信大厦。
百度的定位有所偏差。
因为是JavaScript API，所以地图展示是在网页上的。以高德地图的API使用为例：
在html文件中添加高德地图必须的script，其中第一行的key可以在高德官网免费申请。
在页面的body标签下添加一个div标签用来承载地图：
在页面的script部分，声明一个map对象，其位置是上一步添加的id为“container”的div，并设置属性resizeEnable（是否监控地图容器尺寸变化，还没搞懂意义），center（开启地图时的中心点，现在就是*），zoom（地图的缩放等级）。
定义points列表，也可以是一个json文件，里面每一条数据的key分别为lat（纬度）、lng（经度）、count（对应经纬度出现的次数）
定义heatmap层，并添加到map上，其中radius是热力图的半径，opacity是透明度，gradient是热力图颜色的渐变区间（一直使用默认就行吧，没尝试改变过）。通过heatmap.setDateset设置heatmap的数据集，指定数据为points，并把max设置为5。
这里max的值决定了各经纬度的热度，若max取值太大，则每个点都为“较冷”的点，取值太小，每个点都“热”，所以max 的取值应该根据实际数据进行判断。
Max值取100：
同样的数据下，Max值取5：
附 html 源码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>热力图</title>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<script src="http://webapi.amap.com/maps?v=1.3&key=4b82402***"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
<script type="text/javascript" src="http://a.amap.com/jsapi_demos/static/resource/heatmapData.js"></script>
</head>
<body>
<div id="container"></div>
<div class="button-group">
<input type="button" class="button" value="显示热力图" onclick="heatmap.show()"/>
<input type="button" class="button" value="关闭热力图" onclick="heatmap.hide()"/>
</div>
<script>
var map = new AMap.Map("container", {
resizeEnable:false,
center: [117.418261, 39.921984],
zoom: 11
});
if (!isSupportCanvas()) {
alert('热力图仅对支持canvas的浏览器适用,您所使用的浏览器不能使用热力图功能,请换个浏览器试试~')
}
var points =[
{"lat":40.04372,"lng":117.627983,"count":1},
{"lat":39.955631,"lng":117.457741,"count":1},
{"lat":39.993408,"lng":117.45536,"count":1},
{"lat":39.994091,"lng":117.454597,"count":1},
{"lat":39.994202,"lng":117.454788,"count":1},
{"lat":39.894291,"lng":117.46257,"count":1},
{"lat":39.892929,"lng":117.463181,"count":1},
{"lat":39.89397,"lng":117.462479,"count":1},
{"lat":39.969528,"lng":117.372078,"count":1},
{"lat":39.994122,"lng":117.45446,"count":1},
{"lat":39.993881,"lng":117.455231,"count":1},
{"lat":40.005829,"lng":117.452492,"count":1},
{"lat":40.020748,"lng":117.451881,"count":1},
{"lat":39.969421,"lng":117.372124,"count":1},
{"lat":39.994221,"lng":117.45443,"count":1},
{"lat":39.993809,"lng":117.455597,"count":1},
{"lat":39.993809,"lng":117.455597,"count":1},
{"lat":39.994202,"lng":117.454407,"count":1},
{"lat":39.99324,"lng":117.454758,"count":1},
{"lat":39.994221,"lng":117.454338,"count":1},
{"lat":39.992401,"lng":117.456612,"count":1},
{"lat":39.994041,"lng":117.454399,"count":1},
{"lat":39.89801,"lng":117.414047,"count":1},
{"lat":39.898361,"lng":117.415947,"count":1},
{"lat":39.897999,"lng":117.414078,"count":1},
{"lat":39.99371,"lng":117.454964,"count":1},
{"lat":39.993969,"lng":117.454559,"count":1},
{"lat":39.992512,"lng":117.454826,"count":1},
{"lat":39.993889,"lng":117.455231,"count":1},
{"lat":39.99398,"lng":117.455032,"count":1},
{"lat":39.895111,"lng":117.462273,"count":1},
{"lat":39.913422,"lng":117.415283,"count":1},
{"lat":39.993832,"lng":117.455391,"count":1},
{"lat":39.993649,"lng":117.454674,"count":1},
{"lat":39.951908,"lng":117.445137,"count":1},
{"lat":39.912979,"lng":117.415421,"count":1},
{"lat":39.994099,"lng":117.454857,"count":1},
{"lat":39.991989,"lng":117.454826,"count":1},
{"lat":39.912971,"lng":117.415466,"count":1},
{"lat":39.913052,"lng":117.415482,"count":1},
{"lat":39.912979,"lng":117.417778,"count":1},
{"lat":39.891682,"lng":117.463417,"count":1},
{"lat":39.894798,"lng":117.462471,"count":1},
{"lat":39.908428,"lng":117.427,"count":1},
{"lat":39.992981,"lng":117.454773,"count":1},
{"lat":39.99403,"lng":117.455132,"count":1},
{"lat":39.993591,"lng":117.455513,"count":1},
{"lat":39.89323,"lng":117.462997,"count":1},
{"lat":39.89323,"lng":117.462997,"count":1},
{"lat":40.249329,"lng":117.366669,"count":1},
{"lat":40.24934,"lng":117.366768,"count":1},
{"lat":39.991982,"lng":117.454826,"count":1},
{"lat":39.97134,"lng":117.45507,"count":1},
{"lat":39.999599,"lng":117.394096,"count":1},
{"lat":39.993931,"lng":117.454681,"count":1},
{"lat":39.994091,"lng":117.454437,"count":1},
{"lat":39.991989,"lng":117.454826,"count":1},
{"lat":39.890659,"lng":117.463791,"count":1},
{"lat":39.89325,"lng":117.463402,"count":1},
{"lat":39.894981,"lng":117.462181,"count":1},
{"lat":39.891472,"lng":117.463547,"count":1},
{"lat":39.99374,"lng":117.455177,"count":1},
{"lat":39.994202,"lng":117.454613,"count":1},
{"lat":39.977379,"lng":117.437683,"count":1},
{"lat":39.949791,"lng":117.462158,"count":1},
{"lat":39.895088,"lng":117.462219,"count":1},
{"lat":39.993992,"lng":117.455353,"count":1},
{"lat":39.993698,"lng":117.454941,"count":1},
{"lat":39.9921,"lng":117.454437,"count":1},
{"lat":39.89389,"lng":117.462334,"count":1},
{"lat":39.89238,"lng":117.463188,"count":1},
{"lat":39.99419,"lng":117.454514,"count":1},
{"lat":39.993328,"lng":117.455078,"count":1},
{"lat":39.993752,"lng":117.454773,"count":1},
{"lat":39.984779,"lng":117.467529,"count":1},
{"lat":39.890961,"lng":117.463692,"count":1},
{"lat":39.993858,"lng":117.455139,"count":1},
{"lat":39.99202,"lng":117.4552,"count":1},
{"lat":39.993729,"lng":117.455231,"count":1},
{"lat":39.994282,"lng":117.453819,"count":1},
{"lat":39.992649,"lng":117.455009,"count":1},
{"lat":39.99379,"lng":117.45462,"count":1},
{"lat":39.872292,"lng":117.396347,"count":1},
{"lat":39.870731,"lng":117.388618,"count":1},
{"lat":39.864349,"lng":117.377289,"count":1},
{"lat":39.719238,"lng":117.331802,"count":1},
{"lat":37.43782,"lng":117.455002,"count":1},
{"lat":37.03352,"lng":117.715134,"count":1},
{"lat":35.836868,"lng":117.090286,"count":1},
{"lat":34.246021,"lng":117.31308,"count":1},
{"lat":33.815498,"lng":117.230698,"count":1},
{"lat":31.99254,"lng":118.57972,"count":1},
{"lat":31.14229,"lng":121.38549,"count":1},
{"lat":39.993961,"lng":117.454727,"count":1},
{"lat":39.993118,"lng":117.455597,"count":1},
{"lat":39.946239,"lng":117.450401,"count":1},
{"lat":39.932121,"lng":117.45546,"count":1},
{"lat":39.99403,"lng":117.453957,"count":1},
{"lat":39.99295,"lng":117.455719,"count":1},
{"lat":39.99184,"lng":117.454819,"count":1},
{"lat":39.994041,"lng":117.454681,"count":1},
{"lat":39.99287,"lng":117.454742,"count":1},
{"lat":39.9939,"lng":117.455,"count":1},
{"lat":39.992741,"lng":117.455673,"count":1},
{"lat":39.994141,"lng":117.45491,"count":1},
{"lat":39.992229,"lng":117.454903,"count":1},
{"lat":39.99369,"lng":117.455383,"count":1},
{"lat":39.969921,"lng":117.49221,"count":1},
{"lat":39.997921,"lng":117.38343,"count":1},
{"lat":39.992619,"lng":117.453873,"count":1},
{"lat":39.992069,"lng":117.454826,"count":1},
{"lat":39.993679,"lng":117.454529,"count":1},
{"lat":40.065201,"lng":117.432068,"count":1},
{"lat":39.992149,"lng":117.454521,"count":1},
{"lat":39.99395,"lng":117.454559,"count":1},
{"lat":39.993851,"lng":117.45472,"count":1},
{"lat":39.993759,"lng":117.454529,"count":1},
{"lat":39.991508,"lng":117.45636,"count":1},
{"lat":39.993858,"lng":117.454979,"count":1},
{"lat":39.967789,"lng":117.452217,"count":1},
{"lat":39.99387,"lng":117.455193,"count":1},
{"lat":39.994179,"lng":117.454727,"count":1},
{"lat":39.992538,"lng":117.456459,"count":1},
{"lat":39.99382,"lng":117.454651,"count":1},
{"lat":39.994221,"lng":117.454872,"count":1},
{"lat":39.951038,"lng":117.471687,"count":1},
{"lat":39.99416,"lng":117.454552,"count":1},
{"lat":40.005821,"lng":117.457581,"count":1},
{"lat":39.97131,"lng":117.455139,"count":1},
{"lat":39.992691,"lng":117.456352,"count":1},
{"lat":39.99379,"lng":117.455048,"count":1},
{"lat":39.99408,"lng":117.454681,"count":1},
{"lat":39.893532,"lng":117.462914,"count":1},
{"lat":39.994129,"lng":117.455147,"count":1},
{"lat":39.99292,"lng":117.455643,"count":1},
{"lat":39.99292,"lng":117.455643,"count":1},
{"lat":39.99366,"lng":117.454567,"count":1},
{"lat":40.008179,"lng":117.460098,"count":1},
{"lat":39.993721,"lng":117.454727,"count":1},
{"lat":40.044239,"lng":117.280792,"count":1},
{"lat":39.971821,"lng":117.37394,"count":1},
{"lat":39.969509,"lng":117.370239,"count":1},
{"lat":39.993839,"lng":117.454659,"count":1},
{"lat":39.89526,"lng":117.466301,"count":1},
{"lat":39.894329,"lng":117.462463,"count":1},
{"lat":39.893089,"lng":117.46302,"count":1},
{"lat":39.894791,"lng":117.46228,"count":1},
{"lat":39.994221,"lng":117.454521,"count":1},
{"lat":39.89296,"lng":117.463112,"count":1},
{"lat":39.97855,"lng":117.369019,"count":1},
{"lat":39.99416,"lng":117.454102,"count":1},
{"lat":39.99411,"lng":117.454422,"count":1},
{"lat":39.894711,"lng":117.46257,"count":1},
{"lat":39.890781,"lng":117.463707,"count":1},
{"lat":39.994129,"lng":117.454422,"count":1}];
//详细的参数,可以查看heatmap.js的文档 http://www.patrick-wied.at/static/heatmapjs/docs.html
//参数说明如下:
/* visible 热力图是否显示,默认为true
* opacity 热力图的透明度,分别对应heatmap.js的minOpacity和maxOpacity
* radius *图的每个点的半径大小
* gradient {JSON} 热力图的渐变区间 . gradient如下所示
* {
.2:'rgb(0, 255, 255)',
.5:'rgb(0, 110, 255)',
.8:'rgb(100, 0, 255)'
}
其中 key 表示插值的位置, 0-1
value 为颜色值
*/
var heatmap;
map.plugin(["AMap.Heatmap"], function() {
//初始化heatmap对象
heatmap = new AMap.Heatmap(map, {
radius: 15, //给定半径
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'
}*/
});
//设置数据集
heatmap.setDataSet({
data: points,
max: 5
});
});
//判断浏览区是否支持canvas
function isSupportCanvas() {
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
}
</script>
</body>
</html>