UNPKG

openlayers

Version:

Build tools and sources for developing OpenLayers based mapping applications

1,545 lines (1,343 loc) 45.5 kB
// FIXME recheck layer/map projection compatibility when projection changes // FIXME layer renderers should skip when they can't reproject // FIXME add tilt and height? goog.provide('ol.Map'); goog.require('ol'); goog.require('ol.Collection'); goog.require('ol.MapBrowserEvent'); goog.require('ol.MapBrowserEventHandler'); goog.require('ol.MapEvent'); goog.require('ol.Object'); goog.require('ol.TileQueue'); goog.require('ol.View'); goog.require('ol.asserts'); goog.require('ol.control'); goog.require('ol.dom'); goog.require('ol.events'); goog.require('ol.events.Event'); goog.require('ol.events.EventType'); goog.require('ol.extent'); goog.require('ol.functions'); goog.require('ol.has'); goog.require('ol.interaction'); goog.require('ol.layer.Group'); goog.require('ol.obj'); goog.require('ol.proj.common'); goog.require('ol.renderer.Type'); goog.require('ol.renderer.Map'); goog.require('ol.renderer.canvas.Map'); goog.require('ol.renderer.webgl.Map'); goog.require('ol.size'); goog.require('ol.structs.PriorityQueue'); goog.require('ol.transform'); /** * @const * @type {string} */ ol.OL3_URL = 'https://openlayers.org/'; /** * @const * @type {string} */ ol.OL3_LOGO_URL = 'data:image/png;base64,' + 'iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAA3NCSVQICAjb4U/gAAAACXBI' + 'WXMAAAHGAAABxgEXwfpGAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAA' + 'AhNQTFRF////AP//AICAgP//AFVVQECA////K1VVSbbbYL/fJ05idsTYJFtbbcjbJllmZszW' + 'WMTOIFhoHlNiZszTa9DdUcHNHlNlV8XRIVdiasrUHlZjIVZjaMnVH1RlIFRkH1RkH1ZlasvY' + 'asvXVsPQH1VkacnVa8vWIVZjIFRjVMPQa8rXIVVkXsXRsNveIFVkIFZlIVVj3eDeh6GmbMvX' + 'H1ZkIFRka8rWbMvXIFVkIFVjIFVkbMvWH1VjbMvWIFVlbcvWIFVla8vVIFVkbMvWbMvVH1Vk' + 'bMvWIFVlbcvWIFVkbcvVbMvWjNPbIFVkU8LPwMzNIFVkbczWIFVkbsvWbMvXIFVkRnB8bcvW' + '2+TkW8XRIFVkIlZlJVloJlpoKlxrLl9tMmJwOWd0Omh1RXF8TneCT3iDUHiDU8LPVMLPVcLP' + 'VcPQVsPPVsPQV8PQWMTQWsTQW8TQXMXSXsXRX4SNX8bSYMfTYcfTYsfTY8jUZcfSZsnUaIqT' + 'acrVasrVa8jTa8rWbI2VbMvWbcvWdJObdcvUdszUd8vVeJaee87Yfc3WgJyjhqGnitDYjaar' + 'ldPZnrK2oNbborW5o9bbo9fbpLa6q9ndrL3ArtndscDDutzfu8fJwN7gwt7gxc/QyuHhy+Hi' + 'zeHi0NfX0+Pj19zb1+Tj2uXk29/e3uLg3+Lh3+bl4uXj4ufl4+fl5Ofl5ufl5ujm5+jmySDn' + 'BAAAAFp0Uk5TAAECAgMEBAYHCA0NDg4UGRogIiMmKSssLzU7PkJJT1JTVFliY2hrdHZ3foSF' + 'hYeJjY2QkpugqbG1tre5w8zQ09XY3uXn6+zx8vT09vf4+Pj5+fr6/P39/f3+gz7SsAAAAVVJ' + 'REFUOMtjYKA7EBDnwCPLrObS1BRiLoJLnte6CQy8FLHLCzs2QUG4FjZ5GbcmBDDjxJBXDWxC' + 'Brb8aM4zbkIDzpLYnAcE9VXlJSWlZRU13koIeW57mGx5XjoMZEUqwxWYQaQbSzLSkYGfKFSe' + '0QMsX5WbjgY0YS4MBplemI4BdGBW+DQ11eZiymfqQuXZIjqwyadPNoSZ4L+0FVM6e+oGI6g8' + 'a9iKNT3o8kVzNkzRg5lgl7p4wyRUL9Yt2jAxVh6mQCogae6GmflI8p0r13VFWTHBQ0rWPW7a' + 'hgWVcPm+9cuLoyy4kCJDzCm6d8PSFoh0zvQNC5OjDJhQopPPJqph1doJBUD5tnkbZiUEqaCn' + 'B3bTqLTFG1bPn71kw4b+GFdpLElKIzRxxgYgWNYc5SCENVHKeUaltHdXx0dZ8uBI1hJ2UUDg' + 'q82CM2MwKeibqAvSO7MCABq0wXEPiqWEAAAAAElFTkSuQmCC'; /** * @type {Array.<ol.renderer.Type>} * @const */ ol.DEFAULT_RENDERER_TYPES = [ ol.renderer.Type.CANVAS, ol.renderer.Type.WEBGL ]; /** * @classdesc * The map is the core component of OpenLayers. For a map to render, a view, * one or more layers, and a target container are needed: * * var map = new ol.Map({ * view: new ol.View({ * center: [0, 0], * zoom: 1 * }), * layers: [ * new ol.layer.Tile({ * source: new ol.source.OSM() * }) * ], * target: 'map' * }); * * The above snippet creates a map using a {@link ol.layer.Tile} to display * {@link ol.source.OSM} OSM data and render it to a DOM element with the * id `map`. * * The constructor places a viewport container (with CSS class name * `ol-viewport`) in the target element (see `getViewport()`), and then two * further elements within the viewport: one with CSS class name * `ol-overlaycontainer-stopevent` for controls and some overlays, and one with * CSS class name `ol-overlaycontainer` for other overlays (see the `stopEvent` * option of {@link ol.Overlay} for the difference). The map itself is placed in * a further element within the viewport. * * Layers are stored as a `ol.Collection` in layerGroups. A top-level group is * provided by the library. This is what is accessed by `getLayerGroup` and * `setLayerGroup`. Layers entered in the options are added to this group, and * `addLayer` and `removeLayer` change the layer collection in the group. * `getLayers` is a convenience function for `getLayerGroup().getLayers()`. * Note that `ol.layer.Group` is a subclass of `ol.layer.Base`, so layers * entered in the options or added with `addLayer` can be groups, which can * contain further groups, and so on. * * @constructor * @extends {ol.Object} * @param {olx.MapOptions} options Map options. * @fires ol.MapBrowserEvent * @fires ol.MapEvent * @fires ol.render.Event#postcompose * @fires ol.render.Event#precompose * @api stable */ ol.Map = function(options) { ol.Object.call(this); var optionsInternal = ol.Map.createOptionsInternal(options); /** * @type {boolean} * @private */ this.loadTilesWhileAnimating_ = options.loadTilesWhileAnimating !== undefined ? options.loadTilesWhileAnimating : false; /** * @type {boolean} * @private */ this.loadTilesWhileInteracting_ = options.loadTilesWhileInteracting !== undefined ? options.loadTilesWhileInteracting : false; /** * @private * @type {number} */ this.pixelRatio_ = options.pixelRatio !== undefined ? options.pixelRatio : ol.has.DEVICE_PIXEL_RATIO; /** * @private * @type {Object.<string, string>} */ this.logos_ = optionsInternal.logos; /** * @private * @type {number|undefined} */ this.animationDelayKey_; /** * @private */ this.animationDelay_ = function() { this.animationDelayKey_ = undefined; this.renderFrame_.call(this, Date.now()); }.bind(this); /** * @private * @type {ol.Transform} */ this.coordinateToPixelTransform_ = ol.transform.create(); /** * @private * @type {ol.Transform} */ this.pixelToCoordinateTransform_ = ol.transform.create(); /** * @private * @type {number} */ this.frameIndex_ = 0; /** * @private * @type {?olx.FrameState} */ this.frameState_ = null; /** * The extent at the previous 'moveend' event. * @private * @type {ol.Extent} */ this.previousExtent_ = ol.extent.createEmpty(); /** * @private * @type {?ol.EventsKey} */ this.viewPropertyListenerKey_ = null; /** * @private * @type {?ol.EventsKey} */ this.viewChangeListenerKey_ = null; /** * @private * @type {Array.<ol.EventsKey>} */ this.layerGroupPropertyListenerKeys_ = null; /** * @private * @type {Element} */ this.viewport_ = document.createElement('DIV'); this.viewport_.className = 'ol-viewport' + (ol.has.TOUCH ? ' ol-touch' : ''); this.viewport_.style.position = 'relative'; this.viewport_.style.overflow = 'hidden'; this.viewport_.style.width = '100%'; this.viewport_.style.height = '100%'; // prevent page zoom on IE >= 10 browsers this.viewport_.style.msTouchAction = 'none'; this.viewport_.style.touchAction = 'none'; /** * @private * @type {!Element} */ this.overlayContainer_ = document.createElement('DIV'); this.overlayContainer_.className = 'ol-overlaycontainer'; this.viewport_.appendChild(this.overlayContainer_); /** * @private * @type {!Element} */ this.overlayContainerStopEvent_ = document.createElement('DIV'); this.overlayContainerStopEvent_.className = 'ol-overlaycontainer-stopevent'; var overlayEvents = [ ol.events.EventType.CLICK, ol.events.EventType.DBLCLICK, ol.events.EventType.MOUSEDOWN, ol.events.EventType.TOUCHSTART, ol.events.EventType.MSPOINTERDOWN, ol.MapBrowserEvent.EventType.POINTERDOWN, ol.events.EventType.MOUSEWHEEL, ol.events.EventType.WHEEL ]; for (var i = 0, ii = overlayEvents.length; i < ii; ++i) { ol.events.listen(this.overlayContainerStopEvent_, overlayEvents[i], ol.events.Event.stopPropagation); } this.viewport_.appendChild(this.overlayContainerStopEvent_); /** * @private * @type {ol.MapBrowserEventHandler} */ this.mapBrowserEventHandler_ = new ol.MapBrowserEventHandler(this); for (var key in ol.MapBrowserEvent.EventType) { ol.events.listen(this.mapBrowserEventHandler_, ol.MapBrowserEvent.EventType[key], this.handleMapBrowserEvent, this); } /** * @private * @type {Element|Document} */ this.keyboardEventTarget_ = optionsInternal.keyboardEventTarget; /** * @private * @type {Array.<ol.EventsKey>} */ this.keyHandlerKeys_ = null; ol.events.listen(this.viewport_, ol.events.EventType.WHEEL, this.handleBrowserEvent, this); ol.events.listen(this.viewport_, ol.events.EventType.MOUSEWHEEL, this.handleBrowserEvent, this); /** * @type {ol.Collection.<ol.control.Control>} * @private */ this.controls_ = optionsInternal.controls; /** * @type {ol.Collection.<ol.interaction.Interaction>} * @private */ this.interactions_ = optionsInternal.interactions; /** * @type {ol.Collection.<ol.Overlay>} * @private */ this.overlays_ = optionsInternal.overlays; /** * A lookup of overlays by id. * @private * @type {Object.<string, ol.Overlay>} */ this.overlayIdIndex_ = {}; /** * @type {ol.renderer.Map} * @private */ this.renderer_ = new optionsInternal.rendererConstructor(this.viewport_, this); /** * @type {function(Event)|undefined} * @private */ this.handleResize_; /** * @private * @type {ol.Coordinate} */ this.focus_ = null; /** * @private * @type {Array.<ol.PreRenderFunction>} */ this.preRenderFunctions_ = []; /** * @private * @type {Array.<ol.PostRenderFunction>} */ this.postRenderFunctions_ = []; /** * @private * @type {ol.TileQueue} */ this.tileQueue_ = new ol.TileQueue( this.getTilePriority.bind(this), this.handleTileChange_.bind(this)); /** * Uids of features to skip at rendering time. * @type {Object.<string, boolean>} * @private */ this.skippedFeatureUids_ = {}; ol.events.listen( this, ol.Object.getChangeEventType(ol.Map.Property.LAYERGROUP), this.handleLayerGroupChanged_, this); ol.events.listen(this, ol.Object.getChangeEventType(ol.Map.Property.VIEW), this.handleViewChanged_, this); ol.events.listen(this, ol.Object.getChangeEventType(ol.Map.Property.SIZE), this.handleSizeChanged_, this); ol.events.listen(this, ol.Object.getChangeEventType(ol.Map.Property.TARGET), this.handleTargetChanged_, this); // setProperties will trigger the rendering of the map if the map // is "defined" already. this.setProperties(optionsInternal.values); this.controls_.forEach( /** * @param {ol.control.Control} control Control. * @this {ol.Map} */ function(control) { control.setMap(this); }, this); ol.events.listen(this.controls_, ol.Collection.EventType.ADD, /** * @param {ol.Collection.Event} event Collection event. */ function(event) { event.element.setMap(this); }, this); ol.events.listen(this.controls_, ol.Collection.EventType.REMOVE, /** * @param {ol.Collection.Event} event Collection event. */ function(event) { event.element.setMap(null); }, this); this.interactions_.forEach( /** * @param {ol.interaction.Interaction} interaction Interaction. * @this {ol.Map} */ function(interaction) { interaction.setMap(this); }, this); ol.events.listen(this.interactions_, ol.Collection.EventType.ADD, /** * @param {ol.Collection.Event} event Collection event. */ function(event) { event.element.setMap(this); }, this); ol.events.listen(this.interactions_, ol.Collection.EventType.REMOVE, /** * @param {ol.Collection.Event} event Collection event. */ function(event) { event.element.setMap(null); }, this); this.overlays_.forEach(this.addOverlayInternal_, this); ol.events.listen(this.overlays_, ol.Collection.EventType.ADD, /** * @param {ol.Collection.Event} event Collection event. */ function(event) { this.addOverlayInternal_(/** @type {ol.Overlay} */ (event.element)); }, this); ol.events.listen(this.overlays_, ol.Collection.EventType.REMOVE, /** * @param {ol.Collection.Event} event Collection event. */ function(event) { var overlay = /** @type {ol.Overlay} */ (event.element); var id = overlay.getId(); if (id !== undefined) { delete this.overlayIdIndex_[id.toString()]; } event.element.setMap(null); }, this); }; ol.inherits(ol.Map, ol.Object); /** * Add the given control to the map. * @param {ol.control.Control} control Control. * @api stable */ ol.Map.prototype.addControl = function(control) { this.getControls().push(control); }; /** * Add the given interaction to the map. * @param {ol.interaction.Interaction} interaction Interaction to add. * @api stable */ ol.Map.prototype.addInteraction = function(interaction) { this.getInteractions().push(interaction); }; /** * Adds the given layer to the top of this map. If you want to add a layer * elsewhere in the stack, use `getLayers()` and the methods available on * {@link ol.Collection}. * @param {ol.layer.Base} layer Layer. * @api stable */ ol.Map.prototype.addLayer = function(layer) { var layers = this.getLayerGroup().getLayers(); layers.push(layer); }; /** * Add the given overlay to the map. * @param {ol.Overlay} overlay Overlay. * @api stable */ ol.Map.prototype.addOverlay = function(overlay) { this.getOverlays().push(overlay); }; /** * This deals with map's overlay collection changes. * @param {ol.Overlay} overlay Overlay. * @private */ ol.Map.prototype.addOverlayInternal_ = function(overlay) { var id = overlay.getId(); if (id !== undefined) { this.overlayIdIndex_[id.toString()] = overlay; } overlay.setMap(this); }; /** * Deprecated (use {@link ol.View#animate} instead). * Add functions to be called before rendering. This can be used for attaching * animations before updating the map's view. The {@link ol.animation} * namespace provides several static methods for creating prerender functions. * @param {...ol.PreRenderFunction} var_args Any number of pre-render functions. * @api */ ol.Map.prototype.beforeRender = function(var_args) { ol.DEBUG && console.warn('map.beforeRender() is deprecated. Use view.animate() instead.'); this.render(); Array.prototype.push.apply(this.preRenderFunctions_, arguments); }; /** * * @inheritDoc */ ol.Map.prototype.disposeInternal = function() { this.mapBrowserEventHandler_.dispose(); this.renderer_.dispose(); ol.events.unlisten(this.viewport_, ol.events.EventType.WHEEL, this.handleBrowserEvent, this); ol.events.unlisten(this.viewport_, ol.events.EventType.MOUSEWHEEL, this.handleBrowserEvent, this); if (this.handleResize_ !== undefined) { window.removeEventListener(ol.events.EventType.RESIZE, this.handleResize_, false); this.handleResize_ = undefined; } if (this.animationDelayKey_) { cancelAnimationFrame(this.animationDelayKey_); this.animationDelayKey_ = undefined; } this.setTarget(null); ol.Object.prototype.disposeInternal.call(this); }; /** * Detect features that intersect a pixel on the viewport, and execute a * callback with each intersecting feature. Layers included in the detection can * be configured through `opt_layerFilter`. * @param {ol.Pixel} pixel Pixel. * @param {function(this: S, (ol.Feature|ol.render.Feature), * ol.layer.Layer): T} callback Feature callback. The callback will be * called with two arguments. The first argument is one * {@link ol.Feature feature} or * {@link ol.render.Feature render feature} at the pixel, the second is * the {@link ol.layer.Layer layer} of the feature and will be null for * unmanaged layers. To stop detection, callback functions can return a * truthy value. * @param {olx.AtPixelOptions=} opt_options Optional options. * @return {T|undefined} Callback result, i.e. the return value of last * callback execution, or the first truthy callback return value. * @template S,T * @api stable */ ol.Map.prototype.forEachFeatureAtPixel = function(pixel, callback, opt_options) { if (!this.frameState_) { return; } var coordinate = this.getCoordinateFromPixel(pixel); opt_options = opt_options !== undefined ? opt_options : {}; var hitTolerance = opt_options.hitTolerance !== undefined ? opt_options.hitTolerance * this.frameState_.pixelRatio : 0; var layerFilter = opt_options.layerFilter !== undefined ? opt_options.layerFilter : ol.functions.TRUE; return this.renderer_.forEachFeatureAtCoordinate( coordinate, this.frameState_, hitTolerance, callback, null, layerFilter, null); }; /** * Detect layers that have a color value at a pixel on the viewport, and * execute a callback with each matching layer. Layers included in the * detection can be configured through `opt_layerFilter`. * @param {ol.Pixel} pixel Pixel. * @param {function(this: S, ol.layer.Layer, (Uint8ClampedArray|Uint8Array)): T} callback * Layer callback. This callback will recieve two arguments: first is the * {@link ol.layer.Layer layer}, second argument is an array representing * [R, G, B, A] pixel values (0 - 255) and will be `null` for layer types * that do not currently support this argument. To stop detection, callback * functions can return a truthy value. * @param {S=} opt_this Value to use as `this` when executing `callback`. * @param {(function(this: U, ol.layer.Layer): boolean)=} opt_layerFilter Layer * filter function. The filter function will receive one argument, the * {@link ol.layer.Layer layer-candidate} and it should return a boolean * value. Only layers which are visible and for which this function returns * `true` will be tested for features. By default, all visible layers will * be tested. * @param {U=} opt_this2 Value to use as `this` when executing `layerFilter`. * @return {T|undefined} Callback result, i.e. the return value of last * callback execution, or the first truthy callback return value. * @template S,T,U * @api stable */ ol.Map.prototype.forEachLayerAtPixel = function(pixel, callback, opt_this, opt_layerFilter, opt_this2) { if (!this.frameState_) { return; } var thisArg = opt_this !== undefined ? opt_this : null; var layerFilter = opt_layerFilter !== undefined ? opt_layerFilter : ol.functions.TRUE; var thisArg2 = opt_this2 !== undefined ? opt_this2 : null; return this.renderer_.forEachLayerAtPixel( pixel, this.frameState_, callback, thisArg, layerFilter, thisArg2); }; /** * Detect if features intersect a pixel on the viewport. Layers included in the * detection can be configured through `opt_layerFilter`. * @param {ol.Pixel} pixel Pixel. * @param {olx.AtPixelOptions=} opt_options Optional options. * @return {boolean} Is there a feature at the given pixel? * @template U * @api */ ol.Map.prototype.hasFeatureAtPixel = function(pixel, opt_options) { if (!this.frameState_) { return false; } var coordinate = this.getCoordinateFromPixel(pixel); opt_options = opt_options !== undefined ? opt_options : {}; var layerFilter = opt_options.layerFilter !== undefined ? opt_options.layerFilter : ol.functions.TRUE; var hitTolerance = opt_options.hitTolerance !== undefined ? opt_options.hitTolerance * this.frameState_.pixelRatio : 0; return this.renderer_.hasFeatureAtCoordinate( coordinate, this.frameState_, hitTolerance, layerFilter, null); }; /** * Returns the coordinate in view projection for a browser event. * @param {Event} event Event. * @return {ol.Coordinate} Coordinate. * @api stable */ ol.Map.prototype.getEventCoordinate = function(event) { return this.getCoordinateFromPixel(this.getEventPixel(event)); }; /** * Returns the map pixel position for a browser event relative to the viewport. * @param {Event} event Event. * @return {ol.Pixel} Pixel. * @api stable */ ol.Map.prototype.getEventPixel = function(event) { var viewportPosition = this.viewport_.getBoundingClientRect(); var eventPosition = event.changedTouches ? event.changedTouches[0] : event; return [ eventPosition.clientX - viewportPosition.left, eventPosition.clientY - viewportPosition.top ]; }; /** * Get the target in which this map is rendered. * Note that this returns what is entered as an option or in setTarget: * if that was an element, it returns an element; if a string, it returns that. * @return {Element|string|undefined} The Element or id of the Element that the * map is rendered in. * @observable * @api stable */ ol.Map.prototype.getTarget = function() { return /** @type {Element|string|undefined} */ ( this.get(ol.Map.Property.TARGET)); }; /** * Get the DOM element into which this map is rendered. In contrast to * `getTarget` this method always return an `Element`, or `null` if the * map has no target. * @return {Element} The element that the map is rendered in. * @api */ ol.Map.prototype.getTargetElement = function() { var target = this.getTarget(); if (target !== undefined) { return typeof target === 'string' ? document.getElementById(target) : target; } else { return null; } }; /** * Get the coordinate for a given pixel. This returns a coordinate in the * map view projection. * @param {ol.Pixel} pixel Pixel position in the map viewport. * @return {ol.Coordinate} The coordinate for the pixel position. * @api stable */ ol.Map.prototype.getCoordinateFromPixel = function(pixel) { var frameState = this.frameState_; if (!frameState) { return null; } else { return ol.transform.apply(frameState.pixelToCoordinateTransform, pixel.slice()); } }; /** * Get the map controls. Modifying this collection changes the controls * associated with the map. * @return {ol.Collection.<ol.control.Control>} Controls. * @api stable */ ol.Map.prototype.getControls = function() { return this.controls_; }; /** * Get the map overlays. Modifying this collection changes the overlays * associated with the map. * @return {ol.Collection.<ol.Overlay>} Overlays. * @api stable */ ol.Map.prototype.getOverlays = function() { return this.overlays_; }; /** * Get an overlay by its identifier (the value returned by overlay.getId()). * Note that the index treats string and numeric identifiers as the same. So * `map.getOverlayById(2)` will return an overlay with id `'2'` or `2`. * @param {string|number} id Overlay identifier. * @return {ol.Overlay} Overlay. * @api */ ol.Map.prototype.getOverlayById = function(id) { var overlay = this.overlayIdIndex_[id.toString()]; return overlay !== undefined ? overlay : null; }; /** * Get the map interactions. Modifying this collection changes the interactions * associated with the map. * * Interactions are used for e.g. pan, zoom and rotate. * @return {ol.Collection.<ol.interaction.Interaction>} Interactions. * @api stable */ ol.Map.prototype.getInteractions = function() { return this.interactions_; }; /** * Get the layergroup associated with this map. * @return {ol.layer.Group} A layer group containing the layers in this map. * @observable * @api stable */ ol.Map.prototype.getLayerGroup = function() { return /** @type {ol.layer.Group} */ (this.get(ol.Map.Property.LAYERGROUP)); }; /** * Get the collection of layers associated with this map. * @return {!ol.Collection.<ol.layer.Base>} Layers. * @api stable */ ol.Map.prototype.getLayers = function() { var layers = this.getLayerGroup().getLayers(); return layers; }; /** * Get the pixel for a coordinate. This takes a coordinate in the map view * projection and returns the corresponding pixel. * @param {ol.Coordinate} coordinate A map coordinate. * @return {ol.Pixel} A pixel position in the map viewport. * @api stable */ ol.Map.prototype.getPixelFromCoordinate = function(coordinate) { var frameState = this.frameState_; if (!frameState) { return null; } else { return ol.transform.apply(frameState.coordinateToPixelTransform, coordinate.slice(0, 2)); } }; /** * Get the map renderer. * @return {ol.renderer.Map} Renderer */ ol.Map.prototype.getRenderer = function() { return this.renderer_; }; /** * Get the size of this map. * @return {ol.Size|undefined} The size in pixels of the map in the DOM. * @observable * @api stable */ ol.Map.prototype.getSize = function() { return /** @type {ol.Size|undefined} */ (this.get(ol.Map.Property.SIZE)); }; /** * Get the view associated with this map. A view manages properties such as * center and resolution. * @return {ol.View} The view that controls this map. * @observable * @api stable */ ol.Map.prototype.getView = function() { return /** @type {ol.View} */ (this.get(ol.Map.Property.VIEW)); }; /** * Get the element that serves as the map viewport. * @return {Element} Viewport. * @api stable */ ol.Map.prototype.getViewport = function() { return this.viewport_; }; /** * Get the element that serves as the container for overlays. Elements added to * this container will let mousedown and touchstart events through to the map, * so clicks and gestures on an overlay will trigger {@link ol.MapBrowserEvent} * events. * @return {!Element} The map's overlay container. */ ol.Map.prototype.getOverlayContainer = function() { return this.overlayContainer_; }; /** * Get the element that serves as a container for overlays that don't allow * event propagation. Elements added to this container won't let mousedown and * touchstart events through to the map, so clicks and gestures on an overlay * don't trigger any {@link ol.MapBrowserEvent}. * @return {!Element} The map's overlay container that stops events. */ ol.Map.prototype.getOverlayContainerStopEvent = function() { return this.overlayContainerStopEvent_; }; /** * @param {ol.Tile} tile Tile. * @param {string} tileSourceKey Tile source key. * @param {ol.Coordinate} tileCenter Tile center. * @param {number} tileResolution Tile resolution. * @return {number} Tile priority. */ ol.Map.prototype.getTilePriority = function(tile, tileSourceKey, tileCenter, tileResolution) { // Filter out tiles at higher zoom levels than the current zoom level, or that // are outside the visible extent. var frameState = this.frameState_; if (!frameState || !(tileSourceKey in frameState.wantedTiles)) { return ol.structs.PriorityQueue.DROP; } if (!frameState.wantedTiles[tileSourceKey][tile.getKey()]) { return ol.structs.PriorityQueue.DROP; } // Prioritize the highest zoom level tiles closest to the focus. // Tiles at higher zoom levels are prioritized using Math.log(tileResolution). // Within a zoom level, tiles are prioritized by the distance in pixels // between the center of the tile and the focus. The factor of 65536 means // that the prioritization should behave as desired for tiles up to // 65536 * Math.log(2) = 45426 pixels from the focus. var deltaX = tileCenter[0] - frameState.focus[0]; var deltaY = tileCenter[1] - frameState.focus[1]; return 65536 * Math.log(tileResolution) + Math.sqrt(deltaX * deltaX + deltaY * deltaY) / tileResolution; }; /** * @param {Event} browserEvent Browser event. * @param {string=} opt_type Type. */ ol.Map.prototype.handleBrowserEvent = function(browserEvent, opt_type) { var type = opt_type || browserEvent.type; var mapBrowserEvent = new ol.MapBrowserEvent(type, this, browserEvent); this.handleMapBrowserEvent(mapBrowserEvent); }; /** * @param {ol.MapBrowserEvent} mapBrowserEvent The event to handle. */ ol.Map.prototype.handleMapBrowserEvent = function(mapBrowserEvent) { if (!this.frameState_) { // With no view defined, we cannot translate pixels into geographical // coordinates so interactions cannot be used. return; } this.focus_ = mapBrowserEvent.coordinate; mapBrowserEvent.frameState = this.frameState_; var interactionsArray = this.getInteractions().getArray(); var i; if (this.dispatchEvent(mapBrowserEvent) !== false) { for (i = interactionsArray.length - 1; i >= 0; i--) { var interaction = interactionsArray[i]; if (!interaction.getActive()) { continue; } var cont = interaction.handleEvent(mapBrowserEvent); if (!cont) { break; } } } }; /** * @protected */ ol.Map.prototype.handlePostRender = function() { var frameState = this.frameState_; // Manage the tile queue // Image loads are expensive and a limited resource, so try to use them // efficiently: // * When the view is static we allow a large number of parallel tile loads // to complete the frame as quickly as possible. // * When animating or interacting, image loads can cause janks, so we reduce // the maximum number of loads per frame and limit the number of parallel // tile loads to remain reactive to view changes and to reduce the chance of // loading tiles that will quickly disappear from view. var tileQueue = this.tileQueue_; if (!tileQueue.isEmpty()) { var maxTotalLoading = 16; var maxNewLoads = maxTotalLoading; if (frameState) { var hints = frameState.viewHints; if (hints[ol.View.Hint.ANIMATING]) { maxTotalLoading = this.loadTilesWhileAnimating_ ? 8 : 0; maxNewLoads = 2; } if (hints[ol.View.Hint.INTERACTING]) { maxTotalLoading = this.loadTilesWhileInteracting_ ? 8 : 0; maxNewLoads = 2; } } if (tileQueue.getTilesLoading() < maxTotalLoading) { tileQueue.reprioritize(); // FIXME only call if view has changed tileQueue.loadMoreTiles(maxTotalLoading, maxNewLoads); } } var postRenderFunctions = this.postRenderFunctions_; var i, ii; for (i = 0, ii = postRenderFunctions.length; i < ii; ++i) { postRenderFunctions[i](this, frameState); } postRenderFunctions.length = 0; }; /** * @private */ ol.Map.prototype.handleSizeChanged_ = function() { this.render(); }; /** * @private */ ol.Map.prototype.handleTargetChanged_ = function() { // target may be undefined, null, a string or an Element. // If it's a string we convert it to an Element before proceeding. // If it's not now an Element we remove the viewport from the DOM. // If it's an Element we append the viewport element to it. var targetElement; if (this.getTarget()) { targetElement = this.getTargetElement(); ol.DEBUG && console.assert(targetElement !== null, 'expects a non-null value for targetElement'); } if (this.keyHandlerKeys_) { for (var i = 0, ii = this.keyHandlerKeys_.length; i < ii; ++i) { ol.events.unlistenByKey(this.keyHandlerKeys_[i]); } this.keyHandlerKeys_ = null; } if (!targetElement) { ol.dom.removeNode(this.viewport_); if (this.handleResize_ !== undefined) { window.removeEventListener(ol.events.EventType.RESIZE, this.handleResize_, false); this.handleResize_ = undefined; } } else { targetElement.appendChild(this.viewport_); var keyboardEventTarget = !this.keyboardEventTarget_ ? targetElement : this.keyboardEventTarget_; this.keyHandlerKeys_ = [ ol.events.listen(keyboardEventTarget, ol.events.EventType.KEYDOWN, this.handleBrowserEvent, this), ol.events.listen(keyboardEventTarget, ol.events.EventType.KEYPRESS, this.handleBrowserEvent, this) ]; if (!this.handleResize_) { this.handleResize_ = this.updateSize.bind(this); window.addEventListener(ol.events.EventType.RESIZE, this.handleResize_, false); } } this.updateSize(); // updateSize calls setSize, so no need to call this.render // ourselves here. }; /** * @private */ ol.Map.prototype.handleTileChange_ = function() { this.render(); }; /** * @private */ ol.Map.prototype.handleViewPropertyChanged_ = function() { this.render(); }; /** * @private */ ol.Map.prototype.handleViewChanged_ = function() { if (this.viewPropertyListenerKey_) { ol.events.unlistenByKey(this.viewPropertyListenerKey_); this.viewPropertyListenerKey_ = null; } if (this.viewChangeListenerKey_) { ol.events.unlistenByKey(this.viewChangeListenerKey_); this.viewChangeListenerKey_ = null; } var view = this.getView(); if (view) { this.viewPropertyListenerKey_ = ol.events.listen( view, ol.Object.EventType.PROPERTYCHANGE, this.handleViewPropertyChanged_, this); this.viewChangeListenerKey_ = ol.events.listen( view, ol.events.EventType.CHANGE, this.handleViewPropertyChanged_, this); } this.render(); }; /** * @private */ ol.Map.prototype.handleLayerGroupChanged_ = function() { if (this.layerGroupPropertyListenerKeys_) { this.layerGroupPropertyListenerKeys_.forEach(ol.events.unlistenByKey); this.layerGroupPropertyListenerKeys_ = null; } var layerGroup = this.getLayerGroup(); if (layerGroup) { this.layerGroupPropertyListenerKeys_ = [ ol.events.listen( layerGroup, ol.Object.EventType.PROPERTYCHANGE, this.render, this), ol.events.listen( layerGroup, ol.events.EventType.CHANGE, this.render, this) ]; } this.render(); }; /** * @return {boolean} Is rendered. */ ol.Map.prototype.isRendered = function() { return !!this.frameState_; }; /** * Requests an immediate render in a synchronous manner. * @api stable */ ol.Map.prototype.renderSync = function() { if (this.animationDelayKey_) { cancelAnimationFrame(this.animationDelayKey_); } this.animationDelay_(); }; /** * Request a map rendering (at the next animation frame). * @api stable */ ol.Map.prototype.render = function() { if (this.animationDelayKey_ === undefined) { this.animationDelayKey_ = requestAnimationFrame( this.animationDelay_); } }; /** * Remove the given control from the map. * @param {ol.control.Control} control Control. * @return {ol.control.Control|undefined} The removed control (or undefined * if the control was not found). * @api stable */ ol.Map.prototype.removeControl = function(control) { return this.getControls().remove(control); }; /** * Remove the given interaction from the map. * @param {ol.interaction.Interaction} interaction Interaction to remove. * @return {ol.interaction.Interaction|undefined} The removed interaction (or * undefined if the interaction was not found). * @api stable */ ol.Map.prototype.removeInteraction = function(interaction) { return this.getInteractions().remove(interaction); }; /** * Removes the given layer from the map. * @param {ol.layer.Base} layer Layer. * @return {ol.layer.Base|undefined} The removed layer (or undefined if the * layer was not found). * @api stable */ ol.Map.prototype.removeLayer = function(layer) { var layers = this.getLayerGroup().getLayers(); return layers.remove(layer); }; /** * Remove the given overlay from the map. * @param {ol.Overlay} overlay Overlay. * @return {ol.Overlay|undefined} The removed overlay (or undefined * if the overlay was not found). * @api stable */ ol.Map.prototype.removeOverlay = function(overlay) { return this.getOverlays().remove(overlay); }; /** * @param {number} time Time. * @private */ ol.Map.prototype.renderFrame_ = function(time) { var i, ii, viewState; var size = this.getSize(); var view = this.getView(); var extent = ol.extent.createEmpty(); /** @type {?olx.FrameState} */ var frameState = null; if (size !== undefined && ol.size.hasArea(size) && view && view.isDef()) { var viewHints = view.getHints(this.frameState_ ? this.frameState_.viewHints : undefined); var layerStatesArray = this.getLayerGroup().getLayerStatesArray(); var layerStates = {}; for (i = 0, ii = layerStatesArray.length; i < ii; ++i) { layerStates[ol.getUid(layerStatesArray[i].layer)] = layerStatesArray[i]; } viewState = view.getState(); frameState = /** @type {olx.FrameState} */ ({ animate: false, attributions: {}, coordinateToPixelTransform: this.coordinateToPixelTransform_, extent: extent, focus: !this.focus_ ? viewState.center : this.focus_, index: this.frameIndex_++, layerStates: layerStates, layerStatesArray: layerStatesArray, logos: ol.obj.assign({}, this.logos_), pixelRatio: this.pixelRatio_, pixelToCoordinateTransform: this.pixelToCoordinateTransform_, postRenderFunctions: [], size: size, skippedFeatureUids: this.skippedFeatureUids_, tileQueue: this.tileQueue_, time: time, usedTiles: {}, viewState: viewState, viewHints: viewHints, wantedTiles: {} }); } if (frameState) { var preRenderFunctions = this.preRenderFunctions_; var n = 0, preRenderFunction; for (i = 0, ii = preRenderFunctions.length; i < ii; ++i) { preRenderFunction = preRenderFunctions[i]; if (preRenderFunction(this, frameState)) { preRenderFunctions[n++] = preRenderFunction; } } preRenderFunctions.length = n; frameState.extent = ol.extent.getForViewAndSize(viewState.center, viewState.resolution, viewState.rotation, frameState.size, extent); } this.frameState_ = frameState; this.renderer_.renderFrame(frameState); if (frameState) { if (frameState.animate) { this.render(); } Array.prototype.push.apply( this.postRenderFunctions_, frameState.postRenderFunctions); var idle = this.preRenderFunctions_.length === 0 && !frameState.viewHints[ol.View.Hint.ANIMATING] && !frameState.viewHints[ol.View.Hint.INTERACTING] && !ol.extent.equals(frameState.extent, this.previousExtent_); if (idle) { this.dispatchEvent( new ol.MapEvent(ol.MapEvent.Type.MOVEEND, this, frameState)); ol.extent.clone(frameState.extent, this.previousExtent_); } } this.dispatchEvent( new ol.MapEvent(ol.MapEvent.Type.POSTRENDER, this, frameState)); setTimeout(this.handlePostRender.bind(this), 0); }; /** * Sets the layergroup of this map. * @param {ol.layer.Group} layerGroup A layer group containing the layers in * this map. * @observable * @api stable */ ol.Map.prototype.setLayerGroup = function(layerGroup) { this.set(ol.Map.Property.LAYERGROUP, layerGroup); }; /** * Set the size of this map. * @param {ol.Size|undefined} size The size in pixels of the map in the DOM. * @observable * @api */ ol.Map.prototype.setSize = function(size) { this.set(ol.Map.Property.SIZE, size); }; /** * Set the target element to render this map into. * @param {Element|string|undefined} target The Element or id of the Element * that the map is rendered in. * @observable * @api stable */ ol.Map.prototype.setTarget = function(target) { this.set(ol.Map.Property.TARGET, target); }; /** * Set the view for this map. * @param {ol.View} view The view that controls this map. * @observable * @api stable */ ol.Map.prototype.setView = function(view) { this.set(ol.Map.Property.VIEW, view); }; /** * @param {ol.Feature} feature Feature. */ ol.Map.prototype.skipFeature = function(feature) { var featureUid = ol.getUid(feature).toString(); this.skippedFeatureUids_[featureUid] = true; this.render(); }; /** * Force a recalculation of the map viewport size. This should be called when * third-party code changes the size of the map viewport. * @api stable */ ol.Map.prototype.updateSize = function() { var targetElement = this.getTargetElement(); if (!targetElement) { this.setSize(undefined); } else { var computedStyle = getComputedStyle(targetElement); this.setSize([ targetElement.offsetWidth - parseFloat(computedStyle['borderLeftWidth']) - parseFloat(computedStyle['paddingLeft']) - parseFloat(computedStyle['paddingRight']) - parseFloat(computedStyle['borderRightWidth']), targetElement.offsetHeight - parseFloat(computedStyle['borderTopWidth']) - parseFloat(computedStyle['paddingTop']) - parseFloat(computedStyle['paddingBottom']) - parseFloat(computedStyle['borderBottomWidth']) ]); } }; /** * @param {ol.Feature} feature Feature. */ ol.Map.prototype.unskipFeature = function(feature) { var featureUid = ol.getUid(feature).toString(); delete this.skippedFeatureUids_[featureUid]; this.render(); }; /** * @param {olx.MapOptions} options Map options. * @return {ol.MapOptionsInternal} Internal map options. */ ol.Map.createOptionsInternal = function(options) { /** * @type {Element|Document} */ var keyboardEventTarget = null; if (options.keyboardEventTarget !== undefined) { keyboardEventTarget = typeof options.keyboardEventTarget === 'string' ? document.getElementById(options.keyboardEventTarget) : options.keyboardEventTarget; } /** * @type {Object.<string, *>} */ var values = {}; var logos = {}; if (options.logo === undefined || (typeof options.logo === 'boolean' && options.logo)) { logos[ol.OL3_LOGO_URL] = ol.OL3_URL; } else { var logo = options.logo; if (typeof logo === 'string') { logos[logo] = ''; } else if (logo instanceof HTMLElement) { logos[ol.getUid(logo).toString()] = logo; } else if (logo) { ol.asserts.assert(typeof logo.href == 'string', 44); // `logo.href` should be a string. ol.asserts.assert(typeof logo.src == 'string', 45); // `logo.src` should be a string. logos[logo.src] = logo.href; } } var layerGroup = (options.layers instanceof ol.layer.Group) ? options.layers : new ol.layer.Group({layers: options.layers}); values[ol.Map.Property.LAYERGROUP] = layerGroup; values[ol.Map.Property.TARGET] = options.target; values[ol.Map.Property.VIEW] = options.view !== undefined ? options.view : new ol.View(); /** * @type {function(new: ol.renderer.Map, Element, ol.Map)} */ var rendererConstructor = ol.renderer.Map; /** * @type {Array.<ol.renderer.Type>} */ var rendererTypes; if (options.renderer !== undefined) { if (Array.isArray(options.renderer)) { rendererTypes = options.renderer; } else if (typeof options.renderer === 'string') { rendererTypes = [options.renderer]; } else { ol.asserts.assert(false, 46); // Incorrect format for `renderer` option } if (rendererTypes.indexOf(/** @type {ol.renderer.Type} */ ('dom')) >= 0) { ol.DEBUG && console.assert(false, 'The DOM render has been removed'); rendererTypes = rendererTypes.concat(ol.DEFAULT_RENDERER_TYPES); } } else { rendererTypes = ol.DEFAULT_RENDERER_TYPES; } var i, ii; for (i = 0, ii = rendererTypes.length; i < ii; ++i) { /** @type {ol.renderer.Type} */ var rendererType = rendererTypes[i]; if (ol.ENABLE_CANVAS && rendererType == ol.renderer.Type.CANVAS) { if (ol.has.CANVAS) { rendererConstructor = ol.renderer.canvas.Map; break; } } else if (ol.ENABLE_WEBGL && rendererType == ol.renderer.Type.WEBGL) { if (ol.has.WEBGL) { rendererConstructor = ol.renderer.webgl.Map; break; } } } var controls; if (options.controls !== undefined) { if (Array.isArray(options.controls)) { controls = new ol.Collection(options.controls.slice()); } else { ol.asserts.assert(options.controls instanceof ol.Collection, 47); // Expected `controls` to be an array or an `ol.Collection` controls = options.controls; } } else { controls = ol.control.defaults(); } var interactions; if (options.interactions !== undefined) { if (Array.isArray(options.interactions)) { interactions = new ol.Collection(options.interactions.slice()); } else { ol.asserts.assert(options.interactions instanceof ol.Collection, 48); // Expected `interactions` to be an array or an `ol.Collection` interactions = options.interactions; } } else { interactions = ol.interaction.defaults(); } var overlays; if (options.overlays !== undefined) { if (Array.isArray(options.overlays)) { overlays = new ol.Collection(options.overlays.slice()); } else { ol.asserts.assert(options.overlays instanceof ol.Collection, 49); // Expected `overlays` to be an array or an `ol.Collection` overlays = options.overlays; } } else { overlays = new ol.Collection(); } return { controls: controls, interactions: interactions, keyboardEventTarget: keyboardEventTarget, logos: logos, overlays: overlays, rendererConstructor: rendererConstructor, values: values }; }; /** * @enum {string} */ ol.Map.Property = { LAYERGROUP: 'layergroup', SIZE: 'size', TARGET: 'target', VIEW: 'view' }; ol.proj.common.add();