@openglobus/og 0.13.7 → 0.13.10

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

@@ -0,0 +1,374 @@
+'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,
+            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._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);
     }
 
     /**
@@ -403,8 +400,9 @@ class Segment {
      * @param {Float32Array} elevations - Elevation data.
      */
     elevationsExists(elevations) {
+        const segment = this;
         if (this.plainReady && this.terrainIsLoading) {
-            this.planet._terrainWorker.make(this, elevations);
+            this.planet._terrainWorker.make(segment, elevations);
 
             this.plainVerticesHigh = null;
             this.plainVerticesLow = null;

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/ellipsoid/wgs84.js

@@ -10,4 +10,4 @@ import { Ellipsoid } from "./Ellipsoid.js";
  * WGS84 ellipsoid object.
  * @type {Ellipsoid}
  */
-export const wgs84 = new Ellipsoid(6378137.0, 6356752.3142);
+export const wgs84 = new Ellipsoid(6378137.0, 6356752.3142); // Equitorial Radius (m), Polar Radius (m)

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

@@ -85,7 +85,8 @@ class LabelHandler extends BillboardHandler {
     }
 
     _addLabelToArrays(label) {
-        this._renderer.labelWorker.make(this, label);
+        this._renderer.labelWorker.make(label);
+        console.time(`label${label.id}`)
     }
 
     assignFontAtlas(label) {
@@ -121,6 +122,8 @@ class LabelHandler extends BillboardHandler {
             label.update();
 
             this.refresh();
+            console.timeEnd(`label${label.id}`)
+            console.log(label)
         }
     }
 
@@ -205,6 +208,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,7 +389,7 @@ class LabelHandler extends BillboardHandler {
         if (isRTL) {
             _rtl_ = RTL;
         }
-        
+
         let offset = 0.0;
         let kern = fa.kernings;
 

package/src/og/entity/LabelWorker.js

@@ -2,76 +2,61 @@
 
 // import { QueueArray } from '../QueueArray.js';
 
+import { BaseWorker } from "../utils/BaseWorker.js";
+
 export const LOCK_UPDATE = -2;
 export const LOCK_FREE = -1;
 
-class LabelWorker {
+class LabelWorker extends BaseWorker {
     constructor(numWorkers = 4) {
-        this._id = 0;
-        this._source = {};
-
-        this._freeWorkerQueue = []; //new QueueArray(numWorkers);
-        var labelProgramm = new Blob([_programm], { type: "application/javascript" });
-
-        var that = this;
-
-        for (let i = 0; i < numWorkers; i++) {
-            var w = new Worker(URL.createObjectURL(labelProgramm));
-            w.onmessage = function (e) {
-
-                let s = that._source[e.data.id];
-
-                if (s.label._lockId === LOCK_UPDATE) {
-                    that.make(s.handler, s.label);
-                } else {
-                    s.handler.workerCallback(e.data, s.label);
-                }
+        super(numWorkers, _programm);
+        this._source = new Map();
+    }
 
-                that._source[e.data.id] = null;
-                delete that._source[e.data.id];
-                that._freeWorkerQueue.unshift(this);
+    _onMessage(e) {
 
-                that.check();
-            };
+        let label = this._source.get(e.data.id);
 
-            this._freeWorkerQueue.push(w);
+        if (label._lockId === LOCK_UPDATE) {
+            requestAnimationFrame(() => {
+                this.make(label);
+            });
+        } else {
+            label._handler.workerCallback(e.data, label);
         }
 
-        this._pendingQueue = []; //new QueueArray(512);
-    }
+        this._source.delete(e.data.id);
+        super._onMessage(e)
 
-    check() {
-        if (this._pendingQueue.length) {
-            var p = this._pendingQueue.pop();
-            this.make(p.handler, p.label);
-        }
+        this.check();
     }
 
-    make(handler, label) {
 
+    make() {
+        const label = arguments[0],
+        handler = label._handler;
         if (handler._entityCollection) {
-            let source = { handler: handler, label: label };
 
-            if (this._freeWorkerQueue.length) {
-                var w = this._freeWorkerQueue.pop();
+            if (this._workerQueue.length) {
+                var w = this._workerQueue.pop();
 
-                this._source[this._id] = source;
+                this._source.set(this._id, label);
 
                 let labelData = new Float32Array([
-                /*0*/this._id++,
-                /*1*/handler._maxLetters,
-                /*2*/label.getVisibility() ? 1 : 0,
-                /*3, 4, 5*/label._positionHigh.x, label._positionHigh.y, label._positionHigh.z,
-                /*6, 7, 8*/label._positionLow.x, label._positionLow.y, label._positionLow.z,
-                /*9*/label._size,
-                /*10, 11, 12*/label._offset.x, label._offset.y, label._offset.z,
-                /*13, 14, 15, 16*/label._color.x, label._color.y, label._color.z, label._color.w,
-                /*17*/label._rotation,
-                /*18, 19, 20*/label._alignedAxis.x, label._alignedAxis.y, label._alignedAxis.z,
-                /*21*/label._fontIndex,
-                /*22*/label._outline,
-                /*23, 24, 25, 26*/label._outlineColor.x, label._outlineColor.y, label._outlineColor.z, label._outlineColor.w,
-                /*27, 28, 29*/label._entity._pickingColor.x, label._entity._pickingColor.y, label._entity._pickingColor.z
+                    /*0*/this._id++,
+                    /*1*/handler._maxLetters,
+                    /*2*/label.getVisibility() ? 1 : 0,
+                    /*3, 4, 5*/label._positionHigh.x, label._positionHigh.y, label._positionHigh.z,
+                    /*6, 7, 8*/label._positionLow.x, label._positionLow.y, label._positionLow.z,
+                    /*9*/label._size,
+                    /*10, 11, 12*/label._offset.x, label._offset.y, label._offset.z,
+                    /*13, 14, 15, 16*/label._color.x, label._color.y, label._color.z, label._color.w,
+                    /*17*/label._rotation,
+                    /*18, 19, 20*/label._alignedAxis.x, label._alignedAxis.y, label._alignedAxis.z,
+                    /*21*/label._fontIndex,
+                    /*22*/label._outline,
+                    /*23, 24, 25, 26*/label._outlineColor.x, label._outlineColor.y, label._outlineColor.z, label._outlineColor.w,
+                    /*27, 28, 29*/label._entity._pickingColor.x, label._entity._pickingColor.y, label._entity._pickingColor.z
                 ]);
 
                 label._lockId = this._id;
@@ -82,7 +67,7 @@ class LabelWorker {
                     labelData.buffer,
                 ]);
             } else {
-                this._pendingQueue.push(source);
+                this._pendingQueue.push(label);
             }
         }
     }