diff options
| author | Richard Sassine <richardsassine@tutanota.com> | 2021-05-31 19:22:23 +0300 |
|---|---|---|
| committer | Richard Sassine <richardsassine@tutanota.com> | 2021-05-31 19:22:23 +0300 |
| commit | 3a8776ee0342f47a57bcc9365499ebd5d3d7ee1c (patch) | |
| tree | 9515fcef8e53992a9bbbcdc7950e1dd596983166 /base_geoengine/static/lib/ol3-layerswitcher.js | |
| parent | 9d3eeeb5c7d4055b34bc0768387952850ed78668 (diff) | |
added geoengine
Diffstat (limited to 'base_geoengine/static/lib/ol3-layerswitcher.js')
| -rw-r--r-- | base_geoengine/static/lib/ol3-layerswitcher.js | 232 |
1 files changed, 232 insertions, 0 deletions
diff --git a/base_geoengine/static/lib/ol3-layerswitcher.js b/base_geoengine/static/lib/ol3-layerswitcher.js new file mode 100644 index 0000000..7529627 --- /dev/null +++ b/base_geoengine/static/lib/ol3-layerswitcher.js @@ -0,0 +1,232 @@ +/** + * OpenLayers 3 Layer Switcher Control. + * See [the examples](./examples) for usage. + * @constructor + * @extends {ol.control.Control} + * @param {Object} opt_options Control options, extends olx.control.ControlOptions adding: + * **`tipLabel`** `String` - the button tooltip. + */ +ol.control.LayerSwitcher = function(opt_options) { + + var options = opt_options || {}; + + var tipLabel = options.tipLabel ? + options.tipLabel : 'Legend'; + + this.mapListeners = []; + + this.hiddenClassName = 'ol-unselectable ol-control layer-switcher'; + this.shownClassName = this.hiddenClassName + ' shown'; + + var element = document.createElement('div'); + element.className = this.hiddenClassName; + + var button = document.createElement('button'); + button.setAttribute('title', tipLabel); + element.appendChild(button); + + this.panel = document.createElement('div'); + this.panel.className = 'panel'; + element.appendChild(this.panel); + + var this_ = this; + + element.onmouseover = function(e) { + this_.showPanel(); + }; + + button.onclick = function(e) { + this_.showPanel(); + }; + + element.onmouseout = function(e) { + e = e || window.event; + if (!element.contains(e.toElement)) { + this_.hidePanel(); + } + }; + + ol.control.Control.call(this, { + element: element, + target: options.target + }); + +}; + +ol.inherits(ol.control.LayerSwitcher, ol.control.Control); + +/** + * Show the layer panel. + */ +ol.control.LayerSwitcher.prototype.showPanel = function() { + if (this.element.className != this.shownClassName) { + this.element.className = this.shownClassName; + this.renderPanel(); + } +}; + +/** + * Hide the layer panel. + */ +ol.control.LayerSwitcher.prototype.hidePanel = function() { + if (this.element.className != this.hiddenClassName) { + this.element.className = this.hiddenClassName; + } +}; + +/** + * Re-draw the layer panel to represent the current state of the layers. + */ +ol.control.LayerSwitcher.prototype.renderPanel = function() { + + this.ensureTopVisibleBaseLayerShown_(); + + while(this.panel.firstChild) { + this.panel.removeChild(this.panel.firstChild); + } + + var ul = document.createElement('ul'); + this.panel.appendChild(ul); + this.renderLayers_(this.getMap(), ul); + +}; + +/** + * Set the map instance the control is associated with. + * @param {ol.Map} map The map instance. + */ +ol.control.LayerSwitcher.prototype.setMap = function(map) { + // Clean up listeners associated with the previous map + for (var i = 0, key; i < this.mapListeners.length; i++) { + this.getMap().unByKey(this.mapListeners[i]); + } + this.mapListeners.length = 0; + // Wire up listeners etc. and store reference to new map + ol.control.Control.prototype.setMap.call(this, map); + if (map) { + var this_ = this; + this.mapListeners.push(map.on('pointerdown', function() { + this_.hidePanel(); + })); + this.renderPanel(); + } +}; + +/** + * Ensure only the top-most base layer is visible if more than one is visible. + * @private + */ +ol.control.LayerSwitcher.prototype.ensureTopVisibleBaseLayerShown_ = function() { + var lastVisibleBaseLyr; + ol.control.LayerSwitcher.forEachRecursive(this.getMap(), function(l, idx, a) { + if (l.get('type') === 'base' && l.getVisible()) { + lastVisibleBaseLyr = l; + } + }); + if (lastVisibleBaseLyr) this.setVisible_(lastVisibleBaseLyr, true); +}; + +/** + * Toggle the visible state of a layer. + * Takes care of hiding other layers in the same exclusive group if the layer + * is toggle to visible. + * @private + * @param {ol.layer.Base} The layer whos visibility will be toggled. + */ +ol.control.LayerSwitcher.prototype.setVisible_ = function(lyr, visible) { + var map = this.getMap(); + lyr.setVisible(visible); + if (visible && lyr.get('type') === 'base') { + // Hide all other base layers regardless of grouping + ol.control.LayerSwitcher.forEachRecursive(map, function(l, idx, a) { + if (l != lyr && l.get('type') === 'base') { + l.setVisible(false); + } + }); + } +}; + +/** + * Render all layers that are children of a group. + * @private + * @param {ol.layer.Base} lyr Layer to be rendered (should have a title property). + * @param {Number} idx Position in parent group list. + */ +ol.control.LayerSwitcher.prototype.renderLayer_ = function(lyr, idx) { + + var this_ = this; + + var li = document.createElement('li'); + + var lyrTitle = lyr.get('title'); + var lyrId = lyr.get('title').replace(' ', '-') + '_' + idx; + + var label = document.createElement('label'); + + if (lyr.getLayers) { + + li.className = 'group'; + label.innerHTML = lyrTitle; + li.appendChild(label); + var ul = document.createElement('ul'); + li.appendChild(ul); + + this.renderLayers_(lyr, ul); + + } else { + + var input = document.createElement('input'); + if (lyr.get('type') === 'base') { + input.type = 'radio'; + input.name = 'base'; + } else { + input.type = 'checkbox'; + } + input.id = lyrId; + input.checked = lyr.get('visible'); + input.onchange = function(e) { + this_.setVisible_(lyr, e.target.checked); + }; + li.appendChild(input); + + label.htmlFor = lyrId; + label.innerHTML = lyrTitle; + li.appendChild(label); + + } + + return li; + +}; + +/** + * Render all layers that are children of a group. + * @private + * @param {ol.layer.Group} lyr Group layer whos children will be rendered. + * @param {Element} elm DOM element that children will be appended to. + */ +ol.control.LayerSwitcher.prototype.renderLayers_ = function(lyr, elm) { + var lyrs = lyr.getLayers().getArray().slice().reverse(); + for (var i = 0, l; i < lyrs.length; i++) { + l = lyrs[i]; + if (l.get('title')) { + elm.appendChild(this.renderLayer_(l, i)); + } + } +}; + +/** + * **Static** Call the supplied function for each layer in the passed layer group + * recursing nested groups. + * @param {ol.layer.Group} lyr The layer group to start iterating from. + * @param {Function} fn Callback which will be called for each `ol.layer.Base` + * found under `lyr`. The signature for `fn` is the same as `ol.Collection#forEach` + */ +ol.control.LayerSwitcher.forEachRecursive = function(lyr, fn) { + lyr.getLayers().forEach(function(lyr, idx, a) { + fn(lyr, idx, a); + if (lyr.getLayers) { + ol.control.LayerSwitcher.forEachRecursive(lyr, fn); + } + }); +}; |
