web地图热力图理解

直接上代码:

<!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

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

dinxin横刀一笑

意思不意思那是你的意思

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值