类：覆盖层

ol/Overlay~覆盖物


import Overlay from 'ol/Overlay.js';

一种显示在地图上并绑定到单个地理位置的元素。与 Control 类似，覆盖物是可见的小部件。与控件不同，它们不固定在屏幕上的某个位置，而是绑定到地理坐标上，因此平移地图时，覆盖物会随之移动，而控件则保持固定。

例子：

import Overlay from 'ol/Overlay.js';

// ...
const popup = new Overlay({
  element: document.getElementById('popup'),
});
popup.setPosition(coordinate);
map.addOverlay(popup);

new Overlay(options)

Overlay.js, line 112
Name Type 描述
id number | string | undefined

设置覆盖层ID。覆盖层ID可以与getOverlayById方法。
element HTMLElement | undefined

覆盖元素。
offset Array.<number> (defaults to [0, 0])

用于定位叠加层的偏移量以像素为单位。数组的第一个元素为水平偏移量，正值使其向右移动；第二个元素为垂直偏移量，正值使其向下移动。
position Coordinate | undefined

地图投影中的叠加位置。
positioning Positioning (defaults to 'top-left')

定义覆盖物相对于其基准位置的实际定位方式position属性。可能的值有：'bottom-left', 'bottom-center', 'bottom-right', 'center-left', 'center-center', 'center-right', 'top-left', 'top-center'，和'top-right'.
stopEvent boolean (defaults to true)

是否应停止事件向地图视口的传播。如果true叠加层与控件共享同一容器（CSS类名）ol-overlaycontainer-stopevent）；如果false它被放置在指定CSS类名的容器中className属性。
insertFirst boolean (defaults to true)

覆盖层是先插入到覆盖层容器中，还是附加到后面。如果覆盖层与控件放置在同一容器中（请参阅stopEvent选项）你可能需要设置insertFirst到true因此，覆盖层显示在控件下方。
autoPan PanIntoViewOptions | boolean (defaults to false)

通话时平移地图setPosition，使覆盖物在当前视口中完全可见。
className string (defaults to 'ol-overlay-container ol-selectable')

CSS类名。
触发事件：

继承

可观察属性

Name Type 可设置 ObjectEvent type 描述
element HTMLElement | undefined 是的 change:element

承载覆盖层的元素。
map Map | null 确认 change:map

叠加层所属的地图
offset Array.<number> 是的 change:offset

偏移量。
position Coordinate | undefined 是的 change:position

叠加层所锚定的空间点。
positioning Positioning 确认 change:positioning

叠加层相对于其地图上点的定位方式。

方法

changed() inherited

Observable.js, line 68

递增修订计数器并触发“更改”事件。

dispatchEvent(event){boolean | undefined} inherited

events/Target.js, line 85

调度一个事件并调用所有侦听此类型事件的侦听器。事件参数可以是字符串，也可以是具有 type 属性的对象。

Name Type 描述
event BaseEvent | string

事件对象。
返回：
false 如果有人在事件对象上调用了 preventDefault 或任何侦听器返回了 false。

get(key){*} inherited

Object.js, line 135

获取值。

Name Type 描述
key string

键名。
返回：
值。

getElement(){HTMLElement | undefined}

Overlay.js, line 218

获取此叠加层的DOM元素。

返回：
包含覆盖层的元素。

getId(){number | string | undefined}

Overlay.js, line 227

获取在构造函数中设置的覆盖层标识符。

返回：
ID。

getKeys(){Array.<string>} inherited

Object.js, line 148

获取对象属性名列表

返回：
属性列表

getMap(){Map | null}

Overlay.js, line 238

获取与此叠加层关联的地图。

返回：
该叠加层所属的地图

getOffset(){Array.<number>}

Overlay.js, line 250

获取此叠加层的偏移量。

返回：
偏移量。

getPosition(){Coordinate | undefined}

Overlay.js, line 261

获取此覆盖物的当前位置。

返回：
叠加层所锚定的空间点。

getPositioning(){Positioning}

Overlay.js, line 274

获取此覆盖层的当前位置。

返回：
叠加层相对于其在地图上点的定位方式。

getProperties(){Object.<string, *>} inherited

Object.js, line 157

获取包含所有属性名和属性值的对象。

返回：
对象。

getRevision(){number} inherited

Observable.js, line 79

获取此对象的版本号。每当对象被修改时，其版本号将自动递增。

返回：
修订。

on(type, listener){EventsKey | Array<EventsKey>} inherited

Observable.js, line 152

监听特定类型的事件。

Name Type 描述
type string | Array.<string>

事件类型或事件类型数组。
listener function

监听器函数。
返回：
监听器的唯一键。如果以事件类型数组作为第一个参数调用，则返回将是键的数组。

once(type, listener){EventsKey | Array<EventsKey>} inherited

Observable.js, line 164

监听一次特定类型的事件。

Name Type 描述
type string | Array.<string>

事件类型或事件类型数组。
listener function

监听器函数。
返回：
监听器的唯一键。如果以事件类型数组作为第一个参数进行调用，则返回值将是键的数组。

panIntoView(panIntoViewOptions)

Overlay.js, line 408

平移地图，使覆盖物在当前视口中完全可见（如有必要）。

Name Type 描述
panIntoViewOptions

Options for the pan action

Name Type 描述
animation PanOptions (defaults to {})

平移动画参数
margin number (defaults to 20)

平移至视图时，叠加层与地图边界之间的边距（以像素为单位）。

set(key, value, silent) inherited

Object.js, line 215

设置值。

Name Type 描述
key string

键名。
value *

值。
silent boolean | undefined

更新而不触发事件。

setElement(element)

Overlay.js, line 354

设置与此叠加层关联的DOM元素。

Name Type 描述
element HTMLElement | undefined

包含覆盖层的元素

setMap(map)

Overlay.js, line 365

将地图与此叠加层关联。

Name Type 描述
map Map | null

该叠加层所属的地图。通过。null只需从当前地图中移除叠加层。

setOffset(offset)

Overlay.js, line 375

设置此叠加层的偏移量。

Name Type 描述
offset Array.<number>

偏移。

setPosition(position)

Overlay.js, line 387

设置此叠加层的位置。如果位置为 undefined，则隐藏叠加层。

Name Type 描述
position Coordinate | undefined

叠加层所锚定的点。

setPositioning(positioning)

Overlay.js, line 490

配置此叠加层的位置。

Name Type 描述
positioning Positioning

叠加层相对于其地图点的定位方式。

setProperties(values, silent) inherited

Object.js, line 235

设置键值对集合。请注意，此操作会修改现有属性并添加新属性，但不会删除任何现有属性。

Name Type 描述
values Object.<string, *>

价值观。
silent boolean | undefined

更新时不触发事件。

un(type, listener) inherited

Observable.js, line 173

取消监听特定类型的事件。

Name Type 描述
type string | Array.<string>

事件类型或事件类型数组。
listener function

监听器函数。

unset(key, silent) inherited

Object.js, line 259

清除属性。

Name Type 描述
key string

键名。
silent boolean | undefined

取消设置而不触发事件。