Class: Overlay

ol/Overlay~Overlay 


import Overlay from 'ol/Overlay.js';

显示在地图上并附加到单个地图位置的元素。与 Control 类似，覆盖物是可见的部件。与控件不同，它们不在屏幕上的固定位置，而是绑定到地理坐标，因此平移地图会移动覆盖物但不会移动控件。

示例：

import Overlay from 'ol/覆盖物。js';

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

new Overlay(options)

覆盖物。js, line 112
Name Type Description
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，放置在由 className 属性指定 CSS 类名的容器中。
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 类名。
触发事件：

Extends

Observable Properties

Name Type Settable ObjectEvent type Description
element HTMLElement | undefined yes change:element

包含覆盖物的元素。
map Map | null yes change:map

覆盖物所属的地图。
offset Array.<number> yes change:offset

偏移量。
position Coordinate | undefined yes change:position

覆盖物锚定的空间点。
positioning Positioning yes change:positioning

覆盖物相对于其在地图上的点的定位方式。

Methods

changed() inherited

Observable.js, line 68

增加修订计数器并分发 'change' 事件。

dispatchEvent(event){boolean | undefined} inherited

events/Target.js, line 85

分发事件并调用所有监听此类型事件的监听器。事件参数可以是一个字符串或一个 具有 type 属性的对象。

Name Type Description
event BaseEvent | string

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

get(key){*} inherited

Object.js, line 136

获取一个值。

Name Type Description
key string

键名。
返回值：
值。

getElement(){HTMLElement | undefined}

覆盖物。js, line 218

获取此覆盖物的 DOM 元素。

返回值：
包含覆盖物的元素。

getId(){number | string | undefined}

覆盖物。js, line 227

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

返回值：
Id.

getKeys(){Array.<string>} inherited

Object.js, line 149

获取对象属性名列表。

返回值：
属性名列表。

getMap(){Map | null}

覆盖物。js, line 238

获取与此覆盖物关联的地图。

返回值：
The map that the overlay is part of.

getOffset(){Array.<number>}

覆盖物。js, line 250

获取此覆盖物的偏移量。

返回值：
The offset.

getPosition(){Coordinate | undefined}

覆盖物。js, line 261

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

返回值：
The spatial point that the overlay is anchored at.

getPositioning(){Positioning}

覆盖物。js, line 274

获取此覆盖物的当前定位方式。

返回值：
How the overlay is positioned relative to its point on the map.

getProperties(){NoInfer.<Properties>} inherited

Object.js, line 158

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

返回值：
对象。

getRevision(){number} inherited

Observable.js, line 79

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

返回值：
版本号。

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

Observable.js, line 152

监听特定类型的事件。

Name Type Description
type string | Array.<string>

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

监听器函数。
返回值：
监听器的唯一键。如果第一个参数是事件类型数组，则返回键的数组。

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

Observable.js, line 164

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

Name Type Description
type string | Array.<string>

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

监听器函数。
返回值：
监听器的唯一键。如果第一个参数是事件类型数组，则返回键的数组。

panIntoView(panIntoViewOptions)

覆盖物。js, line 408

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

Name Type Description
panIntoViewOptions

平移操作的选项

Name Type Description
animation PanOptions (defaults to {})

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

平移到视图中时覆盖物与地图边界之间的边距（像素）。

set(key, value, silent) inherited

Object.js, line 218

设置一个值。

Name Type Description
key string

键名。
value *

值。
silent boolean | undefined

更新但不触发事件。

setElement(element)

覆盖物。js, line 354

设置与此覆盖物关联的 DOM 元素。

Name Type Description
element HTMLElement | undefined

包含覆盖物的元素。

setMap(map)

覆盖物。js, line 365

设置与此覆盖物关联的地图。

Name Type Description
map Map | null

覆盖物所属的地图。传递 null 仅从当前地图移除覆盖物。

setOffset(offset)

覆盖物。js, line 375

设置此覆盖物的偏移量。

Name Type Description
offset Array.<number>

偏移量。

setPosition(position)

覆盖物。js, line 387

设置此覆盖物的位置。如果位置为 undefined，覆盖物将被隐藏。

Name Type Description
position Coordinate | undefined

覆盖物锚定的空间点。

setPositioning(positioning)

覆盖物。js, line 490

设置此覆盖物的定位方式。

Name Type Description
positioning Positioning

覆盖物相对于地图上其定位点的放置方式。

setProperties(values, silent) inherited

Object.js, line 238

设置一组键值对。 注意，这会更改任何现有属性并添加新属性（不会移除任何现有属性）。

Name Type Description
values Partial.<NoInfer.<Properties>>

值。
silent boolean | undefined

更新但不触发事件。

un(type, listener) inherited

Observable.js, line 173

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

Name Type Description
type string | Array.<string>

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

监听器函数。

unset(key, silent) inherited

Object.js, line 262

取消设置一个属性。

Name Type Description
key string

键名。
silent boolean | undefined

取消设置但不触发事件。