Class: View

ol/View~View 


import View from 'ol/View.js';

View 对象表示地图的简单 2D 视图。

这是用于更改地图中心、分辨率和旋转的对象。

View 具有 projection。投影决定中心的坐标系，其单位决定分辨率的单位（每像素投影单位）。默认投影为 Web Mercator (EPSG:3857)。

视图状态

View 由三个状态决定：center、resolution 和 rotation。每个状态都有对应的 getter 和 setter，例如 center 状态的 getCenter 和 setCenter。

zoom 状态实际上不保存在视图上：所有内部计算使用 resolution 状态。不过 setZoom 和 getZoom 方法仍可用，以及 getResolutionForZoom 和 getZoomForResolution 用于在两个系统之间转换。

约束

setCenter、setResolution 和 setRotation 可用于更改视图的状态，但构造函数中定义的任何约束都会在过程中应用。

View 对象可以有分辨率约束、旋转约束和中心约束。

分辨率约束通常限制最小/最大值并吸附到特定分辨率。它由以下选项决定：resolutions、maxResolution、maxZoom 和 zoomFactor。如果设置了 resolutions，其他三个选项将被忽略。有关更多信息，请参阅每个选项的文档。默认情况下，视图只有最小/最大限制，并允许在双指缩放时使用中间缩放级别。

旋转约束吸附到特定角度。它由以下选项决定：enableRotation 和 constrainRotation。默认允许旋转，其值在接近水平方向时吸附到零。

中心约束由 extent 选项决定。默认情况下视图中心不受任何约束。

更改视图状态

需要注意的是，setZoom、setResolution、setCenter 和 setRotation 受上述约束限制。因此，有时可能无法提前知道 View 的结果状态。例如，调用 setResolution(10) 不保证 getResolution() 返回 10。

因此，在视图状态上应用增量时，应使用 adjustCenter、adjustRotation、adjustZoom 和 adjustResolution，而不是相应的 setter。这将让视图进行内部计算。此外，adjust* 方法还接受 anchor 参数，允许指定变换的原点。

与视图交互

视图约束通常只在视图静止时应用，即没有交互或动画正在进行时。因此，如果用户将视图置于与约束状态不等价的状态（例如在吸附角度为0时旋转视图），交互结束时将触发动画使视图恢复到稳定状态；

new View(options)

View.js, line 314
Name Type Description
center Coordinate | undefined

视图的初始中心。如果未设置用户投影，中心的坐标系由 projection 选项指定。如果未设置此项，图层数据源将不会被获取，但可以稍后通过 #setCenter 设置中心。
constrainRotation boolean | number (defaults to true)

旋转约束。false 表示无约束。true 表示无约束，但在接近零时对齐到零。数字将旋转约束为该数量的值。例如，4 将旋转约束为 0、90、180 和 270 度。
enableRotation boolean (defaults to true)

启用旋转。如果为 false，将使用始终将旋转设置为零的旋转约束。如果 enableRotation 为 false，constrainRotation 选项无效。
extent Extent | undefined

约束视图的范围，换句话说，此范围之外的任何内容都无法在地图上可见。
constrainOnlyCenter boolean (defaults to false)

如果为 true，范围约束将仅应用于视图中心，而不是整个范围。
smoothExtentConstraint boolean (defaults to true)

如果为 true，范围约束将平滑应用，即允许视图略微超出给定的 extent。
maxResolution number | undefined

用于确定分辨率约束的最大分辨率。与 minResolution（或 maxZoom）和 zoomFactor 一起使用。如果未指定，将以投影有效范围适合 256x256 像素瓦片的方式计算。如果投影为球面墨卡托（默认），则 maxResolution 默认为 40075016.68557849 / 256 = 156543.03392804097。
minResolution number | undefined

用于确定分辨率约束的最小分辨率。与 maxResolution（或 minZoom）和 zoomFactor 一起使用。如果未指定，将假设 29 个缩放级别（因子为 2）来计算。如果投影为球面墨卡托（默认），则 minResolution 默认为 40075016.68557849 / 256 / Math.pow(2, 28) = 0.0005831682455839253。
maxZoom number (defaults to 28)

用于确定分辨率约束的最大缩放级别。与 minZoom（或 maxResolution）和 zoomFactor 一起使用。注意如果同时提供了 minResolution，则优先使用 minResolution。
minZoom number (defaults to 0)

用于确定分辨率约束的最小缩放级别。与 maxZoom（或 minResolution）和 zoomFactor 一起使用。注意如果同时提供了 maxResolution，则优先使用 maxResolution。
multiWorld boolean (defaults to false)

如果为 false，视图将被约束为只显示一个世界，并且不能平移出边缘。如果为 true，地图在低缩放级别可能显示多个世界。仅在 projection 为全局投影时使用。注意如果同时提供了 extent，则优先使用 extent。
constrainResolution boolean (defaults to false)

如果为 true，视图将始终在交互后动画到最近的缩放级别；false 表示允许中间缩放级别。
smoothResolutionConstraint boolean (defaults to true)

如果为 true，分辨率最小/最大值将平滑应用，即允许视图略微超出给定的分辨率或缩放边界。
showFullExtent boolean (defaults to false)

允许缩小视图以显示完整的配置范围。默认情况下，当视图配置了范围时，用户将无法缩小到视口在任何维度上超出范围。这意味着如果视口比配置范围的长宽比更高或更宽，则完整范围可能不可见。如果 showFullExtent 为 true，用户将能够缩小到视口超出配置范围的高度或宽度，但不能同时超出两者，从而允许显示完整范围。
projection ProjectionLike (defaults to 'EPSG:3857')

投影。默认为球面墨卡托。
resolution number | undefined

视图的初始分辨率。单位为 projection 单位/像素（如米/像素）。设置此值的替代方法是设置 zoom。如果此项和 zoom 都未定义，图层数据源将不会被获取，但可以稍后通过 #setZoom 或 #setResolution 设置。
resolutions Array.<number> | undefined

决定缩放级别的分辨率（如果指定）。数组中的索引对应于缩放级别，因此分辨率值必须按降序排列。它还通过最小值和最大值约束分辨率。如果设置，maxResolution、minResolution、minZoom、maxZoom 和 zoomFactor 选项将被忽略。
rotation number (defaults to 0)

视图的初始旋转角度（弧度，顺时针为正，0 表示北方）。
zoom number | undefined

仅在未定义 resolution 时使用。用于计算视图初始分辨率的缩放级别。
zoomFactor number (defaults to 2)

用于计算相应分辨率的缩放因子。
padding Array.<number> (defaults to [0, 0, 0, 0])

内边距（CSS 像素）。如果地图视口沿边缘部分被其他内容（覆盖物）覆盖，此设置允许将视口中心从该内容偏移。值的顺序为上、右、下、左。
触发事件：

Extends

Observable Properties

Name Type Settable ObjectEvent type Description
center Coordinate | undefined yes change:center

视图的中心。
resolution number | undefined yes change:resolution

视图的分辨率。
rotation number yes change:rotation

视图的旋转角度（弧度）。

Members

padding{Array.<number>} {undefined}

内边距（CSS 像素）。如果地图视口沿边缘部分被其他内容（覆盖物）覆盖，此设置允许将视口中心从该内容偏移。数组中值的顺序为上、右、下、左。默认无内边距，相当于 [0, 0, 0, 0]。

Methods

adjustCenter(deltaCoordinates)

View.js, line 1546

向视图中心添加相对坐标。将应用任何范围约束。

Name Type Description
deltaCoordinates Coordinate

要添加的相对值。

adjustResolution(ratio, anchor)

View.js, line 1573

将视图分辨率乘以比率，可选择使用锚点。任何分辨率约束都将适用。

Name Type Description
ratio number

要应用于视图分辨率的比率。
anchor Coordinate | undefined

变换的原点。

adjustRotation(delta, anchor)

View.js, line 1620

向视图旋转添加一个值，可选择使用锚点。将应用任何旋转约束。

Name Type Description
delta number

要添加到缩放旋转的相对值（弧度）。
anchor Coordinate | undefined

旋转中心。

adjustZoom(delta, anchor)

View.js, line 1609

向视图缩放级别添加一个值，可选择使用锚点。将应用任何分辨率约束。

Name Type Description
delta number

要添加到缩放级别的相对值。
anchor Coordinate | undefined

变换的原点。

animate(var_args)

View.js, line 588

动画化视图。视图的中心、缩放（或分辨率）和旋转可以动画化，以实现视图状态之间的平滑过渡。例如，将视图动画化到新的缩放级别：

view.animate({zoom: view.getZoom() + 1});

默认情况下，动画持续一秒并使用缓入缓出缓动。您可以通过包含 duration（毫秒）和 easing 选项来自定义此行为（参见 ol/easing）。

要串联多个动画，请使用多个动画对象调用该方法。例如，先缩放再平移：

view.animate({zoom: 10}, {center: [0, 0]});

如果您提供函数作为 animate 方法的最后一个参数，它将在动画系列结束时被调用。回调将接收 true（如果动画系列自行完成）或 false（如果被取消）。

动画会被用户交互（例如拖拽地图）或调用 view.setCenter()、view.setResolution() 或 view.setRotation()（或调用这些方法之一的其他方法）取消。

Name Type Description
var_args

动画选项。可以通过传递多个选项对象来串联运行多个动画。要并行运行多个动画，请多次调用该方法。可以提供可选回调作为最后一个参数。回调将接收一个布尔值，指示动画是否未被取消而完成。

Name Type Description
center Coordinate | undefined

动画结束时的视图中心。
zoom number | undefined

动画结束时视图的缩放级别。此选项优先于 resolution。
resolution number | undefined

动画结束时视图的分辨率。如果同时提供了 zoom，此选项将被忽略。
rotation number | undefined

动画结束时视图的旋转。
anchor Coordinate | undefined

旋转或分辨率动画期间保持固定的可选锚点。
duration number (defaults to 1000)

动画的持续时间（毫秒）。
easing function | undefined

动画期间使用的缓动函数（默认为 inAndOut）。该函数将在每一帧被调用，参数为表示动画持续时间比例的数字。函数应返回 0 到 1 之间的数字，表示向目标状态的进度。

beginInteraction()

View.js, line 1836

通知视图交互已开始。视图状态将根据需要解析为稳定状态（取决于其约束）。

calculateExtent(size){Extent}

View.js, line 1000

根据当前视图状态和传入的框尺寸计算范围。

Name Type Description
size Size | undefined

计算范围应适合的框的像素尺寸。默认为视图关联的地图的大小。如果没有地图或多个地图连接到视图，请提供所需的框尺寸（如 map.getSize()）。
返回值：
范围。

cancelAnimations()

View.js, line 728

取消所有正在进行的动画。

centerOn(coordinate, size, position)

View.js, line 1481

以坐标和视图位置为中心。

Name Type Description
coordinate Coordinate

坐标。
size Size

框像素大小。
position Pixel

要居中的视图位置。

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。

endInteraction(duration, resolutionDirection, anchor)

View.js, line 1850

通知视图交互已结束。视图状态将根据需要解析为稳定状态（取决于其约束）。

Name Type Description
duration number | undefined

动画持续时间（毫秒）。
resolutionDirection number | undefined

缩放的方向。
anchor Coordinate | undefined

变换的原点。

fit(geometryOrExtent, options)

View.js, line 1345

根据给定的地图大小和边框适配给定的几何图形或范围。尺寸是要适配范围的框的像素尺寸。在大多数情况下，您将希望使用地图尺寸，即 map.getSize()。会处理地图角度。

Name Type Description
geometryOrExtent SimpleGeometry | Extent

要适配视图的几何图形或范围。
options

选项。

Name Type Description
size Size | undefined

要适配范围的框的像素尺寸。默认为视图关联的地图的大小。如果没有地图或多个地图连接到视图，请提供所需的框尺寸（如 map.getSize()）。
padding Array.<number> (defaults to [0, 0, 0, 0])

视图内要清除的内边距（像素）。数组中的值为上、右、下和左内边距。
nearest boolean (defaults to false)

如果视图的 constrainResolution 选项为 true，获取最近的范围而不是实际适合视图的最近范围。
minResolution number (defaults to 0)

缩放到的最小分辨率。
maxZoom number | undefined

缩放到的最大缩放级别。如果提供了 minResolution，则忽略此属性。
duration number | undefined

动画的持续时间（毫秒）。默认情况下，到目标范围没有动画。
easing function | undefined

动画期间使用的缓动函数（默认为 inAndOut）。该函数将在每一帧被调用，参数为表示动画持续时间比例的数字。函数应返回 0 到 1 之间的数字，表示向目标状态的进度。
callback function | undefined

视图到达最终位置时调用的函数。回调将接收 true（如果动画系列自行完成）或 false（如果被取消）。

get(key){*} inherited

Object.js, line 136

获取一个值。

Name Type Description
key string

键名。
返回值：
值。

getAnimating(){boolean}

View.js, line 711

判断视图是否正在进行动画。

返回值：
The view is being animated.

getCenter(){Coordinate | undefined}

View.js, line 945

获取view center.

返回值：
视图的中心。

getInteracting(){boolean}

View.js, line 720

判断用户是否正在与视图交互，例如平移或缩放。

返回值：
The view is being interacted with.

getKeys(){Array.<string>} inherited

Object.js, line 149

获取对象属性名列表。

返回值：
属性名列表。

getMaxResolution(){number}

View.js, line 1029

获取视图的最大分辨率。

返回值：
The maximum resolution of the view.

getMaxZoom(){number}

View.js, line 1047

获取视图的最大缩放级别。

返回值：
最大缩放级别。

getMinResolution(){number}

View.js, line 1038

获取视图的最小分辨率。

返回值：
The minimum resolution of the view.

getMinZoom(){number}

View.js, line 1067

获取视图的最小缩放级别。

返回值：
最小缩放级别。

getProjection(){Projection}

View.js, line 1096

获取view projection.

返回值：
The projection of the view.

getProperties(){NoInfer.<Properties>} inherited

Object.js, line 158

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

返回值：
对象。

getResolution(){number | undefined}

View.js, line 1106

获取view resolution.

返回值：
视图的分辨率。

getResolutionForExtent(extent, size){number}

View.js, line 1128

获取给定范围（地图单位）和大小（像素）的分辨率。

Name Type Description
extent Extent

范围。
size Size | undefined

框像素大小。
返回值：
The resolution at which the provided extent will render at the given size.

getResolutionForZoom(zoom){number}

View.js, line 1313

获取缩放级别的分辨率。

Name Type Description
zoom number

缩放级别。
返回值：
The view resolution for the provided zoom level.

getResolutions(){Array.<number> | undefined}

View.js, line 1116

获取视图的分辨率列表。返回传递给 View 构造函数的分辨率数组，如果未提供则返回 undefined。

返回值：
The resolutions of the view.

getRevision(){number} inherited

Observable.js, line 79

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

返回值：
版本号。

getRotation(){number}

View.js, line 1178

获取view rotation.

返回值：
视图的旋转角度（弧度）。

getZoom(){number | undefined}

View.js, line 1273

获取当前缩放级别。如果视图不约束分辨率，或正在进行交互或动画，此方法可能返回非整数缩放级别。

返回值：
缩放。

getZoomForResolution(resolution){number | undefined}

View.js, line 1288

获取分辨率对应的缩放级别。

Name Type Description
resolution number

分辨率。
返回值：
The zoom level for the provided resolution.

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

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

set(key, value, silent) inherited

Object.js, line 218

设置一个值。

Name Type Description
key string

键名。
value *

值。
silent boolean | undefined

更新但不触发事件。

setCenter(center)

View.js, line 1650

设置当前视图的中心。将应用任何范围约束。

Name Type Description
center Coordinate | undefined

视图的中心。

setConstrainResolution(enabled)

View.js, line 1087

设置视图是否应允许中间缩放级别。

Name Type Description
enabled boolean

分辨率是否受约束。

setMaxZoom(zoom)

View.js, line 1058

设置视图的新最大缩放级别。

Name Type Description
zoom number

最大缩放级别。

setMinZoom(zoom)

View.js, line 1078

设置视图的新最小缩放级别。

Name Type Description
zoom number

最小缩放级别。

setProperties(values, silent) inherited

Object.js, line 238

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

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

值。
silent boolean | undefined

更新但不触发事件。

setResolution(resolution)

View.js, line 1682

设置此视图的分辨率。将应用任何分辨率约束。

Name Type Description
resolution number | undefined

视图的分辨率。

setRotation(rotation)

View.js, line 1693

设置此视图的旋转。将应用任何旋转约束。

Name Type Description
rotation number

视图的旋转角度（弧度）。

setZoom(zoom)

View.js, line 1703

缩放到特定缩放级别。任何分辨率约束都将适用。

Name Type Description
zoom number

缩放级别。

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

取消设置但不触发事件。