# 矢量瓦片图层（VectorLayer）

矢量瓦片图层用于展示矢量瓦片类型的数据，矢量瓦片的样式不受限制，视矢量瓦片内的数据而定。

new aimap.VectorLayer(layerOptions: Object)

# 初始化参数

# LayerOptions参数说明

字段名	类型	说明
id	`string`	默认值为`${type}.${uuid}`，该值不允许重复。
map	`Map`	地图对象，如果设置，该图层会自动加载到地图中，如果未设置，需要手动加载图层：`addTo(map)`。
zIndex	`number`	图层在地图中所属的垂直方向的位置索引，默认为 0。
minZoom	`number`	能显示的最小的zoom level，默认 3。
maxZoom	`number`	能显示的最大的zoom level（但不包括这个Level），默认20。
interactive	`boolean`	是否创建默认交互，如鼠标移入移出图层后鼠标样式变化。默认`true`。
images	`Array<Image>`	如果指定`icon-image`样式，需要在这里添加图片，具体参见：Image 配置。
data`必须`	`Data`	支持矢量瓦片数据服务，具体参见：矢量瓦片定义。
dataLayer	`string`	如果 data 属性传入的数据源为矢量瓦片，那么需要通过本属性来指定使用矢量瓦片中的哪个图层。
dataId	`string`	如果希望复用本图层的数据，可以指定一个字符串，在创建别的图层时，可以直接使用这个 `id`作为数据源。
dataOptions	`DataOptions`	数据源的其他配置项，包括数据源的级别范围，额外的处理流程等。具体参见：DataOptions 配置。
joinData	`Object`	用户关联的数据，使用数组形式。数组元素为有相同字段的对象。
joinOptions	`JoinOptions`	用户关联的数据时的额外配置项，比如需要关联的字段等，具体参见：JoinOptions 配置。
style`必须`	`Style`	本图层支持的样式与矢量瓦片内的数据格式有关，包括：点数据： - 圆点样式（Circle） - 文字样式（Text） - 图标样式（Icon） - 文本和图标通用样式（Symbol）线数据： - 线样式（Line）面数据： - 填充样式（Fill） - 线样式（Line）。
filter	`Filter`	图层数据的过滤条件，不满足过滤条件的数据将不显示。具体参见：Filter 配置。
focus	`Focus`	在执行`flyTo`或者`fitView`时的视角动画的默认参数，具体参见：Focus 配置。
blink	`BlinkOptions`	在图层中设置进行闪烁显示时的相关配置，可以包括过滤参数和显示风格参数。闪烁只适用于点的场景下。具体参见：BlinkOptions 配置。
highlight	`HighlightOptions`	在图层中设置高亮指定元素的相关配置，可以包括过滤参数和显示风格参数。具体参见：HighlightOptions 配置。

# 示例

const layer = new aimap.VectorLayer({
    map,
    layers: [{
        data: 'https://api.newayz.com/maps/tilestream/v1/layers/beicai-custom-layers-20210324/tiles/{z}/{x}/{y}',
        dataLayer: 'neighborhood',
        dataType: 'vector',
        dataOptions: {
            maxZoom: 16
        },
        style: {
                'fill-color': '#28C76F',
                'fill-opacity': 0.6,
                'line-color': '#F8D800',
        },
    }]
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

当在同一个矢量瓦片服务内，有多个图层时，可以这样创建：

const layer = new aimap.VectorLayer({
    map,
    layers: [{
        name: 'township',
        // 通过指定相同的 dataId，使多个图层共用一个瓦片服务。
        dataId: "pudong",
        data: 'https://tiles.newayz.com/maps/tilestream/v1/layers/pudong-predef-adms-20210427/tiles/{z}/{x}/{y}',
        dataLayer: 'township',
        dataType: 'vector',
        minZoom: 12,
        maxZoom: 13,
        style: {
                'fill-color': 'red',
                'fill-opacity': 0.6,
                'line-color': '#F8D800',
        },
    }, {
        name: 'neighborhood',
        dataId: "pudong",
        dataLayer: 'neighborhood',
        dataType: 'vector',
        minZoom: 13,
        maxZoom: 19,
        style: {
                'fill-color': '#28C76F',
                'fill-opacity': 0.6,
                'line-color': '#F8D800',
        },
    }]
});

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

线上示例：通用图层服务加载 -- 矢量瓦片服务 (opens new window)。

# 实例变量

# id

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

# 示例

var vectorLayer = new aimap.VectorLayer({...});
console.log(vectorLayer.id); // "vector.9db79b01-f3c0-4da6-a36a-b4d5827c4e37"

1
2

# type

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

# 示例

var vectorLayer = new aimap.VectorLayer({...});
console.log(vectorLayer.type); // "vector"

1
2

# 实例方法

addTo(map)

如果在初始化图层时，没有传入地图对象参数，则需要使用此方法来将图层添加到地图上。

参数

map(Map)：需要添加本图层的地图对象。

返回值

VectorLayer：this

remove()

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

返回值

VectorLayer：this

show()

显示该图层。

返回值

VectorLayer：this

hide()

隐藏该图层。

返回值

VectorLayer：this

setzIndex(zIndex, options?)

设置图层在 z 轴上的顺序。数值越大，层级越高。

参数

zIndex(number | String)：大于 0 的整数或者表示地图初始化样式中自带的图层 id。

options(SetzIndexOptions)：设置层级的更多参数，具体参见：SetzIndexOptions 配置。

返回值

VectorLayer：this

示例

const layer1 = new Polygon(...);
const layer2 = new Polygon(...);

// 将 layer1 图层放置到5层，layer2 图层放置到4层。
layer1.setzIndex(5);
layer2.setzIndex(4);

// 将 township-pudong 图层中的子图层 'township' 放置到 'building' 下面。
map.getLayer('township-pudong').setzIndex('building', {layer: 'township'})

1
2
3
4
5
6
7
8
9

flyTo(options?)

只有通过图致服务得到的图层才能使用此接口。

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

参数

options(SetFocusOptions)：跳转动画的更多参数，具体参见：SetFocusOptions 配置。

返回值

VectorLayer：this

fitView(options?)

只有通过图致服务得到的图层才能使用此接口。

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

参数

options(SetFocusOptions)：跳转动画的更多参数，具体参见：SetFocusOptions 配置。

返回值

VectorLayer：this

setStyle(style, options?)

增量更新图层的样式。

参数

style(style)：样式对象，这些样式将增量更新到图层已有的样式上，支持的样式与当前图层一致。

options(SetStyleOptions)：设置新样式的其他配置项，具体参见：SetStyleOptions 配置。

返回值

VectorLayer：this

setData(data, options?)

重新指定数据，原有的数据会被清除掉。

参数

data(Data)：与 layeroptions参数说明中的Data字段定义一致。

options(SetDataOptions)：指定新数据源的其他配置项，具体参见：SetDataOptions 配置。

返回值

VectorLayer：this

setJoinData(data, options?)

设置图层数据的关联数据，关联数据可用于配置样式。一般情况下，关联数据是一些用户自有数据，通过与固定的地理数据相结合来做展示。

参数

data(Data)：用户关联的数据，使用数组形式。数组元素为有相同字段的对象。

options(SetJoinOptions)：进行数据关联操作的其他配置项，具体参见：SetJoinOptions 配置。

返回值

VectorLayer：this

updateJoinData(data, options?)

更新图层数据的关联数据，首次对数据进行关联，请使用 setJoinData。

参数

data(Data)：用户关联的数据，使用数组形式。数组元素为有相同字段的对象。

options(SetJoinOptions)：进行数据关联操作的其他配置项，具体参见：SetJoinOptions 配置。

返回值

VectorLayer：this

setFilter(filter, options?)

为图层的数据设置过滤条件，不满足过滤条件的数据将会被隐藏。

参数

filter(Filter)：图层数据的过滤条件，不满足过滤条件的数据将不显示。具体参见：Filter 配置

options(SetFilterOptions)：进行过滤操作的其他配置项，具体参见：SetFilterOptions 配置。

返回值

VectorLayer：this

setPopup(popup, options)

为图层设置弹窗对象。

参数

popup(Popup | string)：Popup对象，或者弹窗中想要显示的内容文本。 options(Options)：弹窗的配置项，具体参见：Popup 配置

返回值

VectorLayer：this

getPopup()

获取图层的弹窗对象，如果没有调用过 setPopup 接口，将返回null。

返回值

Popup：图层的弹窗对象。

togglePopup()

切换弹窗的显示，隐藏效果。

返回值

VectorLayer：this

highlight(options?)

对图层进行高亮操作。

参数

options(SetHighlightOptions)：高亮操作的配置项，包括指定高亮数据，高亮样式等，具体参见：SetHighlightOptions 配置

返回值

VectorLayer：this

clearHighlight(options?)

清除图层的高亮效果。

参数

options(ClearHighlightOptions)：清除的配置项，包括指定清除的图层等，具体参见：ClearHighlightOptions 配置

返回值

VectorLayer：this

blink(options?)

对图层进行闪烁操作。

参数

options(SetBlinkOptions)：闪烁操作的配置项，包括指定闪烁数据，闪烁样式等，具体参见：SetBlinkOptions 配置

返回值

VectorLayer：this

clearBlink(options?)

清除图层的闪烁效果。

参数

options(ClearBlinkOptions)：清除的配置项，包括指定清除的图层等，具体参见：ClearBlinkOptions 配置

返回值

VectorLayer：this

on(type, listener)

为图层绑定事件监听。

参数

type(string)：事件类型，支持的事件类型可参考图层事件。

listener(Function)：如果此处使用匿名函数，则后续将无法解绑。

返回值

VectorLayer：this

once(type, listener)

为图层绑定事件监听，事件只会响应一次。

参数

type(string)：事件类型，支持的事件类型可参考图层事件。

listener(Function)：如果此处使用匿名函数，则后续将无法解绑。

返回值

VectorLayer：this

off(type, listener)

解除已绑定事件监听。

参数

type(string)：事件类型，支持的事件类型可参考图层事件。

listener(Function)：通过 on 或者 once 绑定的事件对象。

返回值

VectorLayer：this

# 图层事件

mousedown

当鼠标点击图层时触发。

mouseup

当鼠标在图层中松开时触发。

click

当鼠标在图层同一点处点击并松开时触发。

dblclick

当鼠标双击图层同一点时触发。

mousemove

当鼠标在图层中移动时触发。

mouseenter

当鼠标从某一图层外部或地图画布外部进入当前图层的可见部分时触发。

mouseleave

当鼠标离开当前图层的可见部分时触发。

← 重投影图层（ReprojectionLayer） WMS 图层（WMSLayer） →