@openglobus/og 0.14.10 → 0.15.0

package/src/og/control/RulerSwitcher.js

@@ -6,7 +6,23 @@
 
 import { Control } from "./Control.js";
 import { Ruler } from "./ruler/Ruler.js";
-import { elementFactory, btnClickHandler } from "./UIhelpers.js";
+import { ToggleButton } from "../ui/ToggleButton.js";
+
+const ICON_BUTTON_SVG = `<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+\t viewBox="0 0 512 512" xml:space="preserve">
+<g>
+\t<g>
+\t\t<path d="M369.151,0L0.001,369.15L142.85,512l369.149-369.15L369.151,0z M47.286,369.15l10.908-10.908l47.782,47.782l23.642-23.642
+\t\t\tL81.837,334.6l10.909-10.909l23.711,23.711L140.1,323.76l-23.711-23.711l10.909-10.909l23.711,23.711l23.642-23.642
+\t\t\tl-23.711-23.711l10.909-10.909l47.782,47.782l23.642-23.642l-47.782-47.782l10.908-10.908l23.71,23.71l23.642-23.642l-23.71-23.71
+\t\t\tl10.908-10.908l23.711,23.711l23.642-23.642l-23.711-23.711l10.909-10.909l47.782,47.782l23.642-23.642l-47.782-47.782
+\t\t\tl10.908-10.908l23.71,23.711l23.642-23.642l-23.711-23.71L334.6,81.837l23.711,23.71l23.642-23.642l-23.711-23.712l10.908-10.908
+\t\t\tl95.564,95.564L142.85,464.714L47.286,369.15z"/>
+\t</g>
+</g>
+</svg>`;
 
 /**
  * Activate ruler
@@ -37,31 +53,20 @@ class RulerSwitcher extends Control {
     }
 
     _createMenuBtn() {
-        let btn = elementFactory(
-            'div',
-            { id: 'og-ruler-menu-btn', class: 'og-ruler og-menu-btn og-OFF' },
-            elementFactory(
-                'div',
-                { id: 'og-ruler-menu-icon', class: 'og-icon-holder' }
-            )
-        );
 
-        this.renderer.div.appendChild(btn);
+        let btn = new ToggleButton({
+            classList: ["og-map-button", "og-ruler_button"],
+            icon: ICON_BUTTON_SVG,
+            appendTo: this.renderer.div
+        });
 
-        btn.addEventListener('click', () => {
-            if (btn.classList.contains('og-OFF')) {
+        btn.on("change", (isActive) => {
+            if (isActive) {
                 this.onactivate();
             } else {
                 this.ondeactivate();
             }
         });
-
-        btnClickHandler(
-            btn,
-            null,
-            null,
-            '#og-ruler-menu-icon'
-        );
     }
 }
 

package/src/og/control/ScaleControl.js

@@ -7,6 +7,7 @@
 import { Control } from "./Control.js";
 import { RADIANS } from "../math.js";
 import { binarySearch, parseHTML } from "../utils/shared.js";
+import { Vec3 } from "../math/Vec3.js";
 
 const scale = [
     1, 2, 3, 5, 10, 20, 30, 50, 100, 200, 300, 500, 1e3, 2e3, 3e3, 5e3, 10e3, 20e3, 30e3, 50e3,
@@ -38,6 +39,8 @@ class ScaleControl extends Control {
 
         this._minWidth = 100;
         this._maxWidth = 150;
+
+        this._isCenter = options.isCenter || false;
     }
 
     _renderTemplate() {
@@ -51,21 +54,38 @@ class ScaleControl extends Control {
 
         this.renderer.div.appendChild(this.el);
 
-        this.renderer.events.on("draw", (e) => {
-            if (e.events.pointerEvent()) {
-                this._draw();
-            }
-        });
+        if (this._isCenter) {
+            this.renderer.activeCamera.events.on("moveend", (e) => {
+                this._drawScreen(this.planet.renderer.handler.getCenter());
+            });
 
-        this.renderer.activeCamera.events.on("moveend", (e) => {
-            this._draw(e);
-        });
+            this.planet.terrain.events.on("loadend", (e) => {
+                this._drawScreen(this.planet.renderer.handler.getCenter());
+            });
+        } else {
+            this.renderer.events.on("mousemove", (e) => {
+                if (!e.leftButtonHold && !e.rightButtonHold) {
+                    this._drawScreen(e);
+                }
+            });
+
+            this.renderer.activeCamera.events.on("moveend", (e) => {
+                let ms = this.renderer.events.mouseState;
+                if (!ms.leftButtonHold && !ms.rightButtonHold) {
+                    this._drawScreen(ms);
+                }
+            });
+        }
     }
 
-    _draw(e) {
+    _drawScreen(px) {
         let cam = this.renderer.activeCamera;
-        let s0 = this.planet.renderer.handler.getCenter();
+        let s0 = px;
         let dist = this.planet.getDistanceFromPixel(s0);
+        if (dist === 0) {
+            s0 = cam.project(Vec3.ZERO);
+            dist = this.planet.getDistanceFromPixel(s0);
+        }
         let p0 = cam.getForward().scaleTo(dist).addA(cam.eye);
         let tempSize = dist * Math.tan(cam._viewAngle * RADIANS);
         let p1 = p0.add(cam.getRight().scaleTo(tempSize));

package/src/og/control/SimpleSkyBackground.js

@@ -0,0 +1,210 @@
+/**
+ * @module og/control/SimpleSkyBackground
+ */
+
+"use strict";
+
+import { Control } from "./Control.js";
+import { Program } from '../webgl/Program.js';
+import { htmlColorToRgb } from "../utils/shared.js";
+
+/**
+ * Frame per second(FPS) display control.
+ * @class
+ * @extends {Control}
+ * @param {Object} [options] - Control options.
+ */
+class SimpleSkyBackground extends Control {
+    constructor(options) {
+        super({
+            name: "SimpleSkyBackground",
+            ...options
+        });
+
+        this._colorOne = new Float32Array([1.0, 1.0, 1.0]);
+        this._colorTwo = new Float32Array([0.0, 153.0 / 255.0, 221.0 / 255.0]);
+    }
+
+    set colorOne(htmlColor) {
+        let rgb = htmlColorToRgb(htmlColor);
+        this._colorOne[0] = rgb.x;
+        this._colorOne[1] = rgb.y;
+        this._colorOne[2] = rgb.z;
+    }
+
+    set colorTwo(htmlColor) {
+        let rgb = htmlColorToRgb(htmlColor);
+        this._colorTwo[0] = rgb.x;
+        this._colorTwo[1] = rgb.y;
+        this._colorTwo[2] = rgb.z;
+    }
+
+    oninit() {
+        this.renderer.handler.addProgram(simpleSkyBackgroundShader());
+        this.activate();
+    }
+
+    onactivate() {
+        super.onactivate();
+        this.planet.events.on("draw", this._drawBackground, this);
+    }
+
+    ondeactivate() {
+        super.ondeactivate();
+        this.planet.events.off("draw", this._drawBackground);
+    }
+
+    _drawBackground() {
+        let h = this.renderer.handler;
+        let sh = h.programs.simpleSkyBackground, p = sh._program, shu = p.uniforms, gl = h.gl;
+        let cam = this.renderer.activeCamera;
+
+        gl.disable(gl.DEPTH_TEST);
+
+        sh.activate();
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.renderer.screenFramePositionBuffer);
+        gl.vertexAttribPointer(p.attributes.corners, 2, gl.FLOAT, false, 0, 0);
+
+        gl.uniform3fv(shu.camPos, [cam.eye.x, cam.eye.y, cam.eye.z]);
+        gl.uniform2fv(shu.iResolution, [h.getWidth(), h.getHeight()]);
+        gl.uniform1f(shu.fov, cam.getViewAngle());
+        gl.uniform1f(shu.earthRadius, this.planet.ellipsoid.getPolarSize() + 1);
+        gl.uniform3fv(shu.colorOne, this._colorOne);
+        gl.uniform3fv(shu.colorTwo, this._colorTwo);
+
+        gl.uniformMatrix4fv(shu.viewMatrix, false, cam._viewMatrix._m);
+
+        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+
+        gl.enable(gl.DEPTH_TEST);
+    }
+}
+
+export function simpleSkyBackground(options) {
+    return new SimpleSkyBackground(options);
+}
+
+function simpleSkyBackgroundShader() {
+    return new Program("simpleSkyBackground", {
+        uniforms: {
+            iResolution: "vec2", fov: "float",
+            camPos: "vec3",
+            earthRadius: "float",
+            viewMatrix: "mat4",
+            colorOne: "vec3",
+            colorTwo: "vec3"
+        }, attributes: {
+            corners: "vec3"
+        }, vertexShader:
+            `attribute vec2 corners;
+                        
+            varying vec2 tc;
+            
+            void main(void) {
+                gl_Position = vec4(corners, 0.0, 1.0);
+                tc = corners * 0.5 + 0.5;
+            }`, fragmentShader:
+            `precision highp float;
+            
+            #define MAX 10e10
+            #define PI 3.14159265359
+            #define rad(x) x * PI / 180.
+            #define ZERO vec3(0.0)          
+           
+            #define RED vec4(1.0, 0.0, 0.0, 1.0)
+            #define GREEN vec4(0.0, 1.0, 0.0, 1.0)         
+            
+            uniform vec3 camPos;            
+            uniform vec2 iResolution;
+            uniform float fov;
+            uniform float earthRadius;
+            uniform mat4 viewMatrix;
+            
+            uniform vec3 colorOne;
+            uniform vec3 colorTwo;
+                         
+            varying vec2 tc;
+                        
+            // compute the view ray in the camera coordinate
+            vec3 computeView(vec2 uv){
+                float w_h_ratio = iResolution.x / iResolution.y;   
+                float h = tan(rad(fov/2.));
+                return normalize(vec3(-w_h_ratio * h, -h, -1.) + vec3(uv.x * 2. * h * w_h_ratio, uv.y*2.*h, 0.));
+            }
+
+            // sphere of size ra centered at point ce
+            vec2 sphIntersect( in vec3 ro, in vec3 rd, in vec3 ce, float ra )
+            {
+                vec3 oc = ro - ce;
+                float b = dot( oc, rd );
+                float c = dot( oc, oc ) - ra * ra;
+                float h = b * b - c;
+                if( h < 0.0 ) return vec2(MAX); // no intersection
+                h = sqrt( h );
+                return vec2( -b-h, -b+h );
+            }
+            
+            mat3 transpose(mat3 matrix) {
+                vec3 row0 = matrix[0];
+                vec3 row1 = matrix[1];
+                vec3 row2 = matrix[2];
+                mat3 result = mat3(
+                    vec3(row0.x, row1.x, row2.x),
+                    vec3(row0.y, row1.y, row2.y),
+                    vec3(row0.z, row1.z, row2.z)
+                );
+                return result;
+            }
+            
+            float det(mat2 matrix) {
+                return matrix[0].x * matrix[1].y - matrix[0].y * matrix[1].x;
+            }
+            
+            mat3 inverse(mat3 matrix) {
+                vec3 row0 = matrix[0];
+                vec3 row1 = matrix[1];
+                vec3 row2 = matrix[2];
+            
+                vec3 minors0 = vec3(
+                    det(mat2(row1.y, row1.z, row2.y, row2.z)),
+                    det(mat2(row1.z, row1.x, row2.z, row2.x)),
+                    det(mat2(row1.x, row1.y, row2.x, row2.y))
+                );
+                vec3 minors1 = vec3(
+                    det(mat2(row2.y, row2.z, row0.y, row0.z)),
+                    det(mat2(row2.z, row2.x, row0.z, row0.x)),
+                    det(mat2(row2.x, row2.y, row0.x, row0.y))
+                );
+                vec3 minors2 = vec3(
+                    det(mat2(row0.y, row0.z, row1.y, row1.z)),
+                    det(mat2(row0.z, row0.x, row1.z, row1.x)),
+                    det(mat2(row0.x, row0.y, row1.x, row1.y))
+                );
+            
+                mat3 adj = transpose(mat3(minors0, minors1, minors2));
+            
+                return (1.0 / dot(row0, minors0)) * adj;
+            }
+            
+            void main(void) {
+            
+                vec3 dir = computeView(tc);
+                dir = inverse(mat3(viewMatrix)) * dir;
+                
+                vec2 ER = sphIntersect(camPos, dir, vec3(0.0), earthRadius);
+                
+                float bigRadius = earthRadius * 2.5;
+                vec3 bigCenter = normalize(camPos) * bigRadius * 1.3;                
+                               
+                vec2 BIG = sphIntersect(camPos, dir, bigCenter, bigRadius);
+                
+                float Ix = distance(camPos + dir * BIG.y, ZERO);               
+                
+                float maxI = sqrt(bigRadius * bigRadius + bigRadius * bigRadius);
+                                   
+                gl_FragColor = vec4(mix(colorOne, colorTwo, Ix / maxI), 1.0);
+            }`
+    });
+}
+
+export { SimpleSkyBackground };

package/src/og/control/Sun.js

@@ -123,8 +123,10 @@ class Sun extends Control {
                 var tr = Vec3.proj_b_to_plane(cam._r, n, cam._r)
                     .normalize()
                     .scale(this.offsetHorizontal); // right
+
                 var d = tu.add(tr);
                 var pos = cam.eye.add(d);
+
                 if (this._k > 0) {
                     this._k -= 0.01;
                     let rot = Quat.getRotationBetweenVectors(

package/src/og/control/ZoomControl.js

@@ -6,6 +6,17 @@
 
 import { Control } from "./Control.js";
 import { Key } from "../Lock.js";
+import { Button } from "../ui/Button.js";
+
+const ICON_PLUS_SVG = '<?xml version="1.0"?>' +
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">' +
+    '    <path d="M 11 5 L 11 11 L 5 11 L 5 13 L 11 13 L 11 19 L 13 19 L 13 13 L 19 13 L 19 11 L 13 11 L 13 5 L 11 5 z"/>' +
+    '</svg>';
+
+const ICON_MINUS_SVG = '<?xml version="1.0"?>' +
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">' +
+    '    <path d="M 5 11 L 5 13 L 19 13 L 19 11 L 5 11 z"/>' +
+    '</svg>';
 
 /**
  * Planet zoom buttons control.
@@ -19,57 +30,34 @@ class ZoomControl extends Control {
 
         this._keyLock = new Key();
 
-        this.planet = null;
-
         this._move = 0;
     }
 
     oninit() {
-        var zoomDiv = document.createElement("div"),
-            btnZoomIn = document.createElement("button"),
-            btnZoomOut = document.createElement("button");
-
-        zoomDiv.className = "ogZoomControl";
-        btnZoomIn.className = "ogZoomButton ogZoomIn";
-        btnZoomOut.className = "ogZoomButton ogZoomOut";
-
-        zoomDiv.appendChild(btnZoomIn);
-        zoomDiv.appendChild(btnZoomOut);
-
-        this.renderer.div.appendChild(zoomDiv);
-
-        btnZoomIn.addEventListener("mousedown", (e) => this.zoomIn());
-        btnZoomIn.addEventListener("mouseup", (e) => this.stopZoom());
 
-        btnZoomOut.addEventListener("mousedown", (e) => this.zoomOut());
-        btnZoomOut.addEventListener("mouseup", (e) => this.stopZoom());
-
-        btnZoomIn.addEventListener("touchstart", (e) => {
-            e.preventDefault();
-            this.zoomIn();
-        });
-        btnZoomIn.addEventListener("touchend", (e) => {
-            e.preventDefault();
-            this.stopZoom();
-        });
-        btnZoomIn.addEventListener("touchcancel", (e) => {
-            e.preventDefault();
-            this.stopZoom();
+        let zoomInBtn = new Button({
+            classList: ["og-map-button", "og-zoomin-button"],
+            icon: ICON_PLUS_SVG,
+            appendTo: this.renderer.div
         });
 
-        btnZoomOut.addEventListener("touchstart", (e) => {
-            e.preventDefault();
-            this.zoomOut();
-        });
-        btnZoomOut.addEventListener("touchend", (e) => {
-            e.preventDefault();
-            this.stopZoom();
-        });
-        btnZoomOut.addEventListener("touchcancel", (e) => {
-            e.preventDefault();
-            this.stopZoom();
+        let zoomOutBtn = new Button({
+            classList: ["og-map-button", "og-zoomout-button"],
+            icon: ICON_MINUS_SVG,
+            appendTo: this.renderer.div
         });
 
+        zoomInBtn.on("mousedown", (e) => this.zoomIn());
+        zoomInBtn.on("mouseup", (e) => this.stopZoom());
+        zoomOutBtn.on("mousedown", (e) => this.zoomOut());
+        zoomOutBtn.on("mouseup", (e) => this.stopZoom());
+        zoomInBtn.on("touchstart", (e) => this.zoomIn());
+        zoomInBtn.on("touchend", (e) => this.stopZoom());
+        zoomInBtn.on("touchcancel", (e) => this.stopZoom());
+        zoomOutBtn.on("touchstart", (e) => this.zoomOut());
+        zoomOutBtn.on("touchend", (e) => this.stopZoom());
+        zoomOutBtn.on("touchcancel", (e) => this.stopZoom());
+
         this.renderer.events.on("draw", this._draw, this);
     }
 

package/src/og/control/index.js

@@ -11,12 +11,15 @@ import { ToggleWireframe } from "./ToggleWireframe.js";
 import { TouchNavigation } from "./TouchNavigation.js";
 import { SimpleNavigation } from "./SimpleNavigation.js";
 import { Ruler } from "./ruler/Ruler.js";
+import { Selection } from "./selection/Selection.js";
 import { ShowFps } from "./ShowFps.js";
 import { Sun } from "./Sun.js";
 import { ZoomControl } from "./ZoomControl.js";
 import { MouseWheelZoomControl } from "./MouseWheelZoomControl.js";
 import { Lighting } from "./Lighting.js";
 import { LayerAnimation } from "./LayerAnimation.js";
+import { ScaleControl } from "./ScaleControl.js";
+import { SimpleSkyBackground } from "./SimpleSkyBackground.js";
 
 export {
     Control,
@@ -32,10 +35,13 @@ export {
     TouchNavigation,
     SimpleNavigation,
     ShowFps,
+    ScaleControl,
     Sun,
     ZoomControl,
     MouseWheelZoomControl,
     Lighting,
     Ruler,
+    SimpleSkyBackground,
+    Selection,
     LayerAnimation
 };

package/src/og/control/ruler/RulerScene.js

@@ -13,11 +13,6 @@ import { Object3d } from '../../Object3d.js';
 
 const OUTLINE_COUNT = 120;
 
-const MAX_SCALE = 0.005;
-const MIN_SCALE = 0.001;
-const MAX_SCALE_HEIGHT = 3000.0;
-const MIN_SCALE_HEIGHT = 19000000.0;
-
 function distanceFormat(v) {
     if (v > 1000) {
         return `${(v / 1000).toFixed(1)} km`;
@@ -83,9 +78,7 @@ class RulerScene extends RenderNode {
                     instanced: true,
                     tag: "ruler",
                     color: "rgb(0,305,0)",
-                    vertices: obj3d.vertices,
-                    indices: obj3d.indexes,
-                    normals: obj3d.normals
+                    object3d: obj3d
                 },
                 properties: {
                     name: "start"
@@ -97,14 +90,11 @@ class RulerScene extends RenderNode {
                     instanced: true,
                     tag: "ruler",
                     color: "rgb(455,0,0)",
-                    vertices: obj3d.vertices,
-                    indices: obj3d.indexes,
-                    normals: obj3d.normals
+                    object3d: obj3d
                 },
                 properties: {
                     name: "end"
                 }
-
             })
         ];
 
@@ -119,7 +109,9 @@ class RulerScene extends RenderNode {
         this._cornersLayer = new Vector("corners", {
             entities: [this._cornerEntity[0], this._cornerEntity[1]],
             pickingEnabled: true,
-            displayInLayerSwitcher: false
+            displayInLayerSwitcher: false,
+            scaleByDistance: [100, 4000000, 1.0],
+            pickingScale: 2
         });
     }
 
@@ -308,22 +300,12 @@ class RulerScene extends RenderNode {
         this._cornerEntity[1].geoObject.setVisibility(false);
     }
 
-    getScale(cart) {
-        let r = this.renderer;
-        let t = 1.0 - (r.activeCamera._lonLat.height - MAX_SCALE_HEIGHT) / (MIN_SCALE_HEIGHT - MAX_SCALE_HEIGHT);
-        let _distanceToCamera = cart.distance(r.activeCamera.eye);
-        return math.lerp(t < 0 ? 0 : t, MAX_SCALE, MIN_SCALE) * _distanceToCamera;
-    }
-
     frame() {
         let t = this._trackEntity.polyline.getPath3v()[0];
         if (t) {
             this._cornerEntity[0].setCartesian3v(t[0].clone());
             this._cornerEntity[1].setCartesian3v(t[t.length - 1].clone());
 
-            this._cornerEntity[0].geoObject.setScale(this.getScale(this._cornerEntity[0].getCartesian()));
-            this._cornerEntity[1].geoObject.setScale(this.getScale(this._cornerEntity[1].getCartesian()));
-
             if (!this._ignoreTerrain) {
                 let res = 0;
                 for (let i = 0, len = t.length - 1; i < len; i++) {

package/src/og/control/selection/Selection.js

@@ -0,0 +1,99 @@
+/**
+ * @module og/control/Selector
+ */
+
+"use strict";
+
+import { Control } from "../Control.js";
+import { SelectionScene } from "./SelectionScene.js";
+import { ToggleButton } from "../../ui/ToggleButton.js";
+
+const ICON_BUTTON_SVG = `<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--gis" preserveAspectRatio="xMidYMid meet"><path d="M2.1 0v1.914H0v6h3V3h5.1V0h-6zm9 0v3h6V0h-6zm9 0v3h6V0h-6zm9 0v3h6V0h-6zm9 0v3h6V0h-6zm9 0v3h6V0h-6zm9 0v3h6V0h-6zm9 0v3h1.8v1.2h3V0h-4.8zm1.8 7.2v6h3v-6h-3zM0 10.913v6h3v-6H0zM66.9 16.2v6h3v-6h-3zM0 19.914v6h3v-6H0zM66.9 25.2v6h3v-6h-3zM0 28.914v6h3v-6H0zM66.9 34.2v6h3v-6h-3zM0 37.914v6h3v-6H0zM66.9 43.2v6h3v-6h-3zM0 46.914v6h3v-6H0zM66.9 52.2v6h3v-6h-3zM0 55.914v5.191h3.809v-3H3v-2.19H0zm6.809 2.191v3h6v-3h-6zm9 0v3h6v-3h-6zm9 0v3h6v-3h-6zm9 0v3h6v-3h-6zm9 0v3h6v-3h-6zm9 0v3h6v-3h-6zm9 0v3h6v-3h-6zm9.648 1.899a2.076 2.076 0 0 0-2.19 2.324l3.137 33.676c.2 1.635 2.135 2.399 3.397 1.34l6.623-5.371l2.969 5.142c1.707 2.958 4.417 3.684 7.375 1.977c2.957-1.708 3.684-4.417 1.976-7.375l-2.959-5.125l7.848-3.008c1.548-.564 1.855-2.62.539-3.611L71.576 60.416a2.073 2.073 0 0 0-1.119-.412z" fill="#000000"></path></svg>`;
+
+/**
+ * Activate Selection
+ * @class
+ * @extends {Control}
+ * @param {Object} [options] - Control options.
+ * @param {boolean} [options.ignoreTerrain=false].
+ * @param {function} options.onSelect - callback (extent) => {} where extent is selected extent array [minLon,minLat,maxLon,maxLat]
+ * @param {boolean} [options.autoSelectionHide=false] - clear selection rectangle  after passing extent to callback
+ * @example:
+ * to use bootstrap icons, include
+ *  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css">
+ *
+ * new Selection({
+ *       ignoreTerrain: false,
+ *       autoSelectionHide:true,
+ *       onSelect: (extent) => {
+ *
+ *           var vectorSource = new ol.source.Vector({
+ *               format: new GeoJSON(),
+ *               url: function (extent) {
+ *                   return 'https://snap.ogs.trieste.it/geoserver/snap/ows?service=WFS&' +
+ *                           'version=1.1.0&request=GetFeature&typename=snap:all_dataset_segy_view&' +
+ *                           'outputFormat=application/json&srsname=EPSG:4326&' +
+ *                           'bbox=' + extent.join(',') + ',EPSG:4326';
+ *               },
+ *               strategy: function (extent, resolution) {
+ *                   if (this.resolution && this.resolution != resolution) {
+ *                       this.loadedExtentsRtree_.clear();
+ *                   }
+ *                   return [extent];
+ *               }
+ *           });
+ *
+ *           vectorSource.loadFeatures(extent);
+ *           
+ *           console.log(extent);
+ *
+ *       }
+ *   });
+ */
+class Selection extends Control {
+    constructor(options = {}) {
+        super(options);
+
+        this._selectorScene = new SelectionScene({
+            name: `selectionScene:${this._id}`,
+            ignoreTerrain: options.ignoreTerrain,
+            onSelect: options.onSelect,
+            autoSelectionHide: options.autoSelectionHide
+        });
+
+
+        this._toggleBtn = new ToggleButton({
+            classList: ["og-map-button", "og-selection_button"],
+            icon: ICON_BUTTON_SVG
+        });
+    }
+
+    set ignoreTerrain(v) {
+        this._selectorScene.ignoreTerrain = v;
+    }
+
+    oninit() {
+        this._toggleBtn.appendTo(this.renderer.div);
+
+        this._toggleBtn.on("change", (isActive) => {
+            if (isActive) {
+                this.activate();
+            } else {
+                this.deactivate();
+            }
+        });
+
+        this._selectorScene.bindPlanet(this.planet);
+    }
+
+    onactivate() {
+        this.renderer.addNode(this._selectorScene);
+    }
+
+    ondeactivate() {
+        this.renderer.removeNode(this._selectorScene);
+    }
+}
+
+export { Selection };