@openglobus/og 0.15.3 → 0.15.5

package/src/og/control/heightRuler/HeightRulerScene.js

@@ -0,0 +1,224 @@
+'use strict';
+
+import { Entity } from '../../entity/Entity.js';
+import { RulerScene } from "../ruler/RulerScene.js";
+import { Vector } from "../../layer/Vector.js";
+import { Object3d } from "../../Object3d.js";
+
+let obj3d = Object3d.createCylinder(1.1, 0, 2, 6, 1, true, true, 0, 0, 0)
+
+const RAYS_OPTIONS = {
+    startColor: "rgb(255,131,0)",
+    endColor: "rgb(255,131,0)",
+    thickness: 5
+}
+const LABEL_OPTIONS = {
+    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]
+};
+
+const RULER_CORNER_OPTIONS = {
+    scale: 1,
+    instanced: true,
+    tag: "height-ruler",
+    color: "rgb(255,131,0)",
+    object3d: obj3d
+};
+
+class HeightRulerScene extends RulerScene {
+    constructor(options = {}) {
+        super(options);
+
+
+        this._cornersLayer = new Vector("corners", {
+            entities: [],
+            pickingEnabled: true,
+            displayInLayerSwitcher: false,
+            scaleByDistance: [100, 4000000, 1.0],
+            pickingScale: 2
+        });
+
+
+        this._geoRulerLayer = new Vector("rayHeightRuler", {
+            entities: [],
+            pickingEnabled: false,
+            polygonOffsetUnits: -2.0,
+            relativeToGround: false,
+            displayInLayerSwitcher: false
+        });
+
+    }
+
+    get deltaLabel() {
+        return this._heightLabels[2]
+    }
+
+    get startLabel() {
+        return this._heightLabels[0]
+    }
+
+    get endLabel() {
+        return this._heightLabels[1]
+    }
+
+    get corners() {
+        return this._cornerEntity;
+    }
+
+    get startCorner() {
+        return this.corners[0];
+    }
+
+    get endCorner() {
+        return this.corners[1];
+    }
+
+    get startCornerLonLat() {
+        return this.startCorner.getLonLat();
+    }
+
+    get startCornerHeight() {
+        return this.startCornerLonLat.height;
+    }
+
+    get endCornerLonLat() {
+        return this.endCorner.getLonLat();
+    }
+
+    get endCornerHeight() {
+        return this.endCornerLonLat.height;
+    }
+
+    get maxHeightCornerLonLat() {
+        if (this.startCornerHeight <= this.endCornerHeight) {
+            return this.endCornerLonLat;
+        } else {
+            return this.startCornerLonLat;
+        }
+    }
+
+    get minHeightCornerLonLat() {
+        if (this.startCornerHeight > this.endCornerHeight) {
+            return this.endCornerLonLat;
+        } else {
+            return this.startCornerLonLat;
+        }
+    }
+
+    get deltaHeight() {
+        return Math.abs(this.startCornerHeight - this.endCornerHeight);
+    }
+
+    _drawLine(startLonLat, endLonLat, startPos) {
+
+        super._drawLine(startLonLat, endLonLat, startPos);
+        this._updateHeightRaysAndLabels();
+    }
+
+    async _updateHeightRaysAndLabels() {
+        const middleLonLat = this.minHeightCornerLonLat.clone();
+        middleLonLat.height = this.maxHeightCornerLonLat.height;
+
+        this._rayH.ray.setStartPosition3v(this._planet.ellipsoid.lonLatToCartesian(this.maxHeightCornerLonLat))
+        this._rayH.ray.setEndPosition3v(this._planet.ellipsoid.lonLatToCartesian(middleLonLat))
+        this._rayV.ray.setStartPosition3v(this._planet.ellipsoid.lonLatToCartesian(this.minHeightCornerLonLat));
+        this._rayV.ray.setEndPosition3v(this._planet.ellipsoid.lonLatToCartesian(middleLonLat));
+
+        middleLonLat.height = this.minHeightCornerLonLat.height + this.deltaHeight / 2;
+
+        this.deltaLabel.setLonLat(middleLonLat);
+        this.startLabel.setLonLat(this.startCornerLonLat);
+        this.endLabel.setLonLat(this.endCornerLonLat);
+
+        const startHeight = await this._planet.getHeightDefault(this.startCornerLonLat),
+            endHeight = await this._planet.getHeightDefault(this.endCornerLonLat)
+
+        this.deltaLabel.label.setText(`\u0394 ${Math.abs(startHeight - endHeight).toFixed(1)} m`);
+        this.startLabel.label.setText(`P1 ${startHeight.toFixed(1)} m`)
+        this.endLabel.label.setText(`P2 ${endHeight.toFixed(1)} m`)
+    }
+
+    clear() {
+        this._rayH.remove();
+        this._rayV.remove();
+        this.startCorner.remove();
+        this.endCorner.remove();
+        this.startLabel.remove();
+        this.endLabel.remove();
+        this.deltaLabel.remove();
+        super.clear()
+        this._rayH = undefined;
+        this._rayV = undefined;
+
+        this._planet.removeLayer(this._geoRulerLayer);
+    }
+
+    _createCorners() {
+        this._cornerEntity = [
+            new Entity({
+                geoObject: RULER_CORNER_OPTIONS,
+                properties: {
+                    name: "start"
+                }
+            }),
+            new Entity({
+                geoObject: RULER_CORNER_OPTIONS,
+                properties: {
+                    name: "end"
+                }
+            })
+        ];
+        this._cornersLayer.addEntities(this._cornerEntity)
+    }
+
+    init() {
+
+        super.init();
+        this._createCorners();
+        this._rayV = new Entity({
+            'name': 'verticalRay',
+            'ray': RAYS_OPTIONS
+        });
+        this._rayH = new Entity({
+            'name': 'heightRay',
+            'ray': RAYS_OPTIONS
+        });
+        this._heightLabels = [
+            new Entity({
+                'name': 'startCornerLabel',
+                'label': {
+                    ...LABEL_OPTIONS
+                }
+            }),
+            new Entity({
+                'name': 'endCornerLabel',
+                'label': {
+                    ...LABEL_OPTIONS
+                }
+            }),
+            new Entity({
+                'name': 'deltaLabel',
+                'label': {
+                    ...LABEL_OPTIONS
+                }
+            })
+        ];
+        this._labelLayer.addEntities(this._heightLabels);
+        this._geoRulerLayer.addEntities([this._rayH, this._rayV]);
+
+        this._planet.addLayer(this._geoRulerLayer);
+    }
+
+    frame() {
+        super.frame()
+        this._updateHeightRaysAndLabels();
+    }
+}
+
+
+export { HeightRulerScene };

package/src/og/control/heightRuler/HeightRulerSwitcher.js

@@ -0,0 +1,15 @@
+import { RulerSwitcher } from "../RulerSwitcher.js";
+import { HeightRuler } from "./HeightRuler.js";
+
+export class HeightRulerSwitcher extends RulerSwitcher {
+    constructor(options = {}) {
+        super({
+            name: `HeightRulerSwitcher`,
+            ...options
+        });
+        this.ruler = new HeightRuler({
+            ignoreTerrain: options.ignoreTerrain
+        });
+    }
+
+}

package/src/og/control/index.js

@@ -11,6 +11,7 @@ import { Lighting } from "./Lighting.js";
 import { MouseNavigation } from "./MouseNavigation.js";
 import { MouseWheelZoomControl } from "./MouseWheelZoomControl.js";
 import { Ruler } from "./ruler/Ruler.js";
+import { HeightRuler } from "./heightRuler/HeightRuler.js";
 import { ScaleControl } from "./ScaleControl.js";
 import { Selection } from "./selection/Selection.js";
 import { ShowFps } from "./ShowFps.js";
@@ -41,6 +42,7 @@ export {
     MouseWheelZoomControl,
     Lighting,
     Ruler,
+    HeightRuler,
     SimpleSkyBackground,
     Selection,
     LayerAnimation

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

@@ -10,7 +10,7 @@ import { RenderNode } from '../../scene/RenderNode.js';
 
 const OUTLINE_COUNT = 120;
 
-function distanceFormat(v) {
+export function distanceFormat(v) {
     if (v > 1000) {
         return `${(v / 1000).toFixed(1)} km`;
     } else if (v > 9) {
@@ -19,6 +19,24 @@ function distanceFormat(v) {
         return `${v.toFixed(1)} m`;
     }
 }
+let obj3d = Object3d.createCylinder(1.1, 0, 2.7, 20, 1, true, false, 0, 0, 0)
+
+const LABEL_OPTIONS = {
+    text: "",
+    size: 11,
+    color: "rgba(455,455,455,1.0)",
+    outlineColor: "rgba(0,0,0,0.34)",
+    outline: 0.23,
+    align: "center",
+    offset: [0, 20]
+};
+const RULER_CORNER_OPTIONS = {
+    scale: 1,
+    instanced: true,
+    tag: "ruler",
+    color: "rgb(0,305,0)",
+    object3d: obj3d
+};
 
 class RulerScene extends RenderNode {
     constructor(options = {}) {
@@ -40,71 +58,23 @@ class RulerScene extends RenderNode {
 
         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: 4.8,
-                color: "rgb(255,131,0)",
-                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)",
-                    object3d: obj3d
-                },
-                properties: {
-                    name: "start"
-                }
-            }),
-            new Entity({
-                geoObject: {
-                    scale: 1,
-                    instanced: true,
-                    tag: "ruler",
-                    color: "rgb(455,0,0)",
-                    object3d: obj3d
-                },
-                properties: {
-                    name: "end"
-                }
-            })
-        ];
-
         this._trackLayer = new Vector("track", {
-            entities: [this._trackEntity, this._propsLabel],
+            entities: [],
             pickingEnabled: false,
             polygonOffsetUnits: -1.0,
             relativeToGround: true,
             displayInLayerSwitcher: false
         });
+        this._labelLayer = new Vector("ruler-label", {
+            entities: [],
+            pickingEnabled: false,
+            polygonOffsetUnits: -100.0,
+            relativeToGround: true,
+            displayInLayerSwitcher: false
+        });
 
         this._cornersLayer = new Vector("corners", {
-            entities: [this._cornerEntity[0], this._cornerEntity[1]],
+            entities: [],
             pickingEnabled: true,
             displayInLayerSwitcher: false,
             scaleByDistance: [100, 4000000, 1.0],
@@ -123,7 +93,50 @@ class RulerScene extends RenderNode {
         this._planet = planet;
     }
 
+    _createCorners() {
+        this._cornerEntity = [
+            new Entity({
+                geoObject: RULER_CORNER_OPTIONS,
+                properties: {
+                    name: "start"
+                }
+            }),
+            new Entity({
+                geoObject: RULER_CORNER_OPTIONS,
+                properties: {
+                    name: "end"
+                }
+            })
+        ];
+        this._cornersLayer.addEntities(this._cornerEntity)
+    }
+
     init() {
+
+        this._propsLabel = new Entity({
+            'name': 'propsLabel',
+            'label': LABEL_OPTIONS
+        });
+
+        // this._propsLabel.label.setVisibility(false);
+
+        this._trackEntity = new Entity({
+            polyline: {
+                path3v: [],
+                thickness: 4.8,
+                color: "rgb(255,131,0)",
+                isClosed: false
+            }
+        });
+
+        this._trackEntity.polyline.altitude = 0.01;
+
+        this._createCorners();
+        this._trackLayer.addEntities([this._trackEntity]);
+        this._labelLayer.addEntities([ this._propsLabel]);
+        this._planet.addLayer(this._labelLayer);
+        this._planet.addLayer(this._trackLayer);
+        this._planet.addLayer(this._cornersLayer);
         this._activate();
     }
 
@@ -156,8 +169,6 @@ class RulerScene extends RenderNode {
         this._onCornerLup_ = this._onCornerLup.bind(this);
         this._cornersLayer.events.on("lup", this._onCornerLup, this);
 
-        this._planet.addLayer(this._trackLayer);
-        this._planet.addLayer(this._cornersLayer);
 
     }
 
@@ -166,8 +177,8 @@ class RulerScene extends RenderNode {
         this._preventClick = false;
         this._stopDrawing = false;
         this._pickedCorner = null;
-        this._trackLayer.remove();
-        this._cornersLayer.remove();
+        // this._trackLayer.remove();
+        // this._cornersLayer.remove();
 
         this.renderer.events.off("lclick", this._onLclick_);
         this.renderer.events.off("mousemove", this._onMouseMove_);
@@ -234,10 +245,10 @@ class RulerScene extends RenderNode {
             if (!this._preventClick) {
                 if (!this._startLonLat) {
                     this._stopDrawing = false;
-                    this._propsLabel.label.setVisibility(false);
+                    this._propsLabel.setVisibility(false);
                     this._trackEntity.polyline.setPath3v([]);
-                    this._cornerEntity[0].geoObject.setVisibility(true);
-                    this._cornerEntity[1].geoObject.setVisibility(true);
+                    this._cornerEntity[0].setVisibility(true);
+                    this._cornerEntity[1].setVisibility(true);
                     this._startLonLat = startLonLat;
                 } else {
                     this._startLonLat = null;
@@ -302,26 +313,42 @@ class RulerScene extends RenderNode {
     }
 
     clear() {
-        // удаляем трек
-        this._trackEntity.polyline.clear();
-        this._cornerEntity[0].geoObject.setVisibility(false);
-        this._cornerEntity[1].geoObject.setVisibility(false);
+        this._trackEntity.remove();
+        this._cornerEntity[0].remove();
+        this._cornerEntity[1].remove();
+        this._propsLabel.remove();
+        this._planet.removeLayer(this._trackLayer);
+        this._planet.removeLayer(this._cornersLayer);
     }
 
-    frame() {
+    isCornersPositionChanged() {
         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());
+            const startPos = t[0].clone(),
+                endPos = t[t.length - 1].clone();
+            return this._cornerEntity[0].getCartesian().equal(startPos) &&
+                this._cornerEntity[1].getCartesian().equal(endPos)
+        }
+        return false
+    }
 
-            if (!this._ignoreTerrain) {
-                let res = 0;
-                for (let i = 0, len = t.length - 1; i < len; i++) {
-                    res += t[i + 1].distance(t[i]);
+    frame() {
+        let t = this._trackEntity.polyline.getPath3v()[0];
+        if (t) {
+            const startPos = t[0].clone(),
+                endPos = t[t.length - 1].clone();
+
+            if (!this.isCornersPositionChanged()) {
+                this._cornerEntity[0].setCartesian3v(startPos);
+                this._cornerEntity[1].setCartesian3v(endPos);
+                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`);
                 }
-
-                this._propsLabel.setCartesian3v(t[Math.floor(t.length / 2)]);
-                this._propsLabel.label.setText(`${distanceFormat(res)}, ${Math.round(this._heading)} deg`);
             }
         }
     }

package/src/og/ellipsoid/Ellipsoid.js

@@ -409,19 +409,36 @@ class Ellipsoid {
         return new Vec3(pX * m_X, pY * m_Y, pZ * m_Z);
     }
 
+    /**
+     * Converts 3d cartesian coordinates to geodetic
+     * @param {Vec3} cart - Cartesian coordiantes
+     * @returns {LonLat} - Geodetic coordinates
+     */
     cartesianToLonLat(cart) {
-
         let p = this.projToSurface(cart);
-
         let n = this.getSurfaceNormal3v(p),
             h = cart.sub(p);
-
         return new LonLat(
             Math.atan2(n.x, n.z) * DEGREES,
             Math.asin(n.y) * DEGREES,
             Math.sign(h.dot(cart)) * h.length()
         );
     }
+    /**
+     * Converts 3d cartesian coordinates to geodetic
+     * @param {Vec3} cart - Cartesian coordiantes
+     * @param {LonLat} res - Link geodetic coordinates variable
+     * @returns {LonLat} - Geodetic coordinates
+     */
+    cartesianToLonLatRes(cart, res) {
+        let p = this.projToSurface(cart);
+        let n = this.getSurfaceNormal3v(p),
+            h = cart.sub(p);
+        res.lon = Math.atan2(n.x, n.z) * DEGREES;
+        res.lat = Math.asin(n.y) * DEGREES;
+        res.height = Math.sign(h.dot(cart)) * h.length();
+        return res;
+    }
 
     /**
      * Gets ellipsoid surface normal.

package/src/og/entity/Entity.js

@@ -531,7 +531,7 @@ class Entity {
         this.ray = ray;
         this.ray._entity = this;
         this.ray.setVisibility(this._visibility);
-        this._entityCollection && this._entityCollection._rayHandler.add(ray);
+        this._entityCollection && this._entityCollection.rayHandler.add(ray);
         return ray;
     }
 
@@ -548,7 +548,7 @@ class Entity {
         this.polyline = polyline;
         this.polyline._entity = this;
         this.polyline.setVisibility(this._visibility);
-        this._entityCollection && this._entityCollection._polylineHandler.add(polyline);
+        this._entityCollection && this._entityCollection.polylineHandler.add(polyline);
         return polyline;
     }
 
@@ -565,7 +565,7 @@ class Entity {
         this.pointCloud = pointCloud;
         this.pointCloud._entity = this;
         this.pointCloud.setVisibility(this._visibility);
-        this._entityCollection && this._entityCollection._pointCloudHandler.add(pointCloud);
+        this._entityCollection && this._entityCollection.pointCloudHandler.add(pointCloud);
         return pointCloud;
     }
 
@@ -600,7 +600,7 @@ class Entity {
         this.geoObject._entity = this;
         this.geoObject.setPosition3v(this._cartesian);
         this.geoObject.setVisibility(this._visibility);
-        this._entityCollection && this._entityCollection._geoObjectHandler.add(geoObject);
+        this._entityCollection && this._entityCollection.geoObjectHandler.add(geoObject);
         return geoObject;
     }
 
@@ -617,7 +617,7 @@ class Entity {
         this.strip = strip;
         this.strip._entity = this;
         this.strip.setVisibility(this._visibility);
-        this._entityCollection && this._entityCollection._stripHandler.add(strip);
+        this._entityCollection && this._entityCollection.stripHandler.add(strip);
         return strip;
     }
 
@@ -644,7 +644,7 @@ class Entity {
         entity._pickingColor = this._pickingColor;
         entity.parent = this;
         this.childrenNodes.push(entity);
-        this._entityCollection && this._entityCollection._addRecursively(entity);
+        this._entityCollection && this._entityCollection.appendChildEntity(entity);
     }
 
     /**

package/src/og/entity/EntityCollection.js

@@ -283,6 +283,10 @@ class EntityCollection {
         this.scaleByDistance[2] = farInvisible || math.MAX32;
     }
 
+    appendChildEntity(entity) {
+        this._addRecursively(entity);
+    }
+
     _addRecursively(entity) {
         // billboard
         entity.billboard && this.billboardHandler.add(entity.billboard);

package/src/og/entity/GeoObjectHandler.js

@@ -348,6 +348,8 @@ class GeoObjectHandler {
         for (let i = 0; i < this._instanceDataMapValues.length; i++) {
             this._loadDataTagTexture(this._instanceDataMapValues[i]);
         }
+
+        this.update();
     }
 
     _addGeoObjectToArray(geoObject) {
@@ -489,6 +491,7 @@ class GeoObjectHandler {
 
     drawPicking() {
         if (this._geoObjects.length && this.pickingEnabled) {
+            this.update();
             this._pickingPASS();
         }
     }