# 迁徙图层（MigrationLayer）

迁徙图层适用于展示一对多或者多对一的数据展示，并支持动态效果。迁徙图层以一个外置的DOM元素形式，覆盖在地图对象上层，因此，迁徙图层不支持调整图层顺序。

new aimap.MigrationLayer(layerOptions: Object)

提示

使用该接口前需引入以下js库（在aimap-gl库引入之前）：

公网路径： sdkPathSuffix/libs/aimapcharts/3.8.5/aimapcharts.min.js

# 初始化参数

# LayerOptions参数说明

字段名	类型	说明
id	`string`	默认值为`${type}.${uuid}`，该值不允许重复。
map`必须`	`Map`	地图对象。
minZoom	`number`	能显示的最小的zoom level，默认 3。
maxZoom	`number`	能显示的最大的zoom level（但不包括这个Level），默认20。
spatialReference	`string`	图层数据的坐标系统，默认：`gcj02`。可选项分别为： - GPS坐标系—`wgs84` - 火星/高德坐标系—`gcj02` - 百度坐标系—`bd09` - 城建坐标系—`cgcs2000`。
data`必须`	`MigrationData`	迁徙图数据，具体参见：MigrationData。
style`必须`	`Style`	本图层支持的样式参见：迁徙图层样式。

# MigrationData

字段名	类型	说明
origin`必须`	`MigrationPoint`	迁徙的起点数据，也就是单个的起始点。
destinations`必须`	`Array<MigrationPoint>`	迁徙的终点数据，也就是分散点。

# MigrationPoint

字段名	类型	说明
name`必须`	`string`	迁徙点的名称。
coordinates`必须`	`Array<number>`	迁徙点的坐标。
value	`number`	迁徙点的值。

# Style

字段名	类型	说明
origin	`origin`	迁徙的起点的显示风格。
destinations`必须`	`destinations`	迁徙的终点的显示风格。
migration`必须`	`migration`	迁徙的起终点之间连线的显示风格。

# origin

style项	类型	说明
text-color	`string`	文字颜色。
text-anchor	`string`	文字显示的锚点，默认值：`left`。
text-offset	`Array<number>`	文字的偏移量,[x,y]，单位：像素，默认值：`[0,0]`。
text-field	`string`	文字显示方式，默认值：`name`。
text-size	`number`	文字大小。
icon-image	`string`	矢量图标（SVG）, 自带图标已有： `pin`, `arrow`,`plane`，默认值：`plane`。
icon-size	`number`	图标大小。
icon-color	`string`	图标颜色。

# destinations

style项	类型	说明
text-color	`string`	文字颜色。
text-anchor	`string`	文字显示的锚点，默认值：`right`。
text-offset	`Array<number>`	文字的偏移量,[x,y]，单位：像素，默认值：`[0,0]`。
text-field	`string`	文字显示方式，默认值：`name`。
text-size	`number`	文字大小。
circle-size	`number \| Expression`	支持固定大小，或者指定函数：根据数据自动计算大小 ['interpolate', ['linear'], 'value', [5, 8,10,12]] 以上的函数可以简化成 `[5,8,10,12]`。
circle-color	`string \| Expression`	图标颜色或者Interpolate函数： `['interpolate', ['linear'], 'value', ['#120000', '#002200','#0000ff']]` 以上函数可以简化成`['#120000', '#002200','#0000ff']` 若填写该值，会将`text-color`覆盖。
animation-duration	`number`	动画持续时间。
animation-wave-brush	`string`	波纹绘制方式 line, fill。
animation-wave-scale	`number`	波纹圆环最大限制，值越大波纹越大。

# migration

style项	类型	说明
line-width	`number`	迁徙线的线宽。
line-color	`string \| Expression`	迁徙线的颜色 `['interpolate', ['linear'], 'value', ['#120000', '#002200','#0000ff']]` 以上函数可以简化成`['#120000', '#002200','#0000ff']` 若填写该值，会将`icon-color`覆盖，默认值：`red`。
line-curveness	`number`	迁徙线的弯曲程度。
line-opacity	`number`	迁徙线的不透明度，0~1，默认值：1。
icon-image	`string`	矢量图标（SVG）, 自带图标已有： `pin`, `arrow`,`plane`，默认值：`plane`。
icon-size	`number`	图标大小。
icon-color	`Color`	图标颜色（只有矢量图片才能设置颜色）。
animation-direction	`string`	icon在迁徙线上运动方式从起点向终点运动为：`forward`，反之为：`backward`，默认值：`forward`。
animation-duration	`number`	箭头指向速度，值越小速度越快，默认值：12。

# 示例

const migrationLayerInstance = new aimap.MigrationLayer({
    map,
    spatialReference: 'gcj02',
    data: {
        origin: {
            name: "上海市",
            coordinates: [121.4737, 31.2304]
        },
        destinations: [{
            name: "无锡市",
            coordinates: [120.3119, 31.4912],
            value: 20
        }, {
            name: "南京市",
            coordinates: [118.7674, 32.0415],
            value: 1000
        }, {
            name: "南通市",
            coordinates: [120.864608, 32.016212],
            value: 3000
        }, {
            name: "嘉兴市",
            coordinates: [120.750865, 30.762653],
            value: 3300
        }]
    },
    style: {
        origin: {
            'text-color': '#00ff78',
            'text-anchor': 'right',
            'text-offset': [0, 0],
            'text-size': 19,
            'icon-size': 30,
            'icon-color': '#00ff78',
            'icon-image': 'pin',
        },
        destinations: {
            'text-color': 'green',
            'text-anchor': 'left',
            'text-offset': [0, 0],
            'text-size': 19,
            'circle-size': [5, 30],
            'circle-color': ['#00ff78', '#ff971b', '#acff43', '#ff73b7', '#ffff46',
                '#27bbfe'
            ],
            'animation-wave-brush': 'fill',
            'animation-wave-scale': 3,
            'animation-duration': 10,
        },
        migration: {
            'line-width': 2,
            'line-color': ['#00ff78', '#ff971b', '#acff43', '#ff73b7', '#ffff46',
                '#27bbfe'
            ],
            'line-curveness': 0.5,
            'line-opacity': 1,
            'icon-image': 'plane',
            'icon-size': 20,
            'icon-color': 'red',
            'animation-direction': 'forward',
            'animation-duration': 13,
        }
    }
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

# 实例变量

# id

此图层的 id，如果在初始化图层的参数中指定，则为参数中的 id，否则 SDK 内部会自动生成一个 id。

# 示例

var migrationLayer = new aimap.MigrationLayer({...});
console.log(migrationLayer.id); // "migration.9db79b01-f3c0-4da6-a36a-b4d5827c4e37"

1
2

# type

此图层的类型，对于本图层， type 为固定值：migration。

# 示例

var migrationLayer = new aimap.MigrationLayer({...});
console.log(migrationLayer.type); // "migration"

1
2

# 实例方法

remove()

将本图层从地图中移除，并销毁相关的资源。

返回值

MigrationLayer：this

show()

显示该图层。

返回值

MigrationLayer：this

hide()

隐藏该图层。

返回值

MigrationLayer：this

flyTo()

使地图带有动画的跳转，使得图层的中心点位于屏幕中间。

返回值

MigrationLayer：this

fitView()

使地图带有动画的跳转，使得图层的数据铺满屏幕。

返回值

MigrationLayer：this

← 建筑物图层（BuildingLayer）图表图层（ChartLayer） →