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>
这篇文章对您解决问题是否有帮助？
已解决
未解决