JavaScript API

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>

在线试一试

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

已解决

未解决