@openglobus/og 0.13.4 → 0.13.7

package/src/og/control/EarthCoordinates.js

@@ -1,64 +1,36 @@
-/**
- * @module og/control/EarthCoordinates
- */
+'use strict';
 
-"use strict";
-
-import { Control } from "./Control.js";
-
-function dec2deg(base) {
-    var t;
-    var degrees = base < 0 ? Math.ceil(base) : Math.floor(base);
-    var minutes = Math.floor((t = Math.abs(base - degrees) * 60));
-    var seconds = Math.floor((t - minutes) * 6000);
-    seconds = seconds / 100.0;
-    return (
-        numToFixedString(degrees, 3) +
-        "\u00B0" +
-        numToFixedString(minutes, 2) +
-        "\u0027" +
-        numToFixedString(seconds.toFixed(2), 2) +
-        "\u0022"
-    );
-}
+import * as units from '../utils/units.js';
+import { heightMode } from '../utils/units.js';
+import { Control } from './Control.js';
+import { throttle } from '../utils/shared.js';
+import { LonLat } from '../LonLat.js';
 
-function numToFixedString(num, fixed) {
-    var dl = num.toString().split(".")[0].length;
-    var white = "&nbsp;";
-    for (var i = dl; i < fixed; i++) {
-        white += "&nbsp;&nbsp;";
-    }
-    return white + num.toString();
-}
+const DECIMAL_TEMPLATE =
+    `<div class="og-lat-side"></div><div class="og-lat-val"></div>
+    <div class="og-lon-side"></div><div class="og-lon-val"></div>
+    <div class="og-height"></div>
+    <div class="og-units-height"></div>`;
 
-function toDecimal(ll) {
-    return ll.lat.toFixed(5) + ", " + ll.lon.toFixed(5);
-}
+const DEGREE_TEMPLATE =
+    `<div class="og-lat-side"></div><div class="og-lat-val"></div>
+    <div class="og-lon-side"></div><div class="og-lon-val"></div>
+    <div class="og-height"></div>
+    <div class="og-units-height"></div>`;
 
-function toDegrees(ll) {
-    return dec2deg(ll.lat) + ", " + dec2deg(ll.lon);
-}
+const CENTER_SVG = '<svg width="12" height="12"><g><path stroke-width="1" stroke-opacity="1" d="M6 0L6 12M0 6L12 6" stroke="#337ab7"></path></g></svg>';
 
-function toMercator(ll) {
-    var m = ll.forwardMercator();
-    return m.lat.toFixed(5) + ", " + m.lon.toFixed(5);
-}
-
-const DisplayTypesConverters = [toDecimal, toDegrees, toMercator];
+const TYPE_HTML = [DECIMAL_TEMPLATE, DEGREE_TEMPLATE];
 
 /**
  * Control displays mouse or screen center Earth coordinates.
  * @class
- * @extends {Control}
+ * @extends {og.control.Control}
  * @param {Object} [options] - Options:
  * @param {Boolean} [options.center] - Earth coordiantes by screen center otherwise mouse pointer. False is default.
  * @param {Boolean} [options.type] - Coordinates shown: 0 - is decimal degrees, 1 - degrees, 2 - mercator geodetic coordinates.
  */
 class EarthCoordinates extends Control {
-    /**
-     *
-     * @param {Object} [options] - Options:
-     */
     constructor(options) {
         super(options);
 
@@ -69,154 +41,173 @@ class EarthCoordinates extends Control {
          * @private
          * @type {Boolean}
          */
-        this._displayType = options.type || 0;
+        this._type = options.type || 0;
 
-        /**
-         * Current coordinates type converter.
-         * @private
-         * @function
-         */
-        this._converter = DisplayTypesConverters[0];
+        this._TYPE_FUNC = [this._SHOW_DECIMAL, this._SHOW_DEGREE];
 
-        /**
-         * Display dom element.
-         * @private
-         * @type {Object}
-         */
-        this._display = null;
+        this._showFn = null;
 
         /**
-         * Screen center or mouse pointer coordinates show flag.
-         * @private
-         * @type {Boolean}
+         * Current position.
+         * @public
+         * @type {og.Vec3}
          */
+        this._lonLat = new LonLat();
 
-        var pad = false;
-        if (
-            /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
-                navigator.userAgent
-            )
-        ) {
-            pad = true;
-        }
+        this._latSideEl = null;
+        this._lonSideEl = null;
+        this._latValEl = null;
+        this._lonValEl = null;
+        this._heightEl = null;
 
-        this._center = options.center || pad;
+        this._altUnitVal = options.altitudeUnit || "m";
+        this._heightModeVal = options.heightMode || "ell";
 
-        this._centerDiv = null;
+        this._altUnit = units[this._altUnitVal];
+        this._heightMode = heightMode[this._heightModeVal];
 
-        /**
-         * Current position.
-         * @public
-         * @type {Vec3}
-         */
-        this.position = null;
+        this._centerMode = options.centerMode || false;
     }
 
-    oninit() {
-        this._display = document.createElement("div");
-        this._display.className = "ogEarthCoordinatesControl";
-        var that = this;
+    _SHOW_DECIMAL(ll) {
+        if (ll) {
+            let lat = ll.lat,
+                lon = ll.lon;
 
-        function _refresh(el) {
-            if (that._displayType >= DisplayTypesConverters.length) {
-                that._displayType = 0;
+            if (lat >= 0) {
+                this._latSideEl.innerHTML = 'N';
+            } else {
+                this._latSideEl.innerHTML = 'S';
             }
 
-            if (that._displayType == 0) {
-                el.style.width = "275px";
-            } else if (that._displayType == 1) {
-                el.style.width = "355px";
-            } else if (that._displayType == 2) {
-                el.style.width = "350px";
+            if (lon >= 0) {
+                this._lonSideEl.innerHTML = 'E';
+            } else {
+                this._lonSideEl.innerHTML = 'W';
             }
-            that._converter = DisplayTypesConverters[that._displayType];
-            that._showPosition();
+
+            this._latValEl.innerHTML = Math.abs(lat).toFixed(5) + '°';
+            this._lonValEl.innerHTML = Math.abs(lon).toFixed(5) + '°';
         }
+    }
 
-        this._display.onclick = function (e) {
-            that._displayType += 1;
-            _refresh(this);
-        };
+    _SHOW_DEGREE(ll) {
+        if (ll) {
+            let lat = ll.lat,
+                lon = ll.lon;
 
-        this.renderer.div.appendChild(this._display);
+            if (lat >= 0) {
+                this._latSideEl.innerHTML = 'N';
+            } else {
+                this._latSideEl.innerHTML = 'S';
+            }
+
+            if (lon >= 0) {
+                this._lonSideEl.innerHTML = 'E';
+            } else {
+                this._lonSideEl.innerHTML = 'W';
+            }
 
-        _refresh(this._display);
+            let t = 0;
 
-        this._centerDiv = document.createElement("div");
-        this._centerDiv.className = "ogCenterIcon";
-        this._centerDiv.innerHTML =
-            '<svg width="12" height="12"><g><path stroke-width="1" stroke-opacity="1" d="M6 0L6 12M0 6L12 6" stroke="#009DFF"></path></g></svg>';
-        this.renderer.div.appendChild(this._centerDiv);
+            let deg = lat < 0 ? Math.ceil(lat) : Math.floor(lat);
+            let min = Math.floor(t = Math.abs((lat - deg)) * 60);
+            let sec = Math.floor((t - min) * 6000) / 100.0;
+            this._latValEl.innerHTML = Math.abs(deg) + '°' + min + "'" + sec.toFixed(0) + '"';
 
-        if (this._center) {
-            this.renderer.activeCamera.events.on("moveend", this._grabCoordinates, this);
-            this._centerDiv.style.display = "block";
-        } else {
-            this.renderer.events.on("mousemove", this._onMouseMove, this);
-            this._centerDiv.style.display = "none";
+            deg = lon < 0 ? Math.ceil(lon) : Math.floor(lon);
+            min = Math.floor(t = Math.abs((lon - deg)) * 60);
+            sec = Math.floor((t - min) * 6000) / 100.0;
+            this._lonValEl.innerHTML = Math.abs(deg) + '°' + min + "'" + sec.toFixed(0) + '"';
         }
     }
 
-    /**
-     * Sets coordinates capturing type.
-     * @public
-     * @param {Boolean} center - True - capture screen center, false - mouse pointer.
-     */
-    setCenter(center) {
-        if (center != this._center) {
-            this._center = center;
-            if (center) {
-                this.renderer.events.off("mousemove", this._onMouseMove);
-                this.renderer.activeCamera.events.on("moveend", this._grabCoordinates, this);
-                this._centerDiv.style.display = "block";
-            } else {
-                this.renderer.events.off("draw", this._draw);
-                this.renderer.events.on("mousemove", this._onMouseMove, this);
-                this._centerDiv.style.display = "none";
-            }
+    _createCenterEl() {
+        let el = document.createElement('div');
+        el.className = 'og-center-icon';
+        el.innerHTML = CENTER_SVG;
+        return el;
+    }
+
+    _updateUnits() {
+        this._heightMode = heightMode[this._heightModeVal];
+        this._altUnit = units[this._altUnitVal];
+        this._el.querySelector(".og-units-height").innerHTML = units.toString(this._altUnit);
+        this._showHeight();
+    }
+
+    _refreshCoordinates() {
+
+        if (this._type >= this._TYPE_FUNC.length) {
+            this._type = 0;
         }
+
+        this._el.innerHTML = TYPE_HTML[this._type];
+
+        this._latSideEl = this._el.querySelector(".og-lat-side");
+        this._lonSideEl = this._el.querySelector(".og-lon-side");
+        this._latValEl = this._el.querySelector(".og-lat-val");
+        this._lonValEl = this._el.querySelector(".og-lon-val");
+        this._heightEl = this._el.querySelector(".og-height");
+
+        this._showFn = this._TYPE_FUNC[this._type];
+        this._showFn(this._lonLat);
     }
 
-    _showPosition() {
-        if (this.position) {
-            this.position.height =
-                this.position.height > 10000 || this.position.height < -10000
-                    ? 0
-                    : this.position.height;
-            this._display.innerHTML =
-                "Lat/Lon: " +
-                this._converter(this.position) +
-                " h(m): " +
-                (this.position.height > 0
-                    ? "~" + (Math.round(this.position.height) / 1000).toFixed(3) * 1000
-                    : "-");
+    oninit() {
+        this._el = document.createElement('div');
+        this._el.classList.add("og-coordinates");
+
+        this.renderer.div.appendChild(this._el);
+
+        this._el.addEventListener("click", () => {
+            this._type++;
+            this._refreshCoordinates();
+            this._updateUnits();
+            this._showHeight();
+        });
+
+        if (this._centerMode) {
+            this.renderer.div.appendChild(this._createCenterEl());
+            this.renderer.activeCamera.events.on("moveend", this._grabCoordinates, this);
+            this.renderer.activeCamera.events.on("moveend", throttle((e) => this._showHeight(), 400, true), this);
         } else {
-            this._display.innerHTML = "Lat/Lon: " + "_____________________";
+            this.renderer.events.on("mousemove", this._grabCoordinates, this);
+            this.renderer.events.on("mousestop", throttle((e) => this._showHeight(), 400, true), this);
         }
-    }
 
-    _grabCoordinates() {
-        var r = this.renderer;
-        this.position = this.planet.getLonLatFromPixelTerrain(r.handler.getCenter());
-        this._showPosition();
+        this._refreshCoordinates();
+
+        this._updateUnits();
     }
 
-    _onMouseMove() {
-        var r = this.renderer;
-        var ms = r.events.mouseState;
-        if (
-            !(ms.leftButtonDown || ms.rightButtonDown) &&
-            r.controlsBag.scaleRot <= 0 &&
-            !r.activeCamera._flying
-        ) {
-            this.position = this.planet.getLonLatFromPixelTerrain(ms, true);
-            this._showPosition();
+    _grabCoordinates(px) {
+        let scrPx;
+        if (this._centerMode) {
+            scrPx = r.handler.getCenter();
+        } else {
+            scrPx = px;
         }
+        let r = this.renderer;
+        this._lonLat = this.planet.getLonLatFromPixelTerrain(scrPx);
+        this._showFn(this._lonLat);
     }
-}
 
-export function earthCoordinates(options) {
-    return new EarthCoordinates(options);
+    async _showHeight() {
+        if (this._lonLat) {
+            let alt = 0;
+            this._heightEl.style.opacity = 0.7;
+            if (this._heightMode === heightMode.ell) {
+                alt = await this.planet.getHeightAboveELL(this._lonLat);
+                alt = units.convertExt(true, units.m, this._altUnit, alt);
+            } else if (this._heightMode === heightMode.msl) {
+                alt = await this.planet.getHeightDefault(this._lonLat);
+                alt = units.convertExt(true, units.m, this._altUnit, alt);
+            }
+            this._heightEl.style.opacity = 1.0;
+            this._heightEl.innerHTML = alt.toString();
+        }
+    }
 }
 
 export { EarthCoordinates };

package/src/og/control/KeyboardNavigation.js

@@ -24,16 +24,22 @@ class KeyboardNavigation extends Control {
     }
 
     oninit() {
+        this.renderer.events.on("keypress", input.KEY_PGUP, this.onCameraMoveForward, this);
+        this.renderer.events.on("keypress", input.KEY_PGDN, this.onCameraMoveBackward, this);
+        this.renderer.events.on("keypress", input.KEY_PLUS, this.onCameraMoveForward, this);
+        this.renderer.events.on("keypress", input.KEY_EQUALS, this.onCameraMoveForward, this);
+        this.renderer.events.on("keypress", input.KEY_MINUS, this.onCameraMoveBackward, this);
         this.renderer.events.on("keypress", input.KEY_W, this.onCameraMoveForward, this);
         this.renderer.events.on("keypress", input.KEY_S, this.onCameraMoveBackward, this);
         this.renderer.events.on("keypress", input.KEY_A, this.onCameraStrifeLeft, this);
         this.renderer.events.on("keypress", input.KEY_D, this.onCameraStrifeRight, this);
         this.renderer.events.on("keypress", input.KEY_UP, this.onCameraLookUp, this);
         this.renderer.events.on("keypress", input.KEY_DOWN, this.onCameraLookDown, this);
-        this.renderer.events.on("keypress", input.KEY_LEFT, this.onCameraTurnLeft, this);
-        this.renderer.events.on("keypress", input.KEY_RIGHT, this.onCameraTurnRight, this);
+        this.renderer.events.on("keypress", input.KEY_LEFT, this.onCameraLookLeft, this);
+        this.renderer.events.on("keypress", input.KEY_RIGHT, this.onCameraLookRight, this);
         this.renderer.events.on("keypress", input.KEY_Q, this.onCameraRollLeft, this);
         this.renderer.events.on("keypress", input.KEY_E, this.onCameraRollRight, this);
+        this.renderer.events.on("keypress", input.KEY_N, this.onCameraRollNorth, this);
     }
 
     onCameraMoveForward(event) {
@@ -84,6 +90,26 @@ class KeyboardNavigation extends Control {
         cam.update();
     }
 
+    onCameraLookLeft(event) {
+        var cam = this.renderer.activeCamera;
+        if (this.renderer.events.isKeyPressed(input.KEY_SHIFT)) {
+            cam.roll(15 / this.renderer.handler.deltaTime);
+        } else {
+            cam.rotateHorizontal((cam._lonLat.height / 3000000) * math.RADIANS, Vec3.ZERO);
+        }
+        cam.update();
+    }
+
+    onCameraLookRight(event) {
+        var cam = this.renderer.activeCamera;
+        if (this.renderer.events.isKeyPressed(input.KEY_SHIFT)) {
+            cam.roll(-15 / this.renderer.handler.deltaTime);
+        } else {
+            cam.rotateHorizontal((-cam._lonLat.height / 3000000) * math.RADIANS, Vec3.ZERO);
+        }
+        cam.update();
+    }
+
     onCameraTurnLeft(event) {
         var cam = this.renderer.activeCamera;
         if (this.renderer.events.isKeyPressed(input.KEY_SHIFT)) {
@@ -104,6 +130,26 @@ class KeyboardNavigation extends Control {
         cam.update();
     }
 
+    // from CompassButton._onClick()
+    onCameraRollNorth(event) {
+      let c = this.planet.getCartesianFromPixelTerrain(this.renderer.handler.getCenter());
+      if (c) {
+        this.planet.flyCartesian(
+          c.normal().scaleTo(c.length() + c.distance(this.planet.camera.eye)),
+          null,
+          null,
+          0,
+          null,
+          null,
+          () => {
+            this.planet.camera.look(c);
+          }
+          );
+      } else {
+        this.planet.flyCartesian(this.planet.camera.eye);
+      }
+    }
+
     onCameraRollLeft(event) {
         this.renderer.activeCamera.roll(-15 / this.renderer.handler.deltaTime);
         this.renderer.activeCamera.update();

package/src/og/control/TouchNavigation.js

@@ -83,13 +83,13 @@ class TouchNavigation extends Control {
             t0.y = e.sys.touches.item(0).clientY - e.sys.offsetTop;
             t0.prev_x = e.sys.touches.item(0).clientX - e.sys.offsetLeft;
             t0.prev_y = e.sys.touches.item(0).clientY - e.sys.offsetTop;
-            t0.grabbedPoint = this.planet.getCartesianFromPixelTerrain(t0, true);
+            t0.grabbedPoint = this.planet.getCartesianFromPixelTerrain(e, true);
 
             t1.x = e.sys.touches.item(1).clientX - e.sys.offsetLeft;
             t1.y = e.sys.touches.item(1).clientY - e.sys.offsetTop;
             t1.prev_x = e.sys.touches.item(1).clientX - e.sys.offsetLeft;
             t1.prev_y = e.sys.touches.item(1).clientY - e.sys.offsetTop;
-            t1.grabbedPoint = this.planet.getCartesianFromPixelTerrain(t1, true);
+            t1.grabbedPoint = this.planet.getCartesianFromPixelTerrain(e, true);
 
             // this.planet._viewChanged = true;
             this.pointOnEarth = this.planet.getCartesianFromPixelTerrain(
@@ -119,7 +119,7 @@ class TouchNavigation extends Control {
         t.prev_x = e.sys.touches.item(0).clientX - e.sys.offsetLeft;
         t.prev_y = e.sys.touches.item(0).clientY - e.sys.offsetTop;
 
-        t.grabbedPoint = this.planet.getCartesianFromPixelTerrain(t, true);
+        t.grabbedPoint = this.planet.getCartesianFromPixelTerrain(e, true);
         this._eye0.copy(this.renderer.activeCamera.eye);
 
         if (t.grabbedPoint) {
@@ -142,7 +142,8 @@ class TouchNavigation extends Control {
 
         this.planet.stopFlying();
         this.stopRotation();
-        var p = this.planet.getCartesianFromPixelTerrain(this.touches[0], true);
+
+        var p = this.planet.getCartesianFromPixelTerrain(e);
         if (p) {
             var g = this.planet.ellipsoid.cartesianToLonLat(p);
             this.planet.flyLonLat(
@@ -199,11 +200,6 @@ class TouchNavigation extends Control {
             // distance < 0 --> zoomIn; distance > 0 --> zoomOut
             var t0t1Distance = Math.abs(t0.prev_x - t1.prev_x) + Math.abs(t0.prev_y - t1.prev_y)  - (Math.abs(t0.x - t1.x)  + Math.abs(t0.y - t1.y))
             var _move = 0
-            var _targetPoint = this.renderer.getCenter()
-            var d =
-                cam.eye.distance(
-                    this.planet.getCartesianFromPixelTerrain(_targetPoint, true)
-                ) * 0.075;
             if (t0t1Distance < 0) {
                 _move = 1
             }
@@ -211,9 +207,13 @@ class TouchNavigation extends Control {
                 _move = -1
             }
             if (_move !== 0) {
-                cam.eye.addA(cam.getForward().scale(_move * d));
-                cam.checkTerrainCollision();
-                cam.update();
+                let pos = this.planet.getCartesianFromPixelTerrain(e);
+                if (pos) {
+                    let d = cam.eye.distance(pos) * 0.075;
+                    cam.eye.addA(cam.getForward().scale(_move * d));
+                    cam.checkTerrainCollision();
+                    cam.update();
+                }
             }
 
             if (
@@ -246,7 +246,7 @@ class TouchNavigation extends Control {
 
             this.planet.stopFlying();
 
-            var direction = cam.unproject(t.x, t.y);
+            var direction = e.direction
             var targetPoint = new Ray(cam.eye, direction).hitSphere(t.grabbedSpheroid);
 
             if (targetPoint) {

package/src/og/control/ZoomControl.js

@@ -114,7 +114,7 @@ class ZoomControl extends Control {
         var cam = this.renderer.activeCamera;
 
         if (this._move !== 0) {
-            let pos = this.planet.getCartesianFromPixelTerrain(this._targetPoint);
+            let pos = this.planet.getCartesianFromPixelTerrain(e);
             if (pos) {
                 let d = cam.eye.distance(pos) * 0.035;
                 cam.eye.addA(cam.getForward().scale(this._move * d));

package/src/og/ellipsoid/Ellipsoid.js

@@ -536,7 +536,7 @@ class Ellipsoid {
 
             let eps = Math.abs(qw2 - product);
 
-            if (eps > math.EPSILON10 && qw2 < product) {
+            if (eps > math.EPSILON15 && qw2 < product) {
                 // Imaginary roots (0 intersections).
                 return null;
             } else if (qw2 > product) {