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] |
zIndex
|
Number
|
图层的层叠顺序，数字从小到大对应层叠顺序从下至上，默认为0 |
方法
| 方法名 | 返回值 | 说明 |
|---|---|---|
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] |
setZIndex(zIndex: Number)
|
None
|
设置图层的层叠顺序 |
getZIndex()
|
Number
|
获取图层的层叠顺序 |
getRadius()
|
Number
|
获取热力辐射半径 |
getGradient()
|
Object
|
获取热力渐变颜色 |
getOpacity()
|
Array
|
获取不透明度变化范围，[min, max] |
HeatData 说明：
| 名称 | 类型 | 说明 | |
|---|---|---|---|
max
|
Number
|
（可选）热力最强阈值，默认为可见范围内热力数据最大值，高于该值的数据显示为最强色 | |
min
|
Number
|
（可选）热力最弱阈值，默认为0，等于或低于该值的数据不显示 | |
data
|
Array
|
必填 | |
lat
|
Number
|
纬度 | |
lng
|
Number
|
经度 | |
value
|
Number
|
热力值 | |
实例
本示例中，介绍如何创建热力图，并进行数据及参数的设置和修改。
<!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>