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>