qq.maps.visualization.Heat 类

Heat 是用于创建热力图的类,继承自qq.maps.Overlay。

构造函数

语法:new qq.maps.visualization.Heat(options);

参数:options: { HeatOptions } (必填)热力图参数。其属性如下表

HeatOptions 说明:

名称 类型 说明
map Map (必填)显示热力图的地图
radius Number 热力辐射绘制半径,默认为20,单位为px,不可小于0
gradient {indensity:color} 热力辐射渐变颜色,indensity取值范围为[0,1],表示热力强度
opacity [Number, Number] 不透明度变化范围,[min, max],不透明度与热力强度正相关,默认为[0, 1]

方法

方法名 返回值 说明
show() None 显示热力图
hide() None 隐藏热力图
destroy() None 删除热力图
setData(data: HeatData) None 设置热力图的数据(建议数据量不超过10万)
setRadius(radius: Number) None 设置热力辐射半径,单位为px
setGradient(gradient: {indensity: color}) None 设置热力辐射渐变颜色,indensity取值范围为[0,1],表示热力强度
setOpacity(opacity: [min: Number, max:Number]) None 设置不透明度变化范围,不透明度与热力强度正相关,比如[0, 0.8]
getRadius() Number 获取热力辐射半径
getGradient() Object 获取热力渐变颜色
getOpacity() Array 获取不透明度变化范围,[min, max]

HeatData 说明:

名称 类型 说明
max Number (可选)热力最强阈值,默认为可见范围内热力数据最大值,高于该值的数据显示为最强色
min Number (可选)热力最弱阈值,默认为0,等于或低于该值的数据不显示
data Array 必填
lat Number 纬度
lng Number 经度
value Number 热力值

实例

本示例中,介绍如何创建热力图,并进行数据及参数的设置和修改。

JavaScript+HTML
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>热力图示例</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
	<style type="text/css">
	html, body {
		width: 100%;
		height: 100%;
	}
	* {
		margin: 0px;
		padding: 0px;
	}
	button {
		width: 100px;
		border: 1px solid #555;
	}
	#container {
		height: 90%;
	}
	</style>
	<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&libraries=visualization&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
	<script>
	window.onload = function(){
		// 创建地图
		var map = new qq.maps.Map(document.getElementById("container"), {
			center: new qq.maps.LatLng(39.9,116.4),
			zoom:8
		});
		// 创建热力图对象
		var heat = new qq.maps.visualization.Heat({
			map: map, // 必填参数,指定显示热力图的地图对象
			radius: 30, // 辐射半径,默认为20
		});
		// 获取热力数据
		var data = getHeatData();
		// 向热力图传入数据
		heat.setData(data);

		// 监听button事件,更改热力图配置参数
		document.getElementById("setOptions").addEventListener("click", function(e) {
			var target = e.target;
			switch (target.id) {
				case "show":
					if (heat.visible) {
						heat.hide(); // 显示热力图
					} else {
						heat.show(); // 隐藏热力图
					}
					break;
				case "data":
					data = getHeatData(10);
					heat.setData(data); // 重置热力图数据
					break;
				case "radius":
					let radius = heat.getRadius(); // 获取辐射半径
					heat.setRadius(radius + 10); // 设置辐射半径
					break;
				case "gradient":
					let gradient = heat.getGradient(); // 获取渐变色
					gradient[1.0] = "#fff"; // 强度最大为白色
					heat.setGradient(gradient); // 设置渐变色
					break;
				case "opacity":
					let opacity = heat.getOpacity();
					opacity = [0.1, 0.8]; // 透明度变化范围为0.2~0.8
					heat.setOpacity(opacity); // 设置透明度变化范围
					break;
				case "destroy":
					heat.destroy();
				default:
			}
		});

		function getHeatData(cnt, max, min) {
			let data = [];
			let center = {
				lat: 39.9,
				lng: 116.4
			};
			cnt = cnt || 100;
			max = max || 100;
			min = min || 0;
			for (let index = 0; index < cnt; index++) {
				let r = Math.random();
				let angle = Math.random() * Math.PI * 2;
				let heatValue = Math.random() * (max - min) + min;
				data.push({
					lat: center.lat + r * Math.sin(angle),
					lng: center.lng + r * Math.cos(angle),
					value: heatValue
				});
			}
			return {
				max: max,
				min: min,
				data: data
			};
		}
	}
	</script>
</head>
<body>
	<div id="container"></div>
	<div id="setOptions">
		<button id="show">显示/隐藏</button>
		<button id="data">更新数据</button>
		<button id="radius">改变半径</button>
		<button id="gradient">改变颜色</button>
		<button id="opacity">改变透明度</button>
		<button id="destroy">销毁对象</button>
	</div>
</body>
</html>