qq.maps.visualization.Migration 类

Migration 是用于创建迁徙图的类,继承自 qq.map.Overlay。

构造函数

语法:new qq.maps.visualization.Migration(options);
参数:options: { MigrationOptions }(必填)迁徙图参数。其属性如下表

MigrationOptions 说明:

名称 类型 说明
map Map (必填)显示迁徙图的地图
animated Boolean 是否开启动画效果(数据量在200以上时建议关闭动画)
stylePicker Function 样式映射函数,参数为MigrationData,要求返回值符合MigrationStyle对象格式
zIndex Number 图层的层叠顺序,数字从小到大对应层叠顺序从下至上,默认为0

方法

方法名 返回值 说明
show() None 显示迁徙图
hide() None 隐藏迁徙图
destroy() None 删除迁徙图
setData(data: Array.< MigrationData >) None 设置迁徙图的数据(建议数据量不超过1万)
setStylePicker(style: Function) None 设置迁徙图的样式映射函数
setZIndex(zIndex: Number) None 设置图层的层叠顺序
getZIndex() Number 获取图层的层叠顺序

MigrationData 说明:

名称 类型 说明
from Object 迁徙起点,格式为{lat:Number, lng:Number, label:String} 
lat Number 纬度
lng Number 经度
label String (可选)标注文字
to Object 迁徙终点,格式为{lat:Number, lng:Number, label:String} 
lat Number 纬度
lng Number 经度
label String (可选)标注文字

MigrationStyle 说明:

名称 类型 说明
color Color 线颜色,支持CSS颜色格式
width 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(35.200697639, 112.04628804),
            zoom: 5
		});
 
    	// 创建迁徙图
    	var migration = new qq.maps.visualization.Migration({
			map: map,
			// animated: false,
			stylePicker: function(data) {
				return {
					color: "rgba(255, 0, 0, .5)",
					width: 2
				}
			}
		});
 
		// 设置数据
		var cq = {lat: 29.5, lng: 106.5, label: "重庆"};
		var bj = {lat: 39.9, lng: 116.4, label: "北京"};
		var cs = {lat: 28.2, lng: 112.9};
		var sh = {lat: 31.14, lng: 121.29};
		var km = {lat: 25.04, lng: 102.42};
		var xs = {lat: 22.01, lng: 100.48};
		var xn = {lat: 36.38, lng: 101.48};
		migration.setData([
			{from:cq, to:bj},
			{from:cq, to:cs},
			{from:cs, to:bj},
			{from:bj, to:xn},
			{from:bj, to:sh},
			{from:cq, to:km},
			{from:km, to:xs}
		]);
 
		// 监听button事件,更改迁徙图配置参数
		document.getElementById("setOptions").addEventListener("click", function(e) {
			var target = e.target;
			switch (target.id) {
				case "show":
					if (migration.visible) {
						migration.hide();
					} else {
						migration.show();
					}
					break;
				case "data":
					migration.setData(getRandomData(10));
					break;
				case "style":
					migration.setStylePicker(function(data){
						return {
							color: data.from.label === "重庆" ? "rgba(0, 0, 255, .5)" : "rgba(0, 200, 255, .5)",
							width: 1
						};
					});
					break;
				case "destroy":
					migration.destroy();
			}
		});
 
		function getRandomData(cnt) {
			let dataArray = [];
			let center = cq;
			for (let index = 0; index < cnt; index++) {
				let r = Math.random() * 30;
				let angle = Math.random() * Math.PI * 2;
				dataArray.push({
					from: center,
					to: {
						lat: center.lat + r * Math.sin(angle),
						lng: center.lng + 2 * r * Math.cos(angle),
					}
				});
			}
			return dataArray;
		}
	}
	</script>
</head>
<body>
	<div id="container"></div>
	<div id="setOptions">
		<button id="show">显示/隐藏</button>
		<button id="data">更新数据</button>
		<button id="style">改变样式</button>
		<button id="destroy">删除对象</button>
	</div>
</body>
</html>

在线试一试

这篇文章对您解决问题是否有帮助?

已解决
未解决