@openglobus/og 0.14.2 → 0.14.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openglobus/og",
-  "version": "0.14.2",
+  "version": "0.14.4",
   "description": "[OpenGlobus](https://www.openglobus.org/) is a javascript library designed to display interactive 3d maps and planets with map tiles, imagery and vector data, markers and 3d objects. It uses the WebGL technology, open source and completely free.",
   "directories": {
     "example": "./sandbox"

package/src/og/camera/Camera.js

@@ -321,7 +321,7 @@ class Camera {
         this._tanViewAngle_hradOneByHeight =
             this._tanViewAngle_hrad * this.renderer.handler._oneByHeight;
         var c = this.renderer.handler.canvas;
-        this._projSizeConst = Math.min(c.clientWidth < 256 ? 256 : c.clientWidth, c.clientHeight < 256 ? 256 : c.clientHeight) / (angle * math.RADIANS);
+        this._projSizeConst = Math.min(c.clientWidth < 512 ? 512 : c.clientWidth, c.clientHeight < 512 ? 512 : c.clientHeight) / (angle * math.RADIANS);
         for (let i = 0, len = this.frustums.length; i < len; i++) {
             this.frustums[i].setProjectionMatrix(
                 angle,

package/src/og/camera/PlanetCamera.js

@@ -37,14 +37,14 @@ class PlanetCamera extends Camera {
      */
     constructor(planet, options) {
         super(planet.renderer, {
-            frustums: [
-                [1, 100 + 0.075],
-                [100, 1000 + 0.075],
-                [1000, 1e6 + 10000],
-                [1e6, 1e9]
-            ], //[[1, 1e3 + 100], [1e3, 1e6 + 10000], [1e6, 1e9]]*/
-            ...options
-        }
+                frustums: [
+                    [1, 100 + 0.075],
+                    [100, 1000 + 0.075],
+                    [1000, 1e6 + 10000],
+                    [1e6, 1e9]
+                ], //[[1, 1e3 + 100], [1e3, 1e6 + 10000], [1e6, 1e9]]*/
+                ...options
+            }
         );
         /**
          * Assigned camera's planet.
@@ -120,6 +120,11 @@ class PlanetCamera extends Camera {
         this._numFrames = 50;
         this._completeCallback = null;
         this._flying = false;
+        this._checkTerrainCollision = true;
+    }
+
+    setTerrainCollisionActivity(isActive) {
+        this._checkTerrainCollision = isActive;
     }
 
     /**
@@ -363,7 +368,10 @@ class PlanetCamera extends Camera {
      * @param {cameraCallback} [startCallback] - Callback that calls befor the flying begins.
      * @param [frameCallback]
      */
-    flyCartesian(cartesian, look = Vec3.ZERO, up = Vec3.UP, ampl = 1.0, completeCallback = () => { }, startCallback = () => { }, frameCallback = () => { }) {
+    flyCartesian(cartesian, look = Vec3.ZERO, up = Vec3.UP, ampl = 1.0, completeCallback = () => {
+    }, startCallback = () => {
+    }, frameCallback = () => {
+    }) {
 
         this.stopFlying();
 
@@ -620,7 +628,7 @@ class PlanetCamera extends Camera {
                 this._insideSegmentPosition,
                 this._terrainPoint
             );
-            if (this._terrainAltitude < this.minAltitude) {
+            if (this._terrainAltitude < this.minAltitude && this._checkTerrainCollision) {
                 this.setAltitude(this.minAltitude);
             }
         }
@@ -634,9 +642,9 @@ class PlanetCamera extends Camera {
     getHeading() {
         let u = this.eye.normal();
         let f = Vec3.proj_b_to_plane(
-            this.slope >= 0.97 ? this.getUp() : this.getForward(),
-            u
-        ).normalize(),
+                this.slope >= 0.97 ? this.getUp() : this.getForward(),
+                u
+            ).normalize(),
             n = Vec3.proj_b_to_plane(Vec3.UP, u).normalize();
         let res = Math.sign(u.dot(f.cross(n))) * Math.acos(f.dot(n)) * math.DEGREES;
         if (res < 0.0) {

package/src/og/control/UIhelpers.js

@@ -108,12 +108,16 @@ function isString(v) {
 }
 
 // Handles the click inside/outside a dialog - closes dialog when click outside
-export function btnClickHandler(btn_id, dialog_id, dialog_selector, btn_icon_id) {
+export function btnClickHandler(btn_id, dialog_id, dialog_selector, btn_icon_id, callback) {
     let btn = isString(btn_id) ? document.getElementById(btn_id) : btn_id;
     let dialog = document.getElementById(dialog_id);
     btn.onclick = function (e) {
+        
+        let off = true;
+        
         if (this.classList.contains('og-OFF')) {
             // Turn to ON
+            off = false;
             allMenuBtnOFF();
             allDialogsHide();
             this.classList.remove('og-OFF');
@@ -137,10 +141,15 @@ export function btnClickHandler(btn_id, dialog_id, dialog_selector, btn_icon_id)
             }
         } else {
             // Turn to OFF
+            off = true;
             this.classList.add('og-OFF');
             if (dialog) {
                 dialog.classList.add('og-hide');
             }
         }
+        
+        if (callback && typeof callback === 'function'){
+            callback(off);
+        }
     }
-}
+}

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/selection/Selection.js

@@ -0,0 +1,128 @@
+/**
+ * @module og/control/Selector
+ */
+
+"use strict";
+
+import { Control } from "../Control.js";
+import { elementFactory, btnClickHandler } from "../UIhelpers.js";
+import { SelectionScene } from "./SelectionScene.js";
+
+
+/**
+ * Activate Selection
+ * @class 
+ * @extends {Control}
+ * @param {Object} [options] - Control options.
+ * @param {Array} [options.activationIconClasses] - array with a list of classes to change the button icons
+ * @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({
+ *       activationIconClasses: ['bi', 'bi-bounding-box-circles'],
+ *       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._activationIconClasses = options.activationIconClasses || null;
+      
+        this._selectorScene = new SelectionScene({
+            name: `selectionScene:${this._id}`,
+            ignoreTerrain: options.ignoreTerrain,
+            onSelect: options.onSelect,
+            autoSelectionHide: options.autoSelectionHide
+        });
+        
+        
+        
+    }
+
+    set ignoreTerrain(v) {
+        this._selectorScene.ignoreTerrain = v;
+    }
+
+    oninit() {
+        this.createSelectorButton();
+
+
+        
+        btnClickHandler('og-selection-menu-btn', null, null, 
+            '#og-selection-menu-icon',
+            (off) => {
+                if (off){
+                    this.deactivate();
+                }  else {
+                    this.activate();
+                }
+            });
+        
+        this._selectorScene.bindPlanet(this.planet);
+    }
+
+    onactivate() {
+        this.renderer.addNode(this._selectorScene);
+    }
+
+    ondeactivate() {
+        this.renderer.removeNode(this._selectorScene);
+    }
+
+    createSelectorButton() {
+        let btnIcon  = 
+                elementFactory('div',
+                    {id: 'og-selection-menu-icon', class: 'og-icon-holder'});
+                    
+       btnIcon.setAttribute("style", "font-size:24px; display: flex; justify-content: center; align-items: center; background: none !important");
+       
+        if (this._activationIconClasses){
+            btnIcon.classList.add(... this._activationIconClasses);
+        } else {
+            let defaultIcon = document.createElement("span");
+            defaultIcon.setAttribute("style", "width: 24px;height: 24px;border: 1px solid black;");
+            btnIcon.appendChild(defaultIcon);
+        }
+        
+        let btn = elementFactory('div', {
+            id: 'og-selection-menu-btn',
+            class: 'og-geo-image-dragger og-menu-btn og-OFF'
+        },btnIcon);
+        
+        btn.setAttribute("style", "top: 116px; right: 12px");
+      
+        
+        this.renderer.div.appendChild(btn);
+    }
+
+}
+
+export { Selection };

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

@@ -0,0 +1,364 @@
+'use strict';
+
+import * as math from '../../math.js';
+import { RenderNode } from '../../scene/RenderNode.js';
+import { Events } from '../../Events.js';
+import { LonLat } from '../../LonLat.js';
+import { Vec3 } from '../../math/Vec3.js';
+import { Vec2 } from '../../math/Vec2.js';
+import { Vector } from '../../layer/Vector.js';
+import { Entity } from '../../entity/Entity.js';
+import { Ellipsoid } from '../../ellipsoid/Ellipsoid.js';
+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`;
+    } else if (v > 9) {
+        return `${Math.round(v)} m`;
+    } else {
+        return `${v.toFixed(1)} m`;
+    }
+}
+
+class SelectionScene extends RenderNode {
+    constructor(options = {}) {
+        super(options.name);
+
+        this.events = new Events(EVENT_NAMES);
+
+        this._ignoreTerrain = options.ignoreTerrain != undefined ? options.ignoreTerrain : true;
+
+        this._onSelect = options.onSelect || null;
+
+        this._autoSelectionHide = options.autoSelectionHide || false;
+
+        this._planet = options.planet || null;
+
+        this._startLonLat = null;
+
+        this._heading = 0;
+
+        this._propsLabel = new Entity({
+            'name': 'propsLabel',
+            'label': {
+                text: "",
+                size: 11,
+                color: "rgba(455,455,455,1.0)",
+                outlineColor: "rgba(0,0,0,0.34)",
+                outline: 0.23,
+                align: "center",
+                offset: [0, 18]
+            }
+        });
+
+        this._propsLabel.label.setVisibility(false);
+
+        this._trackEntity = new Entity({
+            polyline: {
+                path3v: [],
+                thickness: 3.8,
+                color: "rgb(455,455,455)",
+                isClosed: false
+            }
+        });
+
+        this._trackEntity.polyline.altitude = 0.01;
+
+        let obj3d = Object3d.createCylinder(1.1, 0, 2.7, 20, 1, true, false, 0, 0, 0)
+
+        this._cornerEntity = [
+            new Entity({
+                geoObject: {
+                    scale: 1,
+                    instanced: true,
+                    tag: "ruler",
+                    color: "rgb(0,305,0)",
+                    vertices: obj3d.vertices,
+                    indices: obj3d.indexes,
+                    normals: obj3d.normals
+                },
+                properties: {
+                    name: "start"
+                }
+            }),
+            new Entity({
+                geoObject: {
+                    scale: 1,
+                    instanced: true,
+                    tag: "ruler",
+                    color: "rgb(455,0,0)",
+                    vertices: obj3d.vertices,
+                    indices: obj3d.indexes,
+                    normals: obj3d.normals
+                },
+                properties: {
+                    name: "end"
+                }
+
+            })
+        ];
+
+        this._trackLayer = new Vector("track", {
+            entities: [this._trackEntity, this._propsLabel],
+            pickingEnabled: false,
+            polygonOffsetUnits: -1.0,
+            relativeToGround: true,
+            displayInLayerSwitcher: false
+        });
+
+        this._cornersLayer = new Vector("corners", {
+            entities: [this._cornerEntity[0], this._cornerEntity[1]],
+            pickingEnabled: true,
+            displayInLayerSwitcher: false
+        });
+    }
+
+    set ignoreTerrain(v) {
+        this._ignoreTerrain = v;
+        if (v) {
+            //...redraw line
+        }
+    }
+
+    bindPlanet(planet) {
+        this._planet = planet;
+    }
+
+    init() {
+        this._activate();
+    }
+
+    onremove() {
+        this._deactivate();
+    }
+
+    _activate() {
+        this._propsLabel.label.setVisibility(false);
+
+        this._onMouseMove_ = this._onMouseMove.bind(this);
+        this.renderer.events.on("mousemove", this._onMouseMove_, this);
+
+        this._onMouseLdown_ = this._onMouseLdown.bind(this);
+        this.renderer.events.on("ldown", this._onMouseLdown_, this);
+
+        this._onMouseLup_ = this._onMouseLup.bind(this);
+        this.renderer.events.on("lup", this._onMouseLup_, this);
+
+        this._planet.addLayer(this._trackLayer);
+        this._planet.addLayer(this._cornersLayer);
+
+    }
+
+    _deactivate() {
+        this._startLonLat = null;
+        this._trackLayer.remove();
+        this._cornersLayer.remove();
+        this.renderer.events.off("mousemove", this._onMouseMove_);
+        this.renderer.events.off("ldown", this._onMouseLdown_);
+        this.renderer.events.off("lup", this._onMouseLup_);
+
+        this.clear();
+
+        this._onMouseMove_ = null;
+        this._onMouseLdown_ = null;
+        this._onMouseLup_ = null;
+    }
+
+    _onMouseLdown(e) {
+
+        //workaround to show pointer, because ogGrabbingPoiner keep !importanti which override pointer style
+        e.renderer.handler.canvas.classList.remove('ogGrabbingPoiner');
+
+        e.renderer.handler.canvas.style.cursor = 'pointer';
+
+        if (!this._startLonLat) {
+
+
+
+            this._propsLabel.label.setVisibility(false);
+
+            this._trackEntity.polyline.setPath3v([]);
+
+
+
+            this._cornerEntity[0].geoObject.setVisibility(true);
+            this._cornerEntity[1].geoObject.setVisibility(true);
+
+            this.renderer.controls.mouseNavigation.deactivate();
+            this._startLonLat = this._planet.getLonLatFromPixelTerrain(e);
+            
+            let startPos = this._planet.ellipsoid.lonLatToCartesian(this._startLonLat);
+            this._cornerEntity[0].setCartesian3v(startPos);
+            this._cornerEntity[1].setCartesian3v(startPos);
+        }
+    }
+
+    _onMouseLup(e) {
+        if (this._startLonLat) {
+
+            this._pickedCorner = null;
+            this._anchorLonLat = null;
+
+            if (this._onSelect && typeof this._onSelect === 'function') {
+                let startLonLat = this._cornerEntity[0].getLonLat();
+                let endLonLat = this._cornerEntity[1].getLonLat();
+
+                let extent = [
+                    Math.min(startLonLat.lon, endLonLat.lon),
+                    Math.min(startLonLat.lat, endLonLat.lat),
+                    Math.max(startLonLat.lon, endLonLat.lon),
+                    Math.max(startLonLat.lat, endLonLat.lat)
+                ];
+                this._onSelect(extent);
+            }
+
+            if (this._autoSelectionHide) {
+                this.clear();
+            }
+
+            this._startLonLat = null;
+        }
+        e.renderer.handler.canvas.style.cursor = 'default';
+        this.renderer.controls.mouseNavigation.activate();
+    }
+
+    _drawLine(startLonLat, endLonLat, startPos) {
+
+        if (!startPos) {
+            startPos = this._planet.ellipsoid.lonLatToCartesian(startLonLat);
+        }
+
+        let endPos = this._planet.ellipsoid.lonLatToCartesian(endLonLat);
+
+        let length = this._planet.ellipsoid.getGreatCircleDistance(startLonLat, endLonLat);
+
+        this._heading = Ellipsoid.getRhumbBearing(startLonLat, endLonLat);
+
+        let path = [];
+
+
+        this._cornerEntity[0].setCartesian3v(startPos);
+        this._cornerEntity[1].setCartesian3v(endPos);
+
+
+        let corners = [
+            startPos,
+            this._planet.ellipsoid.lonLatToCartesian(new LonLat(endLonLat.lon, startLonLat.lat, startLonLat.height)),
+            endPos,
+            this._planet.ellipsoid.lonLatToCartesian(new LonLat(startLonLat.lon, endLonLat.lat, startLonLat.height)),
+            startPos
+        ];
+
+
+        path.push(startPos);
+
+        let createPath = (sideA, sideB) => {
+            let dir = sideB.sub(sideA);
+            let dist = dir.length();
+            dir.normalize();
+
+            for (let i = 0; i < OUTLINE_COUNT; i++) {
+                let f = dir.scaleTo(i * dist / OUTLINE_COUNT).addA(sideA);
+                path.push(f);
+            }
+        };
+
+        for (let i = 0; i < corners.length - 1; i++) {
+            createPath(corners[i], corners[i + 1]);
+        }
+
+        this._trackEntity.polyline.setPath3v([path]);
+
+        if (this._ignoreTerrain) {
+//            this._propsLabel.setCartesian3v(path[Math.floor(path.length / 2)]);
+//            this._propsLabel.label.setText(`${distanceFormat(length)}, ${Math.round(this._heading)} deg`);
+        }
+    }
+
+    _onMouseMove(e) {
+        if (this._startLonLat) {
+            this._propsLabel.label.setVisibility(true);
+            let endLonLat = this._planet.getLonLatFromPixelTerrain(e);
+            if (!endLonLat)
+                return;
+            this._drawLine(this._startLonLat, endLonLat);
+        }
+    }
+
+    clear() {
+        this._trackEntity.polyline.clear();
+        this._cornerEntity[0].geoObject.setVisibility(false);
+        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].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++) {
+                    res += t[i + 1].distance(t[i]);
+                }
+
+//                this._propsLabel.setCartesian3v(t[Math.floor(t.length / 2)]);
+//                this._propsLabel.label.setText(`${distanceFormat(res)}, ${Math.round(this._heading)} deg`);
+            }
+
+
+        }
+    }
+
+    get ellipsoid() {
+        return this._planet ? this._planet.ellipsoid : null;
+    }
+}
+
+const EVENT_NAMES = [
+    "add",
+    "remove",
+    "mousemove",
+    "mouseenter",
+    "mouseleave",
+    "lclick",
+    "rclick",
+    "mclick",
+    "ldblclick",
+    "rdblclick",
+    "mdblclick",
+    "lup",
+    "rup",
+    "mup",
+    "ldown",
+    "rdown",
+    "mdown",
+    "lhold",
+    "rhold",
+    "mhold",
+    "mousewheel",
+    "touchmove",
+    "touchstart",
+    "touchend",
+    "doubletouch",
+    "touchleave",
+    "touchenter"
+];
+
+export { SelectionScene };

package/src/og/ellipsoid/Ellipsoid.js

@@ -359,9 +359,9 @@ class Ellipsoid {
      */
     projToSurface(p) {
 
-        let pX = p.x,
-            pY = p.y,
-            pZ = p.z;
+        let pX = p.x || 0.0,
+            pY = p.y || 0.0,
+            pZ = p.z || 0.0;
 
         let invRadii2X = this._invRadii2.x,
             invRadii2Y = this._invRadii2.y,
@@ -621,4 +621,4 @@ class Ellipsoid {
     }
 }
 
-export { Ellipsoid };
+export { Ellipsoid };

package/src/og/entity/Entity.js

@@ -338,9 +338,9 @@ class Entity {
     setCartesian(x, y, z) {
         let p = this._cartesian;
 
-        p.x = isNaN(x) ? 0 : x;
-        p.y = isNaN(y) ? 0 : y;
-        p.z = isNaN(z) ? 0 : z;
+        p.x = x || 0.0;
+        p.y = y || 0.0;
+        p.z = z || 0.0;
 
         // billboards
         this.billboard && this.billboard.setPosition3v(p);
@@ -382,9 +382,9 @@ class Entity {
     _setCartesian3vSilent(cartesian, skipLonLat) {
         let p = this._cartesian;
 
-        p.x = cartesian.x;
-        p.y = cartesian.y;
-        p.z = cartesian.z;
+        p.x = cartesian.x || 0.0;
+        p.y = cartesian.y || 0.0;
+        p.z = cartesian.z || 0.0;
 
         // billboards
         this.billboard && this.billboard.setPosition3v(p);