ol
Version:
OpenLayers mapping library
1,453 lines (1,354 loc) • 74.8 kB
JavaScript
/**
* @module ol/View
*/
import BaseObject from './Object.js';
import ViewHint from './ViewHint.js';
import ViewProperty from './ViewProperty.js';
import {linearFindNearest} from './array.js';
import {assert} from './asserts.js';
import {createExtent, none as centerNone} from './centerconstraint.js';
import {
add as addCoordinate,
equals,
equals as coordinatesEqual,
rotate as rotateCoordinate,
} from './coordinate.js';
import {easeOut, inAndOut} from './easing.js';
import {
getCenter,
getForViewAndSize,
getHeight,
getWidth,
isEmpty,
} from './extent.js';
import {VOID} from './functions.js';
import {fromExtent as polygonFromExtent} from './geom/Polygon.js';
import {clamp, modulo} from './math.js';
import {
METERS_PER_UNIT,
createProjection,
disableCoordinateWarning,
fromUserCoordinate,
fromUserExtent,
getUserProjection,
toUserCoordinate,
toUserExtent,
} from './proj.js';
import {
createMinMaxResolution,
createSnapToPower,
createSnapToResolutions,
} from './resolutionconstraint.js';
import {
createSnapToN,
createSnapToZero,
disable,
none as rotationNone,
} from './rotationconstraint.js';
import {DEFAULT_TILE_SIZE} from './tilegrid/common.js';
/**
* An animation configuration
*
* @typedef {Object} Animation
* @property {import("./coordinate.js").Coordinate} [sourceCenter] Source center.
* @property {import("./coordinate.js").Coordinate} [targetCenter] Target center.
* @property {number} [sourceResolution] Source resolution.
* @property {number} [targetResolution] Target resolution.
* @property {number} [sourceRotation] Source rotation.
* @property {number} [targetRotation] Target rotation.
* @property {import("./coordinate.js").Coordinate} [anchor] Anchor.
* @property {number} start Start.
* @property {number} duration Duration.
* @property {boolean} complete Complete.
* @property {function(number):number} easing Easing.
* @property {function(boolean):void} callback Callback.
*/
/**
* @typedef {Object} Constraints
* @property {import("./centerconstraint.js").Type} center Center.
* @property {import("./resolutionconstraint.js").Type} resolution Resolution.
* @property {import("./rotationconstraint.js").Type} rotation Rotation.
*/
/**
* @typedef {Object} FitOptions
* @property {import("./size.js").Size} [size] The size in pixels of the box to
* fit the extent into. Defaults to the size of the map the view is associated with.
* If no map or multiple maps are connected to the view, provide the desired box size
* (e.g. `map.getSize()`).
* @property {!Array<number>} [padding=[0, 0, 0, 0]] Padding (in pixels) to be
* cleared inside the view. Values in the array are top, right, bottom and left
* padding.
* @property {boolean} [nearest=false] If the view `constrainResolution` option is `true`,
* get the nearest extent instead of the closest that actually fits the view.
* @property {number} [minResolution=0] Minimum resolution that we zoom to.
* @property {number} [maxZoom] Maximum zoom level that we zoom to. If
* `minResolution` is given, this property is ignored.
* @property {number} [duration] The duration of the animation in milliseconds.
* By default, there is no animation to the target extent.
* @property {function(number):number} [easing] The easing function used during
* the animation (defaults to {@link module:ol/easing.inAndOut}).
* The function will be called for each frame with a number representing a
* fraction of the animation's duration. The function should return a number
* between 0 and 1 representing the progress toward the destination state.
* @property {function(boolean):void} [callback] Function called when the view is in
* its final position. The callback will be called with `true` if the animation
* series completed on its own or `false` if it was cancelled.
*/
/**
* @typedef {Object} ViewOptions
* @property {import("./coordinate.js").Coordinate} [center] The initial center for
* the view. If a user projection is not set, the coordinate system for the center is
* specified with the `projection` option. Layer sources will not be fetched if this
* is not set, but the center can be set later with {@link #setCenter}.
* @property {boolean|number} [constrainRotation=true] Rotation constraint.
* `false` means no constraint. `true` means no constraint, but snap to zero
* near zero. A number constrains the rotation to that number of values. For
* example, `4` will constrain the rotation to 0, 90, 180, and 270 degrees.
* @property {boolean} [enableRotation=true] Enable rotation.
* If `false`, a rotation constraint that always sets the rotation to zero is
* used. The `constrainRotation` option has no effect if `enableRotation` is
* `false`.
* @property {import("./extent.js").Extent} [extent] The extent that constrains the
* view, in other words, nothing outside of this extent can be visible on the map.
* @property {boolean} [constrainOnlyCenter=false] If true, the extent
* constraint will only apply to the view center and not the whole extent.
* @property {boolean} [smoothExtentConstraint=true] If true, the extent
* constraint will be applied smoothly, i.e. allow the view to go slightly outside
* of the given `extent`.
* @property {number} [maxResolution] The maximum resolution used to determine
* the resolution constraint. It is used together with `minResolution` (or
* `maxZoom`) and `zoomFactor`. If unspecified it is calculated in such a way
* that the projection's validity extent fits in a 256x256 px tile. If the
* projection is Spherical Mercator (the default) then `maxResolution` defaults
* to `40075016.68557849 / 256 = 156543.03392804097`.
* @property {number} [minResolution] The minimum resolution used to determine
* the resolution constraint. It is used together with `maxResolution` (or
* `minZoom`) and `zoomFactor`. If unspecified it is calculated assuming 29
* zoom levels (with a factor of 2). If the projection is Spherical Mercator
* (the default) then `minResolution` defaults to
* `40075016.68557849 / 256 / Math.pow(2, 28) = 0.0005831682455839253`.
* @property {number} [maxZoom=28] The maximum zoom level used to determine the
* resolution constraint. It is used together with `minZoom` (or
* `maxResolution`) and `zoomFactor`. Note that if `minResolution` is also
* provided, it is given precedence over `maxZoom`.
* @property {number} [minZoom=0] The minimum zoom level used to determine the
* resolution constraint. It is used together with `maxZoom` (or
* `minResolution`) and `zoomFactor`. Note that if `maxResolution` is also
* provided, it is given precedence over `minZoom`.
* @property {boolean} [multiWorld=false] If `false` the view is constrained so
* only one world is visible, and you cannot pan off the edge. If `true` the map
* may show multiple worlds at low zoom levels. Only used if the `projection` is
* global. Note that if `extent` is also provided it is given precedence.
* @property {boolean} [constrainResolution=false] If true, the view will always
* animate to the closest zoom level after an interaction; false means
* intermediary zoom levels are allowed.
* @property {boolean} [smoothResolutionConstraint=true] If true, the resolution
* min/max values will be applied smoothly, i. e. allow the view to exceed slightly
* the given resolution or zoom bounds.
* @property {boolean} [showFullExtent=false] Allow the view to be zoomed out to
* show the full configured extent. By default, when a view is configured with an
* extent, users will not be able to zoom out so the viewport exceeds the extent in
* either dimension. This means the full extent may not be visible if the viewport
* is taller or wider than the aspect ratio of the configured extent. If
* showFullExtent is true, the user will be able to zoom out so that the viewport
* exceeds the height or width of the configured extent, but not both, allowing the
* full extent to be shown.
* @property {import("./proj.js").ProjectionLike} [projection='EPSG:3857'] The
* projection. The default is Spherical Mercator.
* @property {number} [resolution] The initial resolution for the view. The
* units are `projection` units per pixel (e.g. meters per pixel). An
* alternative to setting this is to set `zoom`. Layer sources will not be
* fetched if neither this nor `zoom` are defined, but they can be set later
* with {@link #setZoom} or {@link #setResolution}.
* @property {Array<number>} [resolutions] Resolutions that determine the
* zoom levels if specified. The index in the array corresponds to the zoom level,
* therefore the resolution values have to be in descending order. It also constrains
* the resolution by the minimum and maximum value. If set the `maxResolution`,
* `minResolution`, `minZoom`, `maxZoom`, and `zoomFactor` options are ignored.
* @property {number} [rotation=0] The initial rotation for the view in radians
* (positive rotation clockwise, 0 means North).
* @property {number} [zoom] Only used if `resolution` is not defined. Zoom
* level used to calculate the initial resolution for the view.
* @property {number} [zoomFactor=2] The zoom factor used to compute the
* corresponding resolution.
* @property {!Array<number>} [padding=[0, 0, 0, 0]] Padding (in css pixels).
* If the map viewport is partially covered with other content (overlays) along
* its edges, this setting allows to shift the center of the viewport away from
* that content. The order of the values is top, right, bottom, left.
*/
/**
* @typedef {Object} AnimationOptions
* @property {import("./coordinate.js").Coordinate} [center] The center of the view at the end of
* the animation.
* @property {number} [zoom] The zoom level of the view at the end of the
* animation. This takes precedence over `resolution`.
* @property {number} [resolution] The resolution of the view at the end
* of the animation. If `zoom` is also provided, this option will be ignored.
* @property {number} [rotation] The rotation of the view at the end of
* the animation.
* @property {import("./coordinate.js").Coordinate} [anchor] Optional anchor to remain fixed
* during a rotation or resolution animation.
* @property {number} [duration=1000] The duration of the animation in milliseconds.
* @property {function(number):number} [easing] The easing function used
* during the animation (defaults to {@link module:ol/easing.inAndOut}).
* The function will be called for each frame with a number representing a
* fraction of the animation's duration. The function should return a number
* between 0 and 1 representing the progress toward the destination state.
*/
/**
* @typedef {Object} State
* @property {import("./coordinate.js").Coordinate} center Center (in view projection coordinates).
* @property {import("./proj/Projection.js").default} projection Projection.
* @property {number} resolution Resolution.
* @property {import("./coordinate.js").Coordinate} [nextCenter] The next center during an animation series.
* @property {number} [nextResolution] The next resolution during an animation series.
* @property {number} [nextRotation] The next rotation during an animation series.
* @property {number} rotation Rotation.
* @property {number} zoom Zoom.
*/
/**
* Like {@link import("./Map.js").FrameState}, but just `viewState` and `extent`.
* @typedef {Object} ViewStateLayerStateExtent
* @property {State} viewState View state.
* @property {import("./extent.js").Extent} extent Extent (in user projection coordinates).
* @property {Array<import("./layer/Layer.js").State>} [layerStatesArray] Layer states.
*/
/**
* Default min zoom level for the map view.
* @type {number}
*/
const DEFAULT_MIN_ZOOM = 0;
/**
* @typedef {import("./ObjectEventType").Types|'change:center'|'change:resolution'|'change:rotation'} ViewObjectEventTypes
*/
/***
* @template Return
* @typedef {import("./Observable").OnSignature<import("./Observable").EventTypes, import("./events/Event.js").default, Return> &
* import("./Observable").OnSignature<ViewObjectEventTypes, import("./Object").ObjectEvent, Return> &
* import("./Observable").CombinedOnSignature<import("./Observable").EventTypes|ViewObjectEventTypes, Return>} ViewOnSignature
*/
/**
* @classdesc
* A View object represents a simple 2D view of the map.
*
* This is the object to act upon to change the center, resolution,
* and rotation of the map.
*
* A View has a `projection`. The projection determines the
* coordinate system of the center, and its units determine the units of the
* resolution (projection units per pixel). The default projection is
* Web Mercator (EPSG:3857).
*
* ### The view states
*
* A View is determined by three states: `center`, `resolution`,
* and `rotation`. Each state has a corresponding getter and setter, e.g.
* `getCenter` and `setCenter` for the `center` state.
*
* The `zoom` state is actually not saved on the view: all computations
* internally use the `resolution` state. Still, the `setZoom` and `getZoom`
* methods are available, as well as `getResolutionForZoom` and
* `getZoomForResolution` to switch from one system to the other.
*
* ### The constraints
*
* `setCenter`, `setResolution` and `setRotation` can be used to change the
* states of the view, but any constraint defined in the constructor will
* be applied along the way.
*
* A View object can have a *resolution constraint*, a *rotation constraint*
* and a *center constraint*.
*
* The *resolution constraint* typically restricts min/max values and
* snaps to specific resolutions. It is determined by the following
* options: `resolutions`, `maxResolution`, `maxZoom` and `zoomFactor`.
* If `resolutions` is set, the other three options are ignored. See
* documentation for each option for more information. By default, the view
* only has a min/max restriction and allow intermediary zoom levels when
* pinch-zooming for example.
*
* The *rotation constraint* snaps to specific angles. It is determined
* by the following options: `enableRotation` and `constrainRotation`.
* By default rotation is allowed and its value is snapped to zero when approaching the
* horizontal.
*
* The *center constraint* is determined by the `extent` option. By
* default the view center is not constrained at all.
*
* ### Changing the view state
*
* It is important to note that `setZoom`, `setResolution`, `setCenter` and
* `setRotation` are subject to the above mentioned constraints. As such, it
* may sometimes not be possible to know in advance the resulting state of the
* View. For example, calling `setResolution(10)` does not guarantee that
* `getResolution()` will return `10`.
*
* A consequence of this is that, when applying a delta on the view state, one
* should use `adjustCenter`, `adjustRotation`, `adjustZoom` and `adjustResolution`
* rather than the corresponding setters. This will let view do its internal
* computations. Besides, the `adjust*` methods also take an `anchor`
* argument which allows specifying an origin for the transformation.
*
* ### Interacting with the view
*
* View constraints are usually only applied when the view is *at rest*, meaning that
* no interaction or animation is ongoing. As such, if the user puts the view in a
* state that is not equivalent to a constrained one (e.g. rotating the view when
* the snap angle is 0), an animation will be triggered at the interaction end to
* put back the view to a stable state;
*
* @api
* @extends {BaseObject<ViewOptions>}
*/
class View extends BaseObject {
/**
* @param {ViewOptions} [options] View options.
*/
constructor(options) {
super();
/***
* @type {ViewOnSignature<import("./events").EventsKey>}
*/
this.on;
/***
* @type {ViewOnSignature<import("./events").EventsKey>}
*/
this.once;
/***
* @type {ViewOnSignature<void>}
*/
this.un;
options = Object.assign({}, options);
/**
* @private
* @type {Array<number>}
*/
this.hints_ = [0, 0];
/**
* @private
* @type {Array<Array<Animation>>}
*/
this.animations_ = [];
/**
* @private
* @type {number|undefined}
*/
this.updateAnimationKey_;
/**
* @private
* @const
* @type {import("./proj/Projection.js").default}
*/
this.projection_ = createProjection(options.projection, 'EPSG:3857');
/**
* @private
* @type {import("./size.js").Size}
*/
this.viewportSize_ = [100, 100];
/**
* @private
* @type {import("./coordinate.js").Coordinate|undefined}
*/
this.targetCenter_ = null;
/**
* @private
* @type {number|undefined}
*/
this.targetResolution_;
/**
* @private
* @type {number|undefined}
*/
this.targetRotation_;
/**
* @private
* @type {import("./coordinate.js").Coordinate}
*/
this.nextCenter_ = null;
/**
* @private
* @type {number}
*/
this.nextResolution_;
/**
* @private
* @type {number}
*/
this.nextRotation_;
/**
* @private
* @type {import("./coordinate.js").Coordinate|undefined}
*/
this.cancelAnchor_ = undefined;
if (options.projection) {
disableCoordinateWarning();
}
if (options.center) {
options.center = fromUserCoordinate(options.center, this.projection_);
}
if (options.extent) {
options.extent = fromUserExtent(options.extent, this.projection_);
}
this.applyOptions_(options);
}
/**
* Set up the view with the given options.
* @param {ViewOptions} options View options.
*/
applyOptions_(options) {
const properties = Object.assign({}, options);
for (const key in ViewProperty) {
delete properties[key];
}
this.setProperties(properties, true);
const resolutionConstraintInfo = createResolutionConstraint(options);
/**
* @private
* @type {number}
*/
this.maxResolution_ = resolutionConstraintInfo.maxResolution;
/**
* @private
* @type {number}
*/
this.minResolution_ = resolutionConstraintInfo.minResolution;
/**
* @private
* @type {number}
*/
this.zoomFactor_ = resolutionConstraintInfo.zoomFactor;
/**
* @private
* @type {Array<number>|undefined}
*/
this.resolutions_ = options.resolutions;
/**
* @type {Array<number>|undefined}
* @private
*/
this.padding_ = options.padding;
/**
* @private
* @type {number}
*/
this.minZoom_ = resolutionConstraintInfo.minZoom;
const centerConstraint = createCenterConstraint(options);
const resolutionConstraint = resolutionConstraintInfo.constraint;
const rotationConstraint = createRotationConstraint(options);
/**
* @private
* @type {Constraints}
*/
this.constraints_ = {
center: centerConstraint,
resolution: resolutionConstraint,
rotation: rotationConstraint,
};
this.setRotation(options.rotation !== undefined ? options.rotation : 0);
this.setCenterInternal(
options.center !== undefined ? options.center : null,
);
if (options.resolution !== undefined) {
this.setResolution(options.resolution);
} else if (options.zoom !== undefined) {
this.setZoom(options.zoom);
}
}
/**
* Padding (in css pixels).
* If the map viewport is partially covered with other content (overlays) along
* its edges, this setting allows to shift the center of the viewport away from that
* content. The order of the values in the array is top, right, bottom, left.
* The default is no padding, which is equivalent to `[0, 0, 0, 0]`.
* @type {Array<number>|undefined}
* @api
*/
get padding() {
return this.padding_;
}
set padding(padding) {
let oldPadding = this.padding_;
this.padding_ = padding;
const center = this.getCenterInternal();
if (center) {
const newPadding = padding || [0, 0, 0, 0];
oldPadding = oldPadding || [0, 0, 0, 0];
const resolution = this.getResolution();
const offsetX =
(resolution / 2) *
(newPadding[3] - oldPadding[3] + oldPadding[1] - newPadding[1]);
const offsetY =
(resolution / 2) *
(newPadding[0] - oldPadding[0] + oldPadding[2] - newPadding[2]);
this.setCenterInternal([center[0] + offsetX, center[1] - offsetY]);
}
}
/**
* Get an updated version of the view options used to construct the view. The
* current resolution (or zoom), center, and rotation are applied to any stored
* options. The provided options can be used to apply new min/max zoom or
* resolution limits.
* @param {ViewOptions} newOptions New options to be applied.
* @return {ViewOptions} New options updated with the current view state.
*/
getUpdatedOptions_(newOptions) {
const options = this.getProperties();
// preserve resolution (or zoom)
if (options.resolution !== undefined) {
options.resolution = this.getResolution();
} else {
options.zoom = this.getZoom();
}
// preserve center
options.center = this.getCenterInternal();
// preserve rotation
options.rotation = this.getRotation();
return Object.assign({}, options, newOptions);
}
/**
* Animate the view. The view's center, zoom (or resolution), and rotation
* can be animated for smooth transitions between view states. For example,
* to animate the view to a new zoom level:
*
* view.animate({zoom: view.getZoom() + 1});
*
* By default, the animation lasts one second and uses in-and-out easing. You
* can customize this behavior by including `duration` (in milliseconds) and
* `easing` options (see {@link module:ol/easing}).
*
* To chain together multiple animations, call the method with multiple
* animation objects. For example, to first zoom and then pan:
*
* view.animate({zoom: 10}, {center: [0, 0]});
*
* If you provide a function as the last argument to the animate method, it
* will get called at the end of an animation series. The callback will be
* called with `true` if the animation series completed on its own or `false`
* if it was cancelled.
*
* Animations are cancelled by user interactions (e.g. dragging the map) or by
* calling `view.setCenter()`, `view.setResolution()`, or `view.setRotation()`
* (or another method that calls one of these).
*
* @param {...(AnimationOptions|function(boolean): void)} var_args Animation
* options. Multiple animations can be run in series by passing multiple
* options objects. To run multiple animations in parallel, call the method
* multiple times. An optional callback can be provided as a final
* argument. The callback will be called with a boolean indicating whether
* the animation completed without being cancelled.
* @api
*/
animate(var_args) {
if (this.isDef() && !this.getAnimating()) {
this.resolveConstraints(0);
}
const args = new Array(arguments.length);
for (let i = 0; i < args.length; ++i) {
let options = arguments[i];
if (options.center) {
options = Object.assign({}, options);
options.center = fromUserCoordinate(
options.center,
this.getProjection(),
);
}
if (options.anchor) {
options = Object.assign({}, options);
options.anchor = fromUserCoordinate(
options.anchor,
this.getProjection(),
);
}
args[i] = options;
}
this.animateInternal.apply(this, args);
}
/**
* @param {...(AnimationOptions|function(boolean): void)} var_args Animation options.
*/
animateInternal(var_args) {
let animationCount = arguments.length;
let callback;
if (
animationCount > 1 &&
typeof arguments[animationCount - 1] === 'function'
) {
callback = arguments[animationCount - 1];
--animationCount;
}
let i = 0;
for (; i < animationCount && !this.isDef(); ++i) {
// if view properties are not yet set, shortcut to the final state
const state = arguments[i];
if (state.center) {
this.setCenterInternal(state.center);
}
if (state.zoom !== undefined) {
this.setZoom(state.zoom);
} else if (state.resolution) {
this.setResolution(state.resolution);
}
if (state.rotation !== undefined) {
this.setRotation(state.rotation);
}
}
if (i === animationCount) {
if (callback) {
animationCallback(callback, true);
}
return;
}
let start = Date.now();
let center = this.targetCenter_.slice();
let resolution = this.targetResolution_;
let rotation = this.targetRotation_;
const series = [];
for (; i < animationCount; ++i) {
const options = /** @type {AnimationOptions} */ (arguments[i]);
const animation = {
start: start,
complete: false,
anchor: options.anchor,
duration: options.duration !== undefined ? options.duration : 1000,
easing: options.easing || inAndOut,
callback: callback,
};
if (options.center) {
animation.sourceCenter = center;
animation.targetCenter = options.center.slice();
center = animation.targetCenter;
}
if (options.zoom !== undefined) {
animation.sourceResolution = resolution;
animation.targetResolution = this.getResolutionForZoom(options.zoom);
resolution = animation.targetResolution;
} else if (options.resolution) {
animation.sourceResolution = resolution;
animation.targetResolution = options.resolution;
resolution = animation.targetResolution;
}
if (options.rotation !== undefined) {
animation.sourceRotation = rotation;
const delta =
modulo(options.rotation - rotation + Math.PI, 2 * Math.PI) - Math.PI;
animation.targetRotation = rotation + delta;
rotation = animation.targetRotation;
}
// check if animation is a no-op
if (isNoopAnimation(animation)) {
animation.complete = true;
// we still push it onto the series for callback handling
} else {
start += animation.duration;
}
series.push(animation);
}
this.animations_.push(series);
this.setHint(ViewHint.ANIMATING, 1);
this.updateAnimations_();
}
/**
* Determine if the view is being animated.
* @return {boolean} The view is being animated.
* @api
*/
getAnimating() {
return this.hints_[ViewHint.ANIMATING] > 0;
}
/**
* Determine if the user is interacting with the view, such as panning or zooming.
* @return {boolean} The view is being interacted with.
* @api
*/
getInteracting() {
return this.hints_[ViewHint.INTERACTING] > 0;
}
/**
* Cancel any ongoing animations.
* @api
*/
cancelAnimations() {
this.setHint(ViewHint.ANIMATING, -this.hints_[ViewHint.ANIMATING]);
let anchor;
for (let i = 0, ii = this.animations_.length; i < ii; ++i) {
const series = this.animations_[i];
if (series[0].callback) {
animationCallback(series[0].callback, false);
}
if (!anchor) {
for (let j = 0, jj = series.length; j < jj; ++j) {
const animation = series[j];
if (!animation.complete) {
anchor = animation.anchor;
break;
}
}
}
}
this.animations_.length = 0;
this.cancelAnchor_ = anchor;
this.nextCenter_ = null;
this.nextResolution_ = NaN;
this.nextRotation_ = NaN;
}
/**
* Update all animations.
*/
updateAnimations_() {
if (this.updateAnimationKey_ !== undefined) {
cancelAnimationFrame(this.updateAnimationKey_);
this.updateAnimationKey_ = undefined;
}
if (!this.getAnimating()) {
return;
}
const now = Date.now();
let more = false;
for (let i = this.animations_.length - 1; i >= 0; --i) {
const series = this.animations_[i];
let seriesComplete = true;
for (let j = 0, jj = series.length; j < jj; ++j) {
const animation = series[j];
if (animation.complete) {
continue;
}
const elapsed = now - animation.start;
let fraction =
animation.duration > 0 ? elapsed / animation.duration : 1;
if (fraction >= 1) {
animation.complete = true;
fraction = 1;
} else {
seriesComplete = false;
}
const progress = animation.easing(fraction);
if (animation.sourceCenter) {
const x0 = animation.sourceCenter[0];
const y0 = animation.sourceCenter[1];
const x1 = animation.targetCenter[0];
const y1 = animation.targetCenter[1];
this.nextCenter_ = animation.targetCenter;
const x = x0 + progress * (x1 - x0);
const y = y0 + progress * (y1 - y0);
this.targetCenter_ = [x, y];
}
if (animation.sourceResolution && animation.targetResolution) {
const resolution =
progress === 1
? animation.targetResolution
: animation.sourceResolution +
progress *
(animation.targetResolution - animation.sourceResolution);
if (animation.anchor) {
const size = this.getViewportSize_(this.getRotation());
const constrainedResolution = this.constraints_.resolution(
resolution,
0,
size,
true,
);
this.targetCenter_ = this.calculateCenterZoom(
constrainedResolution,
animation.anchor,
);
}
this.nextResolution_ = animation.targetResolution;
this.targetResolution_ = resolution;
this.applyTargetState_(true);
}
if (
animation.sourceRotation !== undefined &&
animation.targetRotation !== undefined
) {
const rotation =
progress === 1
? modulo(animation.targetRotation + Math.PI, 2 * Math.PI) -
Math.PI
: animation.sourceRotation +
progress *
(animation.targetRotation - animation.sourceRotation);
if (animation.anchor) {
const constrainedRotation = this.constraints_.rotation(
rotation,
true,
);
this.targetCenter_ = this.calculateCenterRotate(
constrainedRotation,
animation.anchor,
);
}
this.nextRotation_ = animation.targetRotation;
this.targetRotation_ = rotation;
}
this.applyTargetState_(true);
more = true;
if (!animation.complete) {
break;
}
}
if (seriesComplete) {
this.animations_[i] = null;
this.setHint(ViewHint.ANIMATING, -1);
this.nextCenter_ = null;
this.nextResolution_ = NaN;
this.nextRotation_ = NaN;
const callback = series[0].callback;
if (callback) {
animationCallback(callback, true);
}
}
}
// prune completed series
this.animations_ = this.animations_.filter(Boolean);
if (more && this.updateAnimationKey_ === undefined) {
this.updateAnimationKey_ = requestAnimationFrame(
this.updateAnimations_.bind(this),
);
}
}
/**
* @param {number} rotation Target rotation.
* @param {import("./coordinate.js").Coordinate} anchor Rotation anchor.
* @return {import("./coordinate.js").Coordinate|undefined} Center for rotation and anchor.
*/
calculateCenterRotate(rotation, anchor) {
let center;
const currentCenter = this.getCenterInternal();
if (currentCenter !== undefined) {
center = [currentCenter[0] - anchor[0], currentCenter[1] - anchor[1]];
rotateCoordinate(center, rotation - this.getRotation());
addCoordinate(center, anchor);
}
return center;
}
/**
* @param {number} resolution Target resolution.
* @param {import("./coordinate.js").Coordinate} anchor Zoom anchor.
* @return {import("./coordinate.js").Coordinate|undefined} Center for resolution and anchor.
*/
calculateCenterZoom(resolution, anchor) {
let center;
const currentCenter = this.getCenterInternal();
const currentResolution = this.getResolution();
if (currentCenter !== undefined && currentResolution !== undefined) {
const x =
anchor[0] -
(resolution * (anchor[0] - currentCenter[0])) / currentResolution;
const y =
anchor[1] -
(resolution * (anchor[1] - currentCenter[1])) / currentResolution;
center = [x, y];
}
return center;
}
/**
* Returns the current viewport size.
* @private
* @param {number} [rotation] Take into account the rotation of the viewport when giving the size
* @return {import("./size.js").Size} Viewport size or `[100, 100]` when no viewport is found.
*/
getViewportSize_(rotation) {
const size = this.viewportSize_;
if (rotation) {
const w = size[0];
const h = size[1];
return [
Math.abs(w * Math.cos(rotation)) + Math.abs(h * Math.sin(rotation)),
Math.abs(w * Math.sin(rotation)) + Math.abs(h * Math.cos(rotation)),
];
}
return size;
}
/**
* Stores the viewport size on the view. The viewport size is not read every time from the DOM
* to avoid performance hit and layout reflow.
* This should be done on map size change.
* Note: the constraints are not resolved during an animation to avoid stopping it
* @param {import("./size.js").Size} [size] Viewport size; if undefined, [100, 100] is assumed
*/
setViewportSize(size) {
this.viewportSize_ = Array.isArray(size) ? size.slice() : [100, 100];
if (!this.getAnimating()) {
this.resolveConstraints(0);
}
}
/**
* Get the view center.
* @return {import("./coordinate.js").Coordinate|undefined} The center of the view.
* @observable
* @api
*/
getCenter() {
const center = this.getCenterInternal();
if (!center) {
return center;
}
return toUserCoordinate(center, this.getProjection());
}
/**
* Get the view center without transforming to user projection.
* @return {import("./coordinate.js").Coordinate|undefined} The center of the view.
*/
getCenterInternal() {
return /** @type {import("./coordinate.js").Coordinate|undefined} */ (
this.get(ViewProperty.CENTER)
);
}
/**
* @return {Constraints} Constraints.
*/
getConstraints() {
return this.constraints_;
}
/**
* @return {boolean} Resolution constraint is set
*/
getConstrainResolution() {
return this.get('constrainResolution');
}
/**
* @param {Array<number>} [hints] Destination array.
* @return {Array<number>} Hint.
*/
getHints(hints) {
if (hints !== undefined) {
hints[0] = this.hints_[0];
hints[1] = this.hints_[1];
return hints;
}
return this.hints_.slice();
}
/**
* Calculate the extent for the current view state and the passed box size.
* @param {import("./size.js").Size} [size] The pixel dimensions of the box
* into which the calculated extent should fit. Defaults to the size of the
* map the view is associated with.
* If no map or multiple maps are connected to the view, provide the desired
* box size (e.g. `map.getSize()`).
* @return {import("./extent.js").Extent} Extent.
* @api
*/
calculateExtent(size) {
const extent = this.calculateExtentInternal(size);
return toUserExtent(extent, this.getProjection());
}
/**
* @param {import("./size.js").Size} [size] Box pixel size. If not provided,
* the map's last known viewport size will be used.
* @return {import("./extent.js").Extent} Extent.
*/
calculateExtentInternal(size) {
size = size || this.getViewportSizeMinusPadding_();
const center = /** @type {!import("./coordinate.js").Coordinate} */ (
this.getCenterInternal()
);
assert(center, 'The view center is not defined');
const resolution = /** @type {!number} */ (this.getResolution());
assert(resolution !== undefined, 'The view resolution is not defined');
const rotation = /** @type {!number} */ (this.getRotation());
assert(rotation !== undefined, 'The view rotation is not defined');
return getForViewAndSize(center, resolution, rotation, size);
}
/**
* Get the maximum resolution of the view.
* @return {number} The maximum resolution of the view.
* @api
*/
getMaxResolution() {
return this.maxResolution_;
}
/**
* Get the minimum resolution of the view.
* @return {number} The minimum resolution of the view.
* @api
*/
getMinResolution() {
return this.minResolution_;
}
/**
* Get the maximum zoom level for the view.
* @return {number} The maximum zoom level.
* @api
*/
getMaxZoom() {
return /** @type {number} */ (
this.getZoomForResolution(this.minResolution_)
);
}
/**
* Set a new maximum zoom level for the view.
* @param {number} zoom The maximum zoom level.
* @api
*/
setMaxZoom(zoom) {
this.applyOptions_(this.getUpdatedOptions_({maxZoom: zoom}));
}
/**
* Get the minimum zoom level for the view.
* @return {number} The minimum zoom level.
* @api
*/
getMinZoom() {
return /** @type {number} */ (
this.getZoomForResolution(this.maxResolution_)
);
}
/**
* Set a new minimum zoom level for the view.
* @param {number} zoom The minimum zoom level.
* @api
*/
setMinZoom(zoom) {
this.applyOptions_(this.getUpdatedOptions_({minZoom: zoom}));
}
/**
* Set whether the view should allow intermediary zoom levels.
* @param {boolean} enabled Whether the resolution is constrained.
* @api
*/
setConstrainResolution(enabled) {
this.applyOptions_(this.getUpdatedOptions_({constrainResolution: enabled}));
}
/**
* Get the view projection.
* @return {import("./proj/Projection.js").default} The projection of the view.
* @api
*/
getProjection() {
return this.projection_;
}
/**
* Get the view resolution.
* @return {number|undefined} The resolution of the view.
* @observable
* @api
*/
getResolution() {
return /** @type {number|undefined} */ (this.get(ViewProperty.RESOLUTION));
}
/**
* Get the resolutions for the view. This returns the array of resolutions
* passed to the constructor of the View, or undefined if none were given.
* @return {Array<number>|undefined} The resolutions of the view.
* @api
*/
getResolutions() {
return this.resolutions_;
}
/**
* Get the resolution for a provided extent (in map units) and size (in pixels).
* @param {import("./extent.js").Extent} extent Extent.
* @param {import("./size.js").Size} [size] Box pixel size.
* @return {number} The resolution at which the provided extent will render at
* the given size.
* @api
*/
getResolutionForExtent(extent, size) {
return this.getResolutionForExtentInternal(
fromUserExtent(extent, this.getProjection()),
size,
);
}
/**
* Get the resolution for a provided extent (in map units) and size (in pixels).
* @param {import("./extent.js").Extent} extent Extent.
* @param {import("./size.js").Size} [size] Box pixel size.
* @return {number} The resolution at which the provided extent will render at
* the given size.
*/
getResolutionForExtentInternal(extent, size) {
size = size || this.getViewportSizeMinusPadding_();
const xResolution = getWidth(extent) / size[0];
const yResolution = getHeight(extent) / size[1];
return Math.max(xResolution, yResolution);
}
/**
* Return a function that returns a value between 0 and 1 for a
* resolution. Exponential scaling is assumed.
* @param {number} [power] Power.
* @return {function(number): number} Resolution for value function.
*/
getResolutionForValueFunction(power) {
power = power || 2;
const maxResolution = this.getConstrainedResolution(this.maxResolution_);
const minResolution = this.minResolution_;
const max = Math.log(maxResolution / minResolution) / Math.log(power);
return (
/**
* @param {number} value Value.
* @return {number} Resolution.
*/
function (value) {
const resolution = maxResolution / Math.pow(power, value * max);
return resolution;
}
);
}
/**
* Get the view rotation.
* @return {number} The rotation of the view in radians.
* @observable
* @api
*/
getRotation() {
return /** @type {number} */ (this.get(ViewProperty.ROTATION));
}
/**
* Return a function that returns a resolution for a value between
* 0 and 1. Exponential scaling is assumed.
* @param {number} [power] Power.
* @return {function(number): number} Value for resolution function.
*/
getValueForResolutionFunction(power) {
const logPower = Math.log(power || 2);
const maxResolution = this.getConstrainedResolution(this.maxResolution_);
const minResolution = this.minResolution_;
const max = Math.log(maxResolution / minResolution) / logPower;
return (
/**
* @param {number} resolution Resolution.
* @return {number} Value.
*/
function (resolution) {
const value = Math.log(maxResolution / resolution) / logPower / max;
return value;
}
);
}
/**
* Returns the size of the viewport minus padding.
* @private
* @param {number} [rotation] Take into account the rotation of the viewport when giving the size
* @return {import("./size.js").Size} Viewport size reduced by the padding.
*/
getViewportSizeMinusPadding_(rotation) {
let size = this.getViewportSize_(rotation);
const padding = this.padding_;
if (padding) {
size = [
size[0] - padding[1] - padding[3],
size[1] - padding[0] - padding[2],
];
}
return size;
}
/**
* @return {State} View state.
*/
getState() {
const projection = this.getProjection();
const resolution = this.getResolution();
const rotation = this.getRotation();
let center = /** @type {import("./coordinate.js").Coordinate} */ (
this.getCenterInternal()
);
const padding = this.padding_;
if (padding) {
const reducedSize = this.getViewportSizeMinusPadding_();
center = calculateCenterOn(
center,
this.getViewportSize_(),
[reducedSize[0] / 2 + padding[3], reducedSize[1] / 2 + padding[0]],
resolution,
rotation,
);
}
return {
center: center.slice(0),
projection: projection !== undefined ? projection : null,
resolution: resolution,
nextCenter: this.nextCenter_,
nextResolution: this.nextResolution_,
nextRotation: this.nextRotation_,
rotation: rotation,
zoom: this.getZoom(),
};
}
/**
* @return {ViewStateLayerStateExtent} Like `FrameState`, but just `viewState` and `extent`.
*/
getViewStateAndExtent() {
return {
viewState: this.getState(),
extent: this.calculateExtent(),
};
}
/**
* Get the current zoom level. This method may return non-integer zoom levels
* if the view does not constrain the resolution, or if an interaction or
* animation is underway.
* @return {number|undefined} Zoom.
* @api
*/
getZoom() {
let zoom;
const resolution = this.getResolution();
if (resolution !== undefined) {
zoom = this.getZoomForResolution(resolution);
}
return zoom;
}
/**
* Get the zoom level for a resolution.
* @param {number} resolution The resolution.
* @return {number|undefined} The zoom level for the provided resolution.
* @api
*/
getZoomForResolution(resolution) {
let offset = this.minZoom_ || 0;
let max, zoomFactor;
if (this.resolutions_) {
const nearest = linearFindNearest(this.resolutions_, resolution, 1);
offset = nearest;
max = this.resolutions_[nearest];
if (nearest == this.resolutions_.length - 1) {
zoomFactor = 2;
} else {
zoomFactor = max / this.resolutions_[nearest + 1];
}
} else {
max = this.maxResolution_;
zoomFactor = this.zoomFactor_;
}
return offset + Math.log(max / resolution) / Math.log(zoomFactor);
}
/**
* Get the resolution for a zoom level.
* @param {number} zoom Zoom level.
* @return {number} The view resolution for the provided zoom level.
* @api
*/
getResolutionForZoom(zoom) {
if (this.resolutions_?.length) {
if (this.resolutions_.length === 1) {
return this.resolutions_[0];
}
const baseLevel = clamp(
Math.floor(zoom),
0,
this.resolutions_.length - 2,
);
const zoomFactor =
this.resolutions_[baseLevel] / this.resolutions_[baseLevel + 1];
return (
this.resolutions_[baseLevel] /
Math.pow(zoomFactor, clamp(zoom - baseLevel, 0, 1))
);
}
return (
this.maxResolution_ / Math.pow(this.zoomFactor_, zoom - this.minZoom_)
);
}
/**
* Fit the given geometry or extent based on the given map size and border.
* The size is pixel dimensions of the box to fit the extent into.
* In most cases you will want to use the map size, that is `map.getSize()`.
* Takes care of the map angle.
* @param {import("./geom/SimpleGeometry.js").default|import("./extent.js").Extent} geometryOrExtent The geometry or
* extent to fit the view to.
* @param {FitOptions} [options] Options.
* @api
*/
fit(geometryOrExtent, options) {
/** @type {import("./geom/SimpleGeometry.js").default} */
let geometry;
assert(
Array.isArray(geometryOrExtent) ||
typeof (/** @type {?} */ (geometryOrExtent).getSimplifiedGeometry) ===
'function',
'Invalid extent or geometry provided as `geometry`',
);
if (Array.isArray(geometryOrExtent)) {
assert(
!isEmpty(geometryOrExtent),
'Cannot fit empty extent provided as `geometry`',
);
const extent = fromUserExtent(geometryOrExtent, this.getProjection());
geometry = polygonFromExtent(extent);
} else if (geometryOrExtent.getType() === 'Circle') {
const extent = fromUserExtent(
geometryOrExtent.getExtent(),
this.getProjection(),
);
geometry = polygonFromExtent(extent);
geometry.rotate(this.getRotation(), getCenter(extent));
} else {
const userProjection = getUserProjection();
if (userProjection) {
geometry = /** @type {import("./geom/SimpleGeometry.js").default} */ (
geometryOrExtent
.clone()
.transform(userProjection, this.getProjection())
);
} else {
geometry = geometryOrExtent;
}
}
this.fitInternal(geometry, options);
}
/**
* Calculate rotated extent
* @param {import("./geom/SimpleGeometry.js").default} geometry The geometry.
* @return {import("./extent").Extent} The rotated extent for the geometry.
*/
rotatedExtentForGeometry(geometry) {
const rotation = this.getRotation();
const cosAngle = Math.cos(rotation);
const sinAngle = Math.sin(-rotation);
const coords = geometry.getFlatCoordinates();
const stride = geometry.getStride();
let minRotX = +Infinity;
let minRotY = +Infinity;
let maxRotX = -Infinity;
let maxRotY = -Infinity;
for (let i = 0, ii = coords.length; i < ii; i += stride) {
const rotX = coords[i] * cosAngle - coords[i + 1] * sinAngle;
const rotY = coords[i] * sinAngle + coords[i + 1] * cosAngle;
minRotX = Math.min(minRotX, rotX);
minRotY = Math.min(minRotY, rotY);
maxRotX = Math.max(maxRotX, rotX);
maxRotY = Math.max(maxRotY, rotY);
}
return [minRotX, minRotY, maxRotX, maxRotY];
}
/**
* @param {import("./geom/SimpleGeometry.js").default} geometry The geometry.
* @param {FitOptions} [options] Options.
*/
fitInternal(geometry, options) {
options = options || {};
let size = options.size;
if (!size) {
size = this.getViewportSizeMinusPadding_();
}
const padding =
options.padding !== undefined ? options.padding : [0, 0, 0, 0];
const nearest = options.nearest !== undefined ? options.nearest : false;
let minResolution;
if (options.minResolution !== undefined) {
minResolution = options.minResolution;
} else if (options.maxZoom !== undefined) {
minResolution = this.getResolutionForZoom(options.maxZoom);
} else {
minResolution = 0;
}
const rotatedExtent = this.rotatedExtentForGeometry(geometry);
// calculate resolution
let resolution = this.getResolutionForExtentInternal(rotatedExtent, [
size[0] - padding[1] - padding[3],
size[1] - padding[0] - padding[2],
]);
resolution = isNaN(resolution)
? minResolution
: Math.max(resolution, minResolution);
resolution = this.getConstrainedResolution(resolution, nearest ? 0 : 1);
// calculate center
const rotation = this.getRotation();
const sinAngle = Math.sin(rotation);
const cosAngle = Math.cos(rotation);
const centerRot = getCenter(rotatedExtent);
centerRot[0] += ((padding[1] - padding[3]) / 2) * resolution;
centerRot[1] += ((padding[0] - padding[2]) / 2) * resolution;
const centerX = centerRot[0] * cosAngle - centerRot[1] * sinAngle;
const centerY = centerRot[1] * cosAngle + centerRot[0] * sinAngle;
const center = this.getConstrained