@openglobus/og 0.13.6 → 0.13.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openglobus/og",
-  "version": "0.13.6",
+  "version": "0.13.7",
   "description": "[OpenGlobus](http://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/Extent.js

@@ -350,15 +350,7 @@ export class Extent {
 
     toString() {
         return (
-            "[" +
-            this.southWest.lon +
-            ", " +
-            this.southWest.lat +
-            ", " +
-            this.northEast.lon +
-            ", " +
-            this.northEast.lat +
-            "]"
+            `[${this.southWest.lon.toFixed(5)}, ${this.southWest.lat.toFixed(5)}, ${this.northEast.lon.toFixed(5)}, ${this.northEast.lat.toFixed(5)}]`
         );
     }
 }

package/src/og/control/DebugInfo.js

@@ -79,13 +79,16 @@ class DebugInfo extends Control {
                     label: "maxZoom/minZoom",
                     frame: () => p.maxCurrZoom + " / " + p.minCurrZoom
                 },
+                {
+                    label: "viewExtent",
+                    frame: () => p.getViewExtent().toString()
+                },
                 {
                     label: "height/alt (km)",
                     frame: () =>
-                        `<div style="width:190px">${
-                            (p.camera._lonLat.height / 1000.0).toFixed(2) +
-                            " / " +
-                            (p.camera.getAltitude() / 1000.0).toFixed(2)
+                        `<div style="width:190px">${(p.camera._lonLat.height / 1000.0).toFixed(2) +
+                        " / " +
+                        (p.camera.getAltitude() / 1000.0).toFixed(2)
                         }</div>`
                 },
                 {
@@ -108,6 +111,14 @@ class DebugInfo extends Control {
                 {
                     label: "-------------------------"
                 },
+                {
+                    label: "_renderCompleted / renderCompletedActivated",
+                    frame: () => `${p._renderCompleted} / ${p._renderCompletedActivated}`
+                },
+                {
+                    label: "_terrainCompleted / terrainCompletedActivated",
+                    frame: () => `${p._terrainCompleted} / ${p._terrainCompletedActivated}`
+                },
                 {
                     label: "PlainWorker",
                     frame: () => p._plainSegmentWorker._pendingQueue.length

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/layer/CanvasTiles.js

@@ -98,14 +98,14 @@ class CanvasTiles extends Layer {
      * @public
      * @param {boolean} visibility - Layer visibility.
      */
-    setVisibility(visibility) {
+    setVisibility(visibility) {
         if (visibility !== this._visibility) {
             super.setVisibility(visibility);
 
             if (!visibility) {
                 this.abortLoading();
             }
-        }
+        }
     }
 
     /**
@@ -203,7 +203,7 @@ class CanvasTiles extends Layer {
                     this._exec(pmat);
                 }
             }
-        } else if (this._counter === 0) {
+        } else if (this._counter === 0 && this._planet._terrainCompletedActivated) {
             this.events.dispatch(this.events.loadend);
         }
     }
@@ -227,21 +227,21 @@ class CanvasTiles extends Layer {
     applyMaterial(material) {
         if (material.isReady) {
             return [0, 0, 1, 1];
-        } else {
-
+        } else {
+
             var segment = material.segment;
             var pn = segment.node,
                 notEmpty = false;
-
+
             if (segment.passReady && !material.isLoading) {
-                this.loadMaterial(material);
+                this.loadMaterial(material);
             }
 
             var mId = this._id;
             var psegm = material;
             while (pn.parentNode) {
                 pn = pn.parentNode;
-                psegm = pn.segment.materials[mId];
+                psegm = pn.segment.materials[mId];
                 if (psegm && psegm.isReady) {
                     notEmpty = true;
                     break;

package/src/og/layer/XYZ.js

@@ -162,6 +162,7 @@ class XYZ extends Layer {
 
                 this._planet._tileLoader.load(
                     {
+                        sender: this,
                         src: this._getHTTPRequestString(material.segment),
                         type: "imageBitmap",
                         filter: () =>
@@ -185,7 +186,8 @@ class XYZ extends Layer {
                                 material.textureNotExists();
                             }
                         }
-                    }
+                    },
+                    this._id
                 );
             } else {
                 material.textureNotExists();
@@ -303,7 +305,7 @@ class XYZ extends Layer {
     clearMaterial(material) {
         if (material.isReady && material.textureExists) {
             !material.texture.default &&
-            material.segment.handler.gl.deleteTexture(material.texture);
+                material.segment.handler.gl.deleteTexture(material.texture);
             material.texture = null;
 
             if (material.image) {

package/src/og/quadTree/Node.js

@@ -404,6 +404,7 @@ class Node {
 
         if (!this.segment.terrainReady) {
             this.planet._renderCompleted = false;
+            this.planet._terrainCompleted = false;
         }
 
         let k = 0,

package/src/og/scene/Planet.js

@@ -88,7 +88,13 @@ const EVENT_NAMES = [
      * Triggered when all data is loaded
      * @event og.scene.Planet#rendercompleted
      */
-    "rendercompleted"
+    "rendercompleted",
+
+    /**
+     * Triggered when all data is loaded
+     * @event og.scene.Planet#terraincompleted
+     */
+    "terraincompleted"
 ];
 
 /**
@@ -428,6 +434,10 @@ export class Planet extends RenderNode {
         this.always = [];
 
         this._renderCompleted = false;
+        this._renderCompletedActivated = false;
+
+        this._terrainCompleted = false;
+        this._terrainCompletedActivated = false;
     }
 
     static getBearingNorthRotationQuat(cartesian) {
@@ -454,6 +464,7 @@ export class Planet extends RenderNode {
         this._minLodSize = minLodSize || this._minLodSize;
         this._curLodSize = currentLodSize || this._curLodSize;
         this._renderCompletedActivated = false;
+        this._terrainCompletedActivated = false;
     }
 
     /**
@@ -571,6 +582,7 @@ export class Planet extends RenderNode {
      */
     setHeightFactor(factor) {
         this._renderCompletedActivated = false;
+        this._terrainCompletedActivated = false;
 
         if (this._heightFactor !== factor) {
             this._heightFactor = factor;
@@ -593,6 +605,7 @@ export class Planet extends RenderNode {
      */
     setTerrain(terrain) {
         this._renderCompletedActivated = false;
+        this._terrainCompletedActivated = false;
 
         if (this._initialized) {
             this.memClear();
@@ -692,10 +705,10 @@ export class Planet extends RenderNode {
                 !this._indexesCache[i][j] && (this._indexesCache[i][j] = new Array(TABLESIZE));
                 for (var k = 0; k <= TABLESIZE; k++) {
                     !this._indexesCache[i][j][k] &&
-                    (this._indexesCache[i][j][k] = new Array(TABLESIZE));
+                        (this._indexesCache[i][j][k] = new Array(TABLESIZE));
                     for (var m = 0; m <= TABLESIZE; m++) {
                         !this._indexesCache[i][j][k][m] &&
-                        (this._indexesCache[i][j][k][m] = new Array(TABLESIZE));
+                            (this._indexesCache[i][j][k][m] = new Array(TABLESIZE));
                         for (var q = 0; q <= TABLESIZE; q++) {
                             let ptr = {
                                 buffer: null
@@ -723,6 +736,7 @@ export class Planet extends RenderNode {
 
         this.renderer.events.on("resize", () => {
             this._renderCompletedActivated = false;
+            this._terrainCompletedActivated = false;
         });
 
         // Initialize texture coordinates buffer pool
@@ -1156,6 +1170,17 @@ export class Planet extends RenderNode {
             this._renderCompletedActivated = false;
         }
         this._renderCompleted = true;
+
+        if (this._terrainCompleted) {
+            if (!this._terrainCompletedActivated) {
+                this._terrainCompletedActivated = true;
+                this.events.dispatch(this.events.terraincompleted, true);
+            }
+        } else {
+            this._terrainCompletedActivated = false;
+        }
+
+        this._terrainCompleted = true;
     }
 
     /**
@@ -1807,4 +1832,20 @@ export class Planet extends RenderNode {
             }
         }
     }
+
+    async getHeightDefault(lonLat) {
+        return new Promise((resolve, reject) => {
+            this.terrain.getHeightAsync(lonLat.clone(), (alt) => {
+                resolve(alt);
+            });
+        });
+    }
+
+    async getHeightAboveELL(lonLat) {
+        return new Promise((resolve, reject) => {
+            this.terrain.getHeightAsync(lonLat.clone(), (alt) => {
+                resolve(alt + this.terrain.geoid.getHeightLonLat(lonLat));
+            });
+        });
+    }
 }

package/src/og/segment/Segment.js

@@ -1488,6 +1488,7 @@ class Segment {
 
                 if (!m.isReady) {
                     this.planet._renderCompleted = false;
+                    this.planet._terrainReady = false;
                 }
 
                 slice.append(li, m);

package/src/og/terrain/EmptyTerrain.js

@@ -156,6 +156,11 @@ class EmptyTerrain {
      */
     clearCache() {
     }
+
+    getHeightAsync(lonLat, callback) {
+        callback(0);
+        return true;
+    }
 }
 
 export { EmptyTerrain };