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}的格式

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 设置分组样式
getStyle() Object 获取点样式
getGroupBy() String 获取分组字段
getGroupStyles() Object 获取分组样式

DotsData 说明:

名称 类型 说明
lat Number 纬度
lng Number 经度
[groupBy1] String 分组类别1
[groupBy2] String 分组类别2

实例

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

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: 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>