UNPKG

openlayers

Version:

Build tools and sources for developing OpenLayers based mapping applications

552 lines (470 loc) 14 kB
goog.provide('ol.Overlay'); goog.require('ol'); goog.require('ol.MapEvent'); goog.require('ol.Object'); goog.require('ol.dom'); goog.require('ol.events'); goog.require('ol.extent'); /** * @classdesc * An element to be displayed over the map and attached to a single map * location. Like {@link ol.control.Control}, Overlays are visible widgets. * Unlike Controls, they are not in a fixed position on the screen, but are tied * to a geographical coordinate, so panning the map will move an Overlay but not * a Control. * * Example: * * var popup = new ol.Overlay({ * element: document.getElementById('popup') * }); * popup.setPosition(coordinate); * map.addOverlay(popup); * * @constructor * @extends {ol.Object} * @param {olx.OverlayOptions} options Overlay options. * @api stable */ ol.Overlay = function(options) { ol.Object.call(this); /** * @private * @type {number|string|undefined} */ this.id_ = options.id; /** * @private * @type {boolean} */ this.insertFirst_ = options.insertFirst !== undefined ? options.insertFirst : true; /** * @private * @type {boolean} */ this.stopEvent_ = options.stopEvent !== undefined ? options.stopEvent : true; /** * @private * @type {Element} */ this.element_ = document.createElement('DIV'); this.element_.className = 'ol-overlay-container'; this.element_.style.position = 'absolute'; /** * @protected * @type {boolean} */ this.autoPan = options.autoPan !== undefined ? options.autoPan : false; /** * @private * @type {olx.OverlayPanOptions} */ this.autoPanAnimation_ = options.autoPanAnimation || /** @type {olx.OverlayPanOptions} */ ({}); /** * @private * @type {number} */ this.autoPanMargin_ = options.autoPanMargin !== undefined ? options.autoPanMargin : 20; /** * @private * @type {{bottom_: string, * left_: string, * right_: string, * top_: string, * visible: boolean}} */ this.rendered_ = { bottom_: '', left_: '', right_: '', top_: '', visible: true }; /** * @private * @type {?ol.EventsKey} */ this.mapPostrenderListenerKey_ = null; ol.events.listen( this, ol.Object.getChangeEventType(ol.Overlay.Property.ELEMENT), this.handleElementChanged, this); ol.events.listen( this, ol.Object.getChangeEventType(ol.Overlay.Property.MAP), this.handleMapChanged, this); ol.events.listen( this, ol.Object.getChangeEventType(ol.Overlay.Property.OFFSET), this.handleOffsetChanged, this); ol.events.listen( this, ol.Object.getChangeEventType(ol.Overlay.Property.POSITION), this.handlePositionChanged, this); ol.events.listen( this, ol.Object.getChangeEventType(ol.Overlay.Property.POSITIONING), this.handlePositioningChanged, this); if (options.element !== undefined) { this.setElement(options.element); } this.setOffset(options.offset !== undefined ? options.offset : [0, 0]); this.setPositioning(options.positioning !== undefined ? /** @type {ol.Overlay.Positioning} */ (options.positioning) : ol.Overlay.Positioning.TOP_LEFT); if (options.position !== undefined) { this.setPosition(options.position); } }; ol.inherits(ol.Overlay, ol.Object); /** * Get the DOM element of this overlay. * @return {Element|undefined} The Element containing the overlay. * @observable * @api stable */ ol.Overlay.prototype.getElement = function() { return /** @type {Element|undefined} */ ( this.get(ol.Overlay.Property.ELEMENT)); }; /** * Get the overlay identifier which is set on constructor. * @return {number|string|undefined} Id. * @api */ ol.Overlay.prototype.getId = function() { return this.id_; }; /** * Get the map associated with this overlay. * @return {ol.Map|undefined} The map that the overlay is part of. * @observable * @api stable */ ol.Overlay.prototype.getMap = function() { return /** @type {ol.Map|undefined} */ ( this.get(ol.Overlay.Property.MAP)); }; /** * Get the offset of this overlay. * @return {Array.<number>} The offset. * @observable * @api stable */ ol.Overlay.prototype.getOffset = function() { return /** @type {Array.<number>} */ ( this.get(ol.Overlay.Property.OFFSET)); }; /** * Get the current position of this overlay. * @return {ol.Coordinate|undefined} The spatial point that the overlay is * anchored at. * @observable * @api stable */ ol.Overlay.prototype.getPosition = function() { return /** @type {ol.Coordinate|undefined} */ ( this.get(ol.Overlay.Property.POSITION)); }; /** * Get the current positioning of this overlay. * @return {ol.Overlay.Positioning} How the overlay is positioned * relative to its point on the map. * @observable * @api stable */ ol.Overlay.prototype.getPositioning = function() { return /** @type {ol.Overlay.Positioning} */ ( this.get(ol.Overlay.Property.POSITIONING)); }; /** * @protected */ ol.Overlay.prototype.handleElementChanged = function() { ol.dom.removeChildren(this.element_); var element = this.getElement(); if (element) { this.element_.appendChild(element); } }; /** * @protected */ ol.Overlay.prototype.handleMapChanged = function() { if (this.mapPostrenderListenerKey_) { ol.dom.removeNode(this.element_); ol.events.unlistenByKey(this.mapPostrenderListenerKey_); this.mapPostrenderListenerKey_ = null; } var map = this.getMap(); if (map) { this.mapPostrenderListenerKey_ = ol.events.listen(map, ol.MapEvent.Type.POSTRENDER, this.render, this); this.updatePixelPosition(); var container = this.stopEvent_ ? map.getOverlayContainerStopEvent() : map.getOverlayContainer(); if (this.insertFirst_) { container.insertBefore(this.element_, container.childNodes[0] || null); } else { container.appendChild(this.element_); } } }; /** * @protected */ ol.Overlay.prototype.render = function() { this.updatePixelPosition(); }; /** * @protected */ ol.Overlay.prototype.handleOffsetChanged = function() { this.updatePixelPosition(); }; /** * @protected */ ol.Overlay.prototype.handlePositionChanged = function() { this.updatePixelPosition(); if (this.get(ol.Overlay.Property.POSITION) !== undefined && this.autoPan) { this.panIntoView_(); } }; /** * @protected */ ol.Overlay.prototype.handlePositioningChanged = function() { this.updatePixelPosition(); }; /** * Set the DOM element to be associated with this overlay. * @param {Element|undefined} element The Element containing the overlay. * @observable * @api stable */ ol.Overlay.prototype.setElement = function(element) { this.set(ol.Overlay.Property.ELEMENT, element); }; /** * Set the map to be associated with this overlay. * @param {ol.Map|undefined} map The map that the overlay is part of. * @observable * @api stable */ ol.Overlay.prototype.setMap = function(map) { this.set(ol.Overlay.Property.MAP, map); }; /** * Set the offset for this overlay. * @param {Array.<number>} offset Offset. * @observable * @api stable */ ol.Overlay.prototype.setOffset = function(offset) { this.set(ol.Overlay.Property.OFFSET, offset); }; /** * Set the position for this overlay. If the position is `undefined` the * overlay is hidden. * @param {ol.Coordinate|undefined} position The spatial point that the overlay * is anchored at. * @observable * @api stable */ ol.Overlay.prototype.setPosition = function(position) { this.set(ol.Overlay.Property.POSITION, position); }; /** * Pan the map so that the overlay is entirely visible in the current viewport * (if necessary). * @private */ ol.Overlay.prototype.panIntoView_ = function() { var map = this.getMap(); if (map === undefined || !map.getTargetElement()) { return; } var mapRect = this.getRect_(map.getTargetElement(), map.getSize()); var element = /** @type {!Element} */ (this.getElement()); var overlayRect = this.getRect_(element, [ol.dom.outerWidth(element), ol.dom.outerHeight(element)]); var margin = this.autoPanMargin_; if (!ol.extent.containsExtent(mapRect, overlayRect)) { // the overlay is not completely inside the viewport, so pan the map var offsetLeft = overlayRect[0] - mapRect[0]; var offsetRight = mapRect[2] - overlayRect[2]; var offsetTop = overlayRect[1] - mapRect[1]; var offsetBottom = mapRect[3] - overlayRect[3]; var delta = [0, 0]; if (offsetLeft < 0) { // move map to the left delta[0] = offsetLeft - margin; } else if (offsetRight < 0) { // move map to the right delta[0] = Math.abs(offsetRight) + margin; } if (offsetTop < 0) { // move map up delta[1] = offsetTop - margin; } else if (offsetBottom < 0) { // move map down delta[1] = Math.abs(offsetBottom) + margin; } if (delta[0] !== 0 || delta[1] !== 0) { var center = /** @type {ol.Coordinate} */ (map.getView().getCenter()); var centerPx = map.getPixelFromCoordinate(center); var newCenterPx = [ centerPx[0] + delta[0], centerPx[1] + delta[1] ]; map.getView().animate({ center: map.getCoordinateFromPixel(newCenterPx), duration: this.autoPanAnimation_.duration, easing: this.autoPanAnimation_.easing }); } } }; /** * Get the extent of an element relative to the document * @param {Element|undefined} element The element. * @param {ol.Size|undefined} size The size of the element. * @return {ol.Extent} The extent. * @private */ ol.Overlay.prototype.getRect_ = function(element, size) { var box = element.getBoundingClientRect(); var offsetX = box.left + window.pageXOffset; var offsetY = box.top + window.pageYOffset; return [ offsetX, offsetY, offsetX + size[0], offsetY + size[1] ]; }; /** * Set the positioning for this overlay. * @param {ol.Overlay.Positioning} positioning how the overlay is * positioned relative to its point on the map. * @observable * @api stable */ ol.Overlay.prototype.setPositioning = function(positioning) { this.set(ol.Overlay.Property.POSITIONING, positioning); }; /** * Modify the visibility of the element. * @param {boolean} visible Element visibility. * @protected */ ol.Overlay.prototype.setVisible = function(visible) { if (this.rendered_.visible !== visible) { this.element_.style.display = visible ? '' : 'none'; this.rendered_.visible = visible; } }; /** * Update pixel position. * @protected */ ol.Overlay.prototype.updatePixelPosition = function() { var map = this.getMap(); var position = this.getPosition(); if (map === undefined || !map.isRendered() || position === undefined) { this.setVisible(false); return; } var pixel = map.getPixelFromCoordinate(position); var mapSize = map.getSize(); this.updateRenderedPosition(pixel, mapSize); }; /** * @param {ol.Pixel} pixel The pixel location. * @param {ol.Size|undefined} mapSize The map size. * @protected */ ol.Overlay.prototype.updateRenderedPosition = function(pixel, mapSize) { var style = this.element_.style; var offset = this.getOffset(); var positioning = this.getPositioning(); ol.DEBUG && console.assert(positioning !== undefined, 'positioning should be defined'); var offsetX = offset[0]; var offsetY = offset[1]; if (positioning == ol.Overlay.Positioning.BOTTOM_RIGHT || positioning == ol.Overlay.Positioning.CENTER_RIGHT || positioning == ol.Overlay.Positioning.TOP_RIGHT) { if (this.rendered_.left_ !== '') { this.rendered_.left_ = style.left = ''; } var right = Math.round(mapSize[0] - pixel[0] - offsetX) + 'px'; if (this.rendered_.right_ != right) { this.rendered_.right_ = style.right = right; } } else { if (this.rendered_.right_ !== '') { this.rendered_.right_ = style.right = ''; } if (positioning == ol.Overlay.Positioning.BOTTOM_CENTER || positioning == ol.Overlay.Positioning.CENTER_CENTER || positioning == ol.Overlay.Positioning.TOP_CENTER) { offsetX -= this.element_.offsetWidth / 2; } var left = Math.round(pixel[0] + offsetX) + 'px'; if (this.rendered_.left_ != left) { this.rendered_.left_ = style.left = left; } } if (positioning == ol.Overlay.Positioning.BOTTOM_LEFT || positioning == ol.Overlay.Positioning.BOTTOM_CENTER || positioning == ol.Overlay.Positioning.BOTTOM_RIGHT) { if (this.rendered_.top_ !== '') { this.rendered_.top_ = style.top = ''; } var bottom = Math.round(mapSize[1] - pixel[1] - offsetY) + 'px'; if (this.rendered_.bottom_ != bottom) { this.rendered_.bottom_ = style.bottom = bottom; } } else { if (this.rendered_.bottom_ !== '') { this.rendered_.bottom_ = style.bottom = ''; } if (positioning == ol.Overlay.Positioning.CENTER_LEFT || positioning == ol.Overlay.Positioning.CENTER_CENTER || positioning == ol.Overlay.Positioning.CENTER_RIGHT) { offsetY -= this.element_.offsetHeight / 2; } var top = Math.round(pixel[1] + offsetY) + 'px'; if (this.rendered_.top_ != top) { this.rendered_.top_ = style.top = top; } } this.setVisible(true); }; /** * Overlay position: `'bottom-left'`, `'bottom-center'`, `'bottom-right'`, * `'center-left'`, `'center-center'`, `'center-right'`, `'top-left'`, * `'top-center'`, `'top-right'` * @enum {string} */ ol.Overlay.Positioning = { BOTTOM_LEFT: 'bottom-left', BOTTOM_CENTER: 'bottom-center', BOTTOM_RIGHT: 'bottom-right', CENTER_LEFT: 'center-left', CENTER_CENTER: 'center-center', CENTER_RIGHT: 'center-right', TOP_LEFT: 'top-left', TOP_CENTER: 'top-center', TOP_RIGHT: 'top-right' }; /** * @enum {string} */ ol.Overlay.Property = { ELEMENT: 'element', MAP: 'map', OFFSET: 'offset', POSITION: 'position', POSITIONING: 'positioning' };