直接上代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>高德地图热力图</title>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<style>
html,
body,
#container{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="container" ></div>
<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>
<script type="text/javascript">
// document.getElementById("container")
// div
// p
// table
// h
// th
// td
// ul
var map = new AMap.Map("container", {
resizeEnable: true,
center: [116.418261, 39.921984],
zoom: 11
});
if (!isSupportCanvas()) {
alert('热力图仅对支持canvas的浏览器适用,您所使用的浏览器不能使用热力图功能,请换个浏览器试试~')
}
//详细的参数,可以查看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: 25, //给定半径
opacity: [0, 0.8]
,
//
gradient:{
0.5: 'blue', // [0,0.5)
0.65: 'rgb(117,211,248)',
0.7: 'rgb(0, 255, 0)',
0.9: '#ffea00',
1.0: 'red'
}
});
//设置数据集:该数据为北京部分“公园”数据
heatmap.setDataSet({
data: heatmapData,
// min默认值是0,heatmapData数组中的每个索引对象中count值 在100 所占比重的百分比
// 在gradient中所属的比例范围,假设值为0.2,属于0.5: 'blue', 一个圆圈全是蓝色
max: 100
});
});
var bounds = map.getBounds();
// 数组push
// var arr = [];
// var obj = {
// x:111.32,
// y:32.111,
// count:76
// };
// arr.push(obj)
// 获取当前视野区域内随机一点
// function getRandomPt() {
// var bounds = map.getBounds(),
// southWest = bounds.getSouthWest(),
// northEast = bounds.getNorthEast(),
// lngSpan = northEast.x - southWest.x,
// latSpan = northEast.y - southWest.y;
// return new Aqsc.Point(
// southWest.x + lngSpan * Math.random(),
// southWest.y + latSpan * Math.random()
// );
// }
//判断浏览区是否支持canvas
function isSupportCanvas() {
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
}
</script>
</body>
</html>
重点理解
// 整个过程圆圈由下而上叠加
gradient:{
0.5: 'blue', // [0,0.5) heatmapData某个索引的对象的count值所在百分比小于0.5 则只有一个最外层的蓝色圈
0.65: 'rgb(117,211,248)',// [0.5,0.65) heatmapData某个索引的对象的count值所在百分比小于0.65大于等于0.5则有一个最外层的蓝色圈和次外层rgb(117,211,248)颜色的圈
0.7: 'rgb(0, 255, 0)',// [0.65,0.7) heatmapData某个索引的对象的count值所在百分比小于0.7大于等于0.65则有一个最外层的蓝色圈和次外层rgb(117,211,248)颜色的圈,次次外层rgb(0, 255, 0)的圈
0.9: '#ffea00',// 以下以此类推
1.0: 'red'// 以下以此类推
}
如图:
不管是高德地图的热力图还是百度地图的热力图或是开源leaflet的热力图,其参数都是这个原理!
PS:后续小编的主要精力放到GIS理论开发知识的大众化的道路了,通过浅显易懂的语言,结合多年行业应用开发,通过微信订阅号传播(每周更新三篇文章及相关GIS编码知识),为GIS的发展尽微博之力。终极目标是让GIS不再专业,让GIS更加大众,使得GIS深入各行业应用,让每位GISER都有一股自豪感!以下是我的微信订阅号二维码,感兴趣的可以交流沟通!
一位更懂IT的GISER,一位更懂GIS的IT