@openglobus/og 0.13.7 → 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.

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);

package/src/og/layer/Layer.js

@@ -34,29 +34,29 @@ export const FADING_FACTOR = 0.29;
  * @fires og.Layer#visibilitychange
  * @fires og.Layer#add
  * @fires og.Layer#remove
- * @fires og.layer.Vector#mousemove
- * @fires og.layer.Vector#mouseenter
- * @fires og.layer.Vector#mouseleave
- * @fires og.layer.Vector#lclick
- * @fires og.layer.Vector#rclick
- * @fires og.layer.Vector#mclick
- * @fires og.layer.Vector#ldblclick
- * @fires og.layer.Vector#rdblclick
- * @fires og.layer.Vector#mdblclick
- * @fires og.layer.Vector#lup
- * @fires og.layer.Vector#rup
- * @fires og.layer.Vector#mup
- * @fires og.layer.Vector#ldown
- * @fires og.layer.Vector#rdown
- * @fires og.layer.Vector#mdown
- * @fires og.layer.Vector#lhold
- * @fires og.layer.Vector#rhold
- * @fires og.layer.Vector#mhold
- * @fires og.layer.Vector#mousewheel
- * @fires og.layer.Vector#touchmove
- * @fires og.layer.Vector#touchstart
- * @fires og.layer.Vector#touchend
- * @fires og.layer.Vector#doubletouch
+ * @fires og.layer.Layer#mousemove
+ * @fires og.layer.Layer#mouseenter
+ * @fires og.layer.Layer#mouseleave
+ * @fires og.layer.Layer#lclick
+ * @fires og.layer.Layer#rclick
+ * @fires og.layer.Layer#mclick
+ * @fires og.layer.Layer#ldblclick
+ * @fires og.layer.Layer#rdblclick
+ * @fires og.layer.Layer#mdblclick
+ * @fires og.layer.Layer#lup
+ * @fires og.layer.Layer#rup
+ * @fires og.layer.Layer#mup
+ * @fires og.layer.Layer#ldown
+ * @fires og.layer.Layer#rdown
+ * @fires og.layer.Layer#mdown
+ * @fires og.layer.Layer#lhold
+ * @fires og.layer.Layer#rhold
+ * @fires og.layer.Layer#mhold
+ * @fires og.layer.Layer#mousewheel
+ * @fires og.layer.Layer#touchmove
+ * @fires og.layer.Layer#touchstart
+ * @fires og.layer.Layer#touchend
+ * @fires og.layer.Layer#doubletouch
  */
 class Layer {
     constructor(name, options = {}) {
@@ -230,23 +230,6 @@ class Layer {
         this.__lcounter = n;
     }
 
-    static get __requestsCounter() {
-        return this.__reqcounter;
-    }
-
-    static set __requestsCounter(v) {
-        this.__reqcounter = v;
-    }
-
-    /**
-     * Maximum loading queries at one time.
-     * @const
-     * @type {number}
-     */
-    static get MAX_REQUESTS() {
-        return 7;
-    }
-
     get instanceName() {
         return "Layer";
     }

package/src/og/layer/Vector.js

@@ -137,6 +137,11 @@ class Vector extends Layer {
         });
         this._bindEventsDefault(this._polylineEntityCollection);
 
+        this._geoObjectEntityCollection = new EntityCollection({
+            pickingEnabled: this.pickingEnabled
+        });
+        this._bindEventsDefault(this._geoObjectEntityCollection);
+
         this._geometryHandler = new GeometryHandler(this);
 
         this._entityCollectionsTree = null;
@@ -186,6 +191,7 @@ class Vector extends Layer {
             this._geometryHandler.assignHandler(planet.renderer.handler);
             this._polylineEntityCollection.addTo(planet, true);
             this._stripEntityCollection.addTo(planet, true);
+            this._geoObjectEntityCollection.addTo(planet, true);
             this.setEntities(this._entities);
         }
         return this;
@@ -285,6 +291,10 @@ class Vector extends Layer {
             this._polylineEntityCollection.add(entity);
         }
 
+        if (entity.geoObject) {
+            this._geoObjectEntityCollection.add(entity);
+        }
+
         if (entity.geometry) {
             this._hasImageryTiles = true;
             if (this._planet) {
@@ -412,20 +422,22 @@ class Vector extends Layer {
 
         this._polylineEntityCollection.setPickingEnabled(picking);
 
+        this._geoObjectEntityCollection.setPickingEnabled(picking);
+
         this._entityCollectionsTree &&
-            this._entityCollectionsTree.traverseTree(function (node) {
-                node.entityCollection.setPickingEnabled(picking);
-            });
+        this._entityCollectionsTree.traverseTree(function (node) {
+            node.entityCollection.setPickingEnabled(picking);
+        });
 
         this._entityCollectionsTreeNorth &&
-            this._entityCollectionsTreeNorth.traverseTree(function (node) {
-                node.entityCollection.setPickingEnabled(picking);
-            });
+        this._entityCollectionsTreeNorth.traverseTree(function (node) {
+            node.entityCollection.setPickingEnabled(picking);
+        });
 
         this._entityCollectionsTreeSouth &&
-            this._entityCollectionsTreeSouth.traverseTree(function (node) {
-                node.entityCollection.setPickingEnabled(picking);
-            });
+        this._entityCollectionsTreeSouth.traverseTree(function (node) {
+            node.entityCollection.setPickingEnabled(picking);
+        });
     }
 
     /**
@@ -527,10 +539,10 @@ class Vector extends Layer {
 
         this._entities = new Array(temp.length);
 
-        var entitiesForTree = [];
+        let entitiesForTree = [];
 
-        for (var i = 0; i < temp.length; i++) {
-            var ei = temp[i];
+        for (let i = 0; i < temp.length; i++) {
+            let ei = temp[i];
 
             ei._layer = this;
             ei._layerIndex = i;
@@ -539,6 +551,8 @@ class Vector extends Layer {
                 this._stripEntityCollection.add(ei);
             } else if (ei.polyline || ei.ray) {
                 this._polylineEntityCollection.add(ei);
+            } else if (ei.geoObject) {
+                this._geoObjectEntityCollection.add(ei);
             } else if (ei.billboard || ei.label || ei.shape) {
                 entitiesForTree.push(ei);
             }
@@ -711,7 +725,7 @@ class Vector extends Layer {
     }
 
     _collectPolylineCollectionPASS(outArr) {
-        var ec = this._polylineEntityCollection;
+        let ec = this._polylineEntityCollection;
 
         ec._fadingOpacity = this._fadingOpacity;
         ec.scaleByDistance = this.scaleByDistance;
@@ -762,6 +776,58 @@ class Vector extends Layer {
         }
     }
 
+    _collectGeoObjectCollectionPASS(outArr) {
+        let ec = this._geoObjectEntityCollection;
+
+        ec._fadingOpacity = this._fadingOpacity;
+        ec.scaleByDistance = this.scaleByDistance;
+        ec.pickingScale = this.pickingScale;
+        ec.polygonOffsetUnits = this.polygonOffsetUnits;
+
+        outArr.push(ec);
+
+        // if (this.clampToGround || this.relativeToGround) {
+        //     let rtg = Number(this.relativeToGround);
+        //
+        //     var nodes = this._planet._renderedNodes;
+        //     var visibleExtent = this._planet.getViewExtent();
+        //     var e = ec._entities;
+        //     var e_i = e.length;
+        //     let res = new Vec3();
+        //
+        //     while (e_i--) {
+        //         var p = e[e_i].polyline;
+        //         if (visibleExtent.overlaps(p._extent)) {
+        //             // TODO:this works only for mercator area.
+        //             // needs to be working on poles.
+        //             let coords = p._pathLonLatMerc,
+        //                 c_j = coords.length;
+        //             while (c_j--) {
+        //                 var c_j_h = coords[c_j].length;
+        //                 while (c_j_h--) {
+        //                     let ll = coords[c_j][c_j_h],
+        //                         n_k = nodes.length;
+        //                     while (n_k--) {
+        //                         var seg = nodes[n_k].segment;
+        //                         if (seg._extent.isInside(ll)) {
+        //                             let cart = p._path3v[c_j][c_j_h];
+        //                             seg.getTerrainPoint(cart, ll, res);
+        //                             p.setPoint3v(
+        //                                 res.addA(res.normal().scale((rtg && p.altitude) || 0.0)),
+        //                                 c_j_h,
+        //                                 c_j,
+        //                                 true
+        //                             );
+        //                             break;
+        //                         }
+        //                     }
+        //                 }
+        //             }
+        //         }
+        //     }
+        // }
+    }
+
     collectVisibleCollections(outArr) {
         var p = this._planet;
 
@@ -775,8 +841,8 @@ class Vector extends Layer {
 
             // Common collections first
             this._collectStripCollectionPASS(outArr);
-
             this._collectPolylineCollectionPASS(outArr);
+            this._collectGeoObjectCollectionPASS(outArr);
 
             // Merc nodes
             this._secondPASS = [];

package/src/og/layer/XYZ.js

@@ -92,6 +92,10 @@ class XYZ extends Layer {
         this._urlRewriteCallback = options.urlRewrite || null;
     }
 
+    get isIdle() {
+        return !this._planet || this._planet._tileLoader.isIdle(this);
+    }
+
     get instanceName() {
         return "XYZ";
     }