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