@openglobus/og 0.13.5 → 0.13.8

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

@@ -0,0 +1,370 @@
+'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 RulerScene extends RenderNode {
+    constructor(options = {}) {
+        super(options.name);
+
+        this.events = new Events(EVENT_NAMES);
+
+        this._ignoreTerrain = options.ignoreTerrain != undefined ? options.ignoreTerrain : true;
+
+        this._planet = options.planet || null;
+
+        this._startLonLat = null;
+        this._preventClick = false;
+        this._stopDrawing = false;
+
+        this._pickedCorner = null;
+        this._startPos = null;
+        this._startClick = new Vec2();
+
+        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
+        });
+
+        this._cornersLayer = new Vector("corners", {
+            entities: [this._cornerEntity[0], this._cornerEntity[1]],
+            pickingEnabled: true
+        });
+    }
+
+    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._onLclick_ = this._onLclick.bind(this);
+        this.renderer.events.on("lclick", this._onLclick_, this);
+        this._onMouseMove_ = this._onMouseMove.bind(this);
+        this.renderer.events.on("mousemove", this._onMouseMove_, this);
+        this._onLdblclick_ = this._onLdblclick.bind(this);
+        this.renderer.events.on("ldblclick", this._onLdblclick_, this);
+
+        this._onCornerEnter_ = this._onCornerEnter.bind(this);
+        this._cornersLayer.events.on("mouseenter", this._onCornerEnter_, this);
+
+        this._onCornerLeave_ = this._onCornerLeave.bind(this);
+        this._cornersLayer.events.on("mouseleave", this._onCornerLeave_, this);
+
+        this._onCornerLdown_ = this._onCornerLdown.bind(this);
+        this._cornersLayer.events.on("ldown", this._onCornerLdown_, this);
+
+        this._onCornerLup_ = this._onCornerLup.bind(this);
+        this._cornersLayer.events.on("lup", this._onCornerLup, this);
+
+        this._planet.addLayer(this._trackLayer);
+        this._planet.addLayer(this._cornersLayer);
+    }
+
+    _deactivate() {
+        this._startLonLat = null;
+        this._preventClick = false;
+        this._stopDrawing = false;
+        this._pickedCorner = null;
+        this._trackLayer.remove();
+        this._cornersLayer.remove();
+        this.renderer.events.off("lclick", this._onLclick_);
+        this.renderer.events.off("mousemove", this._onMouseMove_);
+        this._cornersLayer.events.off("mouseenter", this._onCornerEnter_);
+        this._cornersLayer.events.off("mouseleave", this._onCornerLeave_);
+        this._cornersLayer.events.off("ldown", this._onCornerLdown_);
+        this._cornersLayer.events.off("lup", this._onCornerLup_);
+
+        this.clear();
+
+        this._onLclick_ = null;
+        this._onMouseMove_ = null;
+        this._onCornerLeave_ = null;
+        this._onCornerEnter_ = null;
+        this._onCornerLdown_ = null;
+        this._onCornerLup_ = null;
+    }
+
+    _onCornerLdown(e) {
+        if (!this._startLonLat) {
+            this.renderer.controls.mouseNavigation.deactivate();
+            this._startClick.set(e.x, e.y);
+            let coords = e.pickingObject.getCartesian();
+            this._startPos = this._planet.getPixelFromCartesian(coords);
+            this._pickedCorner = e.pickingObject;
+            if (e.pickingObject.properties.name == "start") {
+                this._anchorLonLat = this._cornerEntity[1].getLonLat().clone();
+            } else {
+                this._anchorLonLat = this._cornerEntity[0].getLonLat().clone();
+            }
+        }
+    }
+
+    _onCornerLup(e) {
+        if (this._pickedCorner) {
+            this.renderer.controls.mouseNavigation.activate();
+            this._pickedCorner = null;
+            this._anchorLonLat = null;
+        }
+    }
+
+    _onCornerEnter(e) {
+        e.renderer.handler.canvas.style.cursor = "pointer";
+    }
+
+    _onCornerLeave(e) {
+        e.renderer.handler.canvas.style.cursor = "default";
+    }
+
+    _onLdblclick() {
+        this._preventClick = true;
+    }
+
+    _onLclick(e) {
+        let startLonLat = this._planet.getLonLatFromPixelTerrain(e);
+        this._timeout = setTimeout(() => {
+            if (!this._preventClick) {
+                if (!this._startLonLat) {
+                    this._stopDrawing = false;
+                    this._propsLabel.label.setVisibility(false);
+                    this._trackEntity.polyline.setPath3v([]);
+                    this._cornerEntity[0].geoObject.setVisibility(true);
+                    this._cornerEntity[1].geoObject.setVisibility(true);
+                    this._startLonLat = startLonLat;
+                } else {
+                    this._startLonLat = null;
+                }
+            }
+            this._preventClick = false;
+            this._stopDrawing = false;
+            clearTimeout(this._timeout);
+        }, 200);
+
+        if (this._startLonLat) {
+            this._stopDrawing = true;
+        }
+    }
+
+    _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 = [];
+        let dir = endPos.sub(startPos);
+        let dist = dir.length();
+        dir.normalize();
+
+        for (let i = 0; i < OUTLINE_COUNT; i++) {
+            let f = dir.scaleTo(i * dist / OUTLINE_COUNT).addA(startPos);
+            path.push(f);
+        }
+        path.push(endPos);
+
+        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._stopDrawing) {
+            this._propsLabel.label.setVisibility(true);
+            let endLonLat = this._planet.getLonLatFromPixelTerrain(e);
+            if (!endLonLat) return;
+            this._drawLine(this._startLonLat, endLonLat);
+        } else if (this._pickedCorner) {
+            let newLonLat = this._planet.getLonLatFromPixelTerrain(e);
+            if (newLonLat) {
+                if (this._pickedCorner.properties.name === "start") {
+                    this._drawLine(newLonLat, this._anchorLonLat);
+                } else {
+                    this._drawLine(this._anchorLonLat, newLonLat);
+                }
+            }
+        }
+    }
+
+    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].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++) {
+                    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 { RulerScene };

package/src/og/control/visibleExtent/Segment.js

@@ -257,10 +257,7 @@ class Segment {
      * @returns {boolean} -
      */
     acceptForRendering(camera) {
-        return (
-            camera.projectedSize(this.bsphere.center, this._plainRadius) <
-            256 / this.planet._lodRatio
-        );
+        return camera.projectedSize(this.bsphere.center, this._plainRadius) < (256 / this.planet._lodRatio);
     }
 
     /**

package/src/og/ellipsoid/Ellipsoid.js

@@ -57,6 +57,25 @@ class Ellipsoid {
         return -Math.acos(d);
     }
 
+    /**
+     * Returns the distance travelling from ‘this’ point to destination point along a rhumb line.
+     *
+     * @param   {LonLat} start coordinates.
+     * @param   {LonLat} end coordinates
+     * @returns {number} Distance in m between this point and destination point (same units as radius).
+     */
+    rhumbDistanceTo(startLonLat, endLonLat) {
+        const f1 = startLonLat.lat * math.RADIANS;
+        const f2 = endLonLat.lat * math.RADIANS;
+        const df = f2 - f1;
+        let d = Math.abs(endLonLat.lon - startLonLat.lon) * math.RADIANS;
+        if (Math.abs(d) > Math.PI) d = d > 0 ? -(2 * Math.PI - d) : (2 * Math.PI + d);
+        const dd = Math.log(Math.tan(f2 / 2 + Math.PI / 4) / Math.tan(f1 / 2 + Math.PI / 4));
+        const q = Math.abs(dd) > 10e-12 ? df / dd : Math.cos(f1);
+        const t = Math.sqrt(df * df + q * q * d * d); // angular distance in radians
+        return t * this._a;
+    }
+
     /**
      * Returns the midpoint between two points on the great circle.
      * @param   {LonLat} lonLat1 - Longitude/latitude of first point.
@@ -536,7 +555,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) {

package/src/og/entity/Entity.js

@@ -65,7 +65,7 @@ class Entity {
          * @public
          * @type {string}
          */
-        this.properties.name = this.properties.name || options.name || "";
+        this.properties.name = this.properties.name != undefined ? this.properties.name : "";
 
         /**
          * Children entities.

package/src/og/entity/GeoObject.js

@@ -20,7 +20,7 @@ class GeoObject {
     constructor(options) {
         options = options || {};
 
-        this.scale = options.scale || 0.02;
+        this.scale = options.scale || 1.0;
         this.scaleByDistance = new Float32Array(options.scaleByDistance || [MAX32, MAX32, MAX32]);
 
         /**

package/src/og/entity/LabelHandler.js

@@ -205,6 +205,7 @@ class LabelHandler extends BillboardHandler {
             ec = this._entityCollection;
 
         gl.disable(gl.CULL_FACE);
+        //gl.disable(gl.DEPTH_TEST);
 
         gl.uniform1iv(shu.fontTextureArr, r.fontAtlas.samplerArr);
         gl.uniform4fv(shu.sdfParamsArr, r.fontAtlas.sdfParamsArr);
@@ -385,14 +386,14 @@ class LabelHandler extends BillboardHandler {
         if (isRTL) {
             _rtl_ = RTL;
         }
-        let n = fa.get(text[c].charCodeAt());
+        
         let offset = 0.0;
         let kern = fa.kernings;
 
         for (c = 0; c < len; c++) {
             let j = i + c * 24;
             let char = text[c];
-            n = fa.get(char.charCodeAt()) || fa.get(" ".charCodeAt());
+            let n = fa.get(char.charCodeAt()) || fa.get(" ".charCodeAt());
             let tc = n.texCoords;
 
             let m = n.metrics;

package/src/og/input/input.js

@@ -9,11 +9,14 @@ export const input = {
     KEY_ALT: 18,
     KEY_SHIFT: 16,
     KEY_SPACE: 32,
+    KEY_PGUP: 33,
+    KEY_PGDN: 34,
     KEY_LEFT: 37,
     KEY_UP: 38,
     KEY_RIGHT: 39,
     KEY_DOWN: 40,
     KEY_PRINTSCREEN: 44,
+    KEY_EQUALS: 61,
     KEY_A: 65,
     KEY_C: 67,
     KEY_D: 68,
@@ -23,6 +26,7 @@ export const input = {
     KEY_I: 73,
     KEY_K: 75,
     KEY_L: 76,
+    KEY_N: 78,
     KEY_O: 79,
     KEY_P: 80,
     KEY_Q: 81,
@@ -32,9 +36,11 @@ export const input = {
     KEY_W: 87,
     KEY_X: 88,
     KEY_Z: 90,
+    KEY_PLUS: 107,
     KEY_F1: 112,
+    KEY_MINUS: 173,
     KEY_APOSTROPHE: 192,
     MB_LEFT: 0,
     MB_RIGHT: 2,
     MB_MIDDLE: 1
-};
+};

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;