qq.maps.visualization.Dots 类
Dots 是用于创建点聚图的类，继承自 qq.map.Overlay。
构造函数
语法：new qq.maps.visualization.Dots(options);
参数：options: { DotsOptions }（必填）点聚图参数。其属性如下表
DotsOptions 说明：
| 名称 | 类型 | 说明 |
|---|---|---|
map
|
Map
|
（必填）显示点聚图的地图 |
style
|
DotsStyle
|
点样式 |
groupBy
|
String
|
若数据需要分组，则通过该字段设置分组依据的字段名，数据中该字段的值为groupId。默认为null，不进行分组。 |
groupStyles
|
{groupId:DotsStyle}
|
各分组点样式，以{groupId:DotsStyle}的格式 |
zIndex
|
Number
|
图层的层叠顺序，数字从小到大对应层叠顺序从下至上，默认为0 |
DotsStyle 说明：
| 名称 | 类型 | 说明 |
|---|---|---|
fillColor
|
Color | ColorGradient
|
填充色，可以设置为渐变色{stop:color}，stop表示渐变中开始与结束之间的位置，取值范围为[0,1]。默认为rgba(220, 0, 0, 0.8)。 |
strokeColor
|
Color
|
边线颜色，默认为rgba(220, 0, 0, 0.8)。 |
strokeWidth
|
Number
|
边线宽度，默认为0(px) |
radius
|
Number
|
半径，默认为5(px) |
方法
| 方法名 | 返回值 | 说明 |
|---|---|---|
show()
|
None
|
显示点聚图 |
hide()
|
None
|
隐藏点聚图 |
destroy()
|
None
|
删除点聚图 |
setData(data: Array.< DotsData >)
|
None
|
设置点聚图的数据（建议数据量不超过10万） |
setStyle(style: DotsStyle)
|
None
|
设置点样式 |
setGroupBy(grougBy: String)
|
None
|
设置分组字段 |
setGroupStyle(groupId: String, style: DotsStyle)
|
None
|
设置分组样式 |
setZIndex(zIndex: Number)
|
None
|
设置图层的层叠顺序 |
getZIndex()
|
Number
|
获取图层的层叠顺序 |
getStyle()
|
Object
|
获取点样式 |
getGroupBy()
|
String
|
获取分组字段 |
getGroupStyles()
|
Object
|
获取分组样式 |
DotsData 说明：
| 名称 | 类型 | 说明 |
|---|---|---|
lat
|
Number
|
纬度 |
lng
|
Number
|
经度 |
[groupBy1]
|
String
|
分组类别1 |
[groupBy2]
|
String
|
分组类别2 |
实例
本示例中，介绍如何创建散点图，并进行数据及参数的设置和修改。
<!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: 9
});
// 创建散点图对象
var dots = new qq.maps.visualization.Dots({
map: map, // 必填参数，指定显示散点图的地图对象
style: {
fillColor: "#3CF",
strokeColor: "#00C",
strokeWidth: 1,
radius: 8
}
});
// 获取散点数据
var data = getDotsData();
// 向散点图传入数据
dots.setData(data);
// 监听button事件，更改散点图配置参数
document.getElementById("setOptions").addEventListener("click", function(e) {
var target = e.target;
switch (target.id) {
case "show":
if (dots.visible) {
dots.hide(); // 显示散点图
} else {
dots.show(); // 隐藏散点图
}
break;
case "data":
data = getDotsData();
dots.setData(data); // 重置散点图数据
break;
case "style":
let style = dots.getStyle(); // 获取点样式
style = {
fillColor: {
0: "rgba(255, 0, 0, 1)",
0.2: "rgba(255, 0, 0, 0.7)",
0.5: "rgba(255, 0, 0, 0.3)",
1: "rgba(255, 0, 0, 0)"
},
strokeWidth: 0
};
dots.setStyle(style); // 设置点样式
break;
case "group":
let groupBy = "type";
dots.setGroupStyle("a", {
fillColor: "#0D0",
});
dots.setGroupStyle("b", {
fillColor: "#FA3"
});
dots.setGroupBy(groupBy);
break;
default:
}
});
function getDotsData(cnt) {
let data = [];
let center = {
lat: 39.9,
lng: 116.4
};
let typeIds = ["a", "b", "c"];
cnt = cnt || 1000;
for (let index = 0; index < cnt; index++) {
let r = Math.random();
let angle = Math.random() * Math.PI * 2;
let typeId = typeIds[Math.floor(Math.random() * 3)];
data.push({
lat: center.lat + r * Math.sin(angle),
lng: center.lng + 1.5 * r * Math.cos(angle),
type: typeId
});
}
return data;
}
}
</script>
</head>
<body>
<div id="container"></div>
<div id="setOptions">
<button id="show">显示/隐藏</button>
<button id="data">更新数据</button>
<button id="style">改变点样式</button>
<button id="group">分组显示</button>
</div>
</body>
</html>