# 海量点图层(MassMarkerLayer)

海量点图层用于展示点类型的数据,每个点可以配置圆点样式,图标样式,文字样式。

new aimap.MassMarkerLayer(layerOptions: Object)
1

# 初始化参数

# LayerOptions参数说明

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

# 示例

map.addImage('green', 'an-online-image-url-path-or-import-from-your-project/image.png');

massMarkerLayer = new aimap.MassMarkerLayer({
    map,
    data: {
        type: 'SimpleFeatureCollection',
        features: [{
            id: 1,
            icon: 'green',
            coordinates: [121.613946, 31.205494]
        }, {
            id: 2,
            icon: 'green',
            coordinates: [121.612846, 31.205494]
        }, {
            id: 3,
            icon: 'green',
            coordinates: [121.611746, 31.205494]
        }, {
            id: 4,
            icon: 'green',
            coordinates: [121.610646, 31.205494]
        }]
    },
    style: {
        'text-field': '{id}',
        'text-color': '#00ff00',
        'text-anchor': 'bottom',
        'text-offset': [0, -4],
        'icon-anchor': 'bottom',
        //获取data中的icon属性值来配置图标
        'icon-image': ['get', 'icon'],
        'icon-size': 0.2,
    }
});
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

# 实例变量

# id

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

# 示例

var massMarkerLayer = new aimap.MassMarkerLayer({...});
console.log(massMarkerLayer.id); // "massMarker.9db79b01-f3c0-4da6-a36a-b4d5827c4e37"
1
2

# type

此图层的类型,对于本图层, type 为固定值:massMarker

# 示例

var massMarkerLayer = new aimap.MassMarkerLayer({...});
console.log(massMarkerLayer.type); // "massMarker"
1
2

# 实例方法

addTo(map)

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

参数

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

返回值

MassMarkerLayer:this

remove()

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

返回值

MassMarkerLayer:this

show()

显示该图层。

返回值

MassMarkerLayer:this

hide()

隐藏该图层。

返回值

MassMarkerLayer:this

setzIndex(zIndex, options?)

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

参数

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

options(SetzIndexOptions):设置层级的更多参数,具体参见:SetzIndexOptions 配置

返回值

MassMarkerLayer:this

flyTo(options?)

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

参数

options(SetFocusOptions):跳转动画的更多参数,具体参见:SetFocusOptions 配置

返回值

MassMarkerLayer:this

fitView(options?)

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

参数

options(SetFocusOptions):跳转动画的更多参数,具体参见:SetFocusOptions 配置

返回值

MassMarkerLayer:this

setStyle(style, options?)

增量更新图层的样式。

参数

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

options(SetStyleOptions):设置新样式的其他配置项,具体参见:SetStyleOptions 配置

返回值

MassMarkerLayer:this

setData(data, options?)

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

参数

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

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

返回值

MassMarkerLayer:this

setJoinData(data, options?)

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

参数

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

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

返回值

MassMarkerLayer:this

updateJoinData(data, options?)

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

参数

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

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

返回值

MassMarkerLayer:this

setFilter(filter, options?)

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

参数

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

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

返回值

MassMarkerLayer:this

setPopup(popup, options)

为图层设置弹窗对象。

参数

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

返回值

MassMarkerLayer:this

getPopup()

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

返回值

Popup:图层的弹窗对象。

togglePopup()

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

返回值

MassMarkerLayer:this

highlight(options?)

对图层进行高亮操作。

参数

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

返回值

MassMarkerLayer:this

clearHighlight(options?)

清除图层的高亮效果。

参数

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

返回值

MassMarkerLayer:this

on(type, listener)

为图层绑定事件监听。

参数

type(string):事件类型,支持的事件类型可参考 图层事件

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

返回值

MassMarkerLayer:this

once(type, listener)

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

参数

type(string):事件类型,支持的事件类型可参考 图层事件

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

返回值

MassMarkerLayer:this

off(type, listener)

解除已绑定事件监听。

参数

type(string):事件类型,支持的事件类型可参考 图层事件

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

返回值

MassMarkerLayer:this

# 图层事件

mousedown

当鼠标点击图层时触发。

mouseup

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

click

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

dblclick

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

mousemove

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

mouseenter

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

mouseleave

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

最后更新于: 7/22/2022, 5:39:57 PM