@openglobus/og 0.15.3 → 0.15.4

package/src/og/control/SimpleNavigation.js

@@ -1,128 +1,123 @@
-"use strict";
-
-import { input } from "../input/input.js";
-import { Control } from "./Control.js";
-
-/**
- * Simple keyboard camera navigation with W,S,A,D and shift keys to fly around the scene.
- * @class
- * @extends {Control}
- * @param {Object} [options] - Control options.
- */
-class SimpleNavigation extends Control {
-    constructor(options) {
-        options = options || {};
-        super(options);
-
-        this.camera = null;
-        this.speed = options.speed || 1.0;
-    }
-
-    onactivate() {}
-
-    ondeactivate() {}
-
-    oninit() {
-        this.camera = this.renderer.activeCamera;
-        this.renderer.events.on("keypress", input.KEY_W, this.onCameraMoveForward, this);
-        this.renderer.events.on("keypress", input.KEY_S, this.onCameraMoveBackward, this);
-        this.renderer.events.on("keypress", input.KEY_A, this.onCameraStrifeLeft, this);
-        this.renderer.events.on("keypress", input.KEY_D, this.onCameraStrifeRight, this);
-        this.renderer.events.on("keypress", input.KEY_UP, this.onCameraLookUp, this);
-        this.renderer.events.on("keypress", input.KEY_DOWN, this.onCameraLookDown, this);
-        this.renderer.events.on("keypress", input.KEY_LEFT, this.onCameraTurnLeft, this);
-        this.renderer.events.on("keypress", input.KEY_RIGHT, this.onCameraTurnRight, this);
-        this.renderer.events.on("keypress", input.KEY_Q, this.onCameraRollLeft, this);
-        this.renderer.events.on("keypress", input.KEY_E, this.onCameraRollRight, this);
-    }
-
-    onCameraMoveForward() {
-        if (this._active) {
-            var camera = this.camera;
-            camera.slide(0, 0, -this.speed);
-            camera.update();
-        }
-    }
-
-    onCameraMoveBackward() {
-        if (this._active) {
-            var camera = this.camera;
-            camera.slide(0, 0, this.speed);
-            camera.update();
-        }
-    }
-
-    onCameraStrifeLeft() {
-        if (this._active) {
-            var camera = this.camera;
-            camera.slide(-this.speed, 0, 0);
-            camera.update();
-        }
-    }
-
-    onCameraStrifeRight() {
-        if (this._active) {
-            var camera = this.camera;
-            camera.slide(this.speed, 0, 0);
-            camera.update();
-        }
-    }
-
-    onCameraLookUp() {
-        if (this._active) {
-            var cam = this.camera;
-            cam.pitch(0.5);
-            cam.update();
-        }
-    }
-
-    onCameraLookDown() {
-        if (this._active) {
-            var cam = this.camera;
-            cam.pitch(-0.5);
-            cam.update();
-        }
-    }
-
-    onCameraTurnLeft() {
-        if (this._active) {
-            var cam = this.camera;
-            cam.yaw(0.5);
-            cam.update();
-        }
-    }
-
-    onCameraTurnRight() {
-        if (this._active) {
-            var cam = this.camera;
-            cam.yaw(-0.5);
-            cam.update();
-        }
-    }
-
-    onCameraRollLeft() {
-        if (this._active) {
-            var cam = this.camera;
-            cam.roll(-0.5);
-            cam.update();
-        }
-    }
-
-    onCameraRollRight() {
-        if (this._active) {
-            var cam = this.camera;
-            cam.roll(0.5);
-            cam.update();
-        }
-    }
-}
-
-/**
- * Creates simple navigation control instance.
- */
-export function simpleNavigation(options) {
-    return new SimpleNavigation(options);
-}
-
-export { SimpleNavigation };
-
+"use strict";
+
+import { input } from "../input/input.js";
+import { Control } from "./Control.js";
+
+/**
+ * Simple keyboard camera navigation with W,S,A,D and shift keys to fly around the scene.
+ * @class
+ * @extends {Control}
+ * @param {Object} [options] - Control options.
+ */
+class SimpleNavigation extends Control {
+    constructor(options = {}) {
+        super({ autoActivate: true, ...options });
+
+        this.camera = null;
+        this.speed = options.speed || 1.0;
+    }
+
+    oninit() {
+        this.camera = this.renderer.activeCamera;
+        this.renderer.events.on("keypress", input.KEY_W, this.onCameraMoveForward, this);
+        this.renderer.events.on("keypress", input.KEY_S, this.onCameraMoveBackward, this);
+        this.renderer.events.on("keypress", input.KEY_A, this.onCameraStrifeLeft, this);
+        this.renderer.events.on("keypress", input.KEY_D, this.onCameraStrifeRight, this);
+        this.renderer.events.on("keypress", input.KEY_UP, this.onCameraLookUp, this);
+        this.renderer.events.on("keypress", input.KEY_DOWN, this.onCameraLookDown, this);
+        this.renderer.events.on("keypress", input.KEY_LEFT, this.onCameraTurnLeft, this);
+        this.renderer.events.on("keypress", input.KEY_RIGHT, this.onCameraTurnRight, this);
+        this.renderer.events.on("keypress", input.KEY_Q, this.onCameraRollLeft, this);
+        this.renderer.events.on("keypress", input.KEY_E, this.onCameraRollRight, this);
+    }
+
+    onCameraMoveForward() {
+        if (this._active) {
+            var camera = this.camera;
+            camera.slide(0, 0, -this.speed);
+            camera.update();
+        }
+    }
+
+    onCameraMoveBackward() {
+        if (this._active) {
+            var camera = this.camera;
+            camera.slide(0, 0, this.speed);
+            camera.update();
+        }
+    }
+
+    onCameraStrifeLeft() {
+        if (this._active) {
+            var camera = this.camera;
+            camera.slide(-this.speed, 0, 0);
+            camera.update();
+        }
+    }
+
+    onCameraStrifeRight() {
+        if (this._active) {
+            var camera = this.camera;
+            camera.slide(this.speed, 0, 0);
+            camera.update();
+        }
+    }
+
+    onCameraLookUp() {
+        if (this._active) {
+            var cam = this.camera;
+            cam.pitch(0.5);
+            cam.update();
+        }
+    }
+
+    onCameraLookDown() {
+        if (this._active) {
+            var cam = this.camera;
+            cam.pitch(-0.5);
+            cam.update();
+        }
+    }
+
+    onCameraTurnLeft() {
+        if (this._active) {
+            var cam = this.camera;
+            cam.yaw(0.5);
+            cam.update();
+        }
+    }
+
+    onCameraTurnRight() {
+        if (this._active) {
+            var cam = this.camera;
+            cam.yaw(-0.5);
+            cam.update();
+        }
+    }
+
+    onCameraRollLeft() {
+        if (this._active) {
+            var cam = this.camera;
+            cam.roll(-0.5);
+            cam.update();
+        }
+    }
+
+    onCameraRollRight() {
+        if (this._active) {
+            var cam = this.camera;
+            cam.roll(0.5);
+            cam.update();
+        }
+    }
+}
+
+/**
+ * Creates simple navigation control instance.
+ */
+export function simpleNavigation(options) {
+    return new SimpleNavigation(options);
+}
+
+export { SimpleNavigation };
+

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

@@ -0,0 +1,12 @@
+import { Ruler } from "../ruler/Ruler.js";
+import { HeightRulerScene } from "./HeightRulerScene.js";
+
+export class HeightRuler extends Ruler {
+    constructor(options) {
+        super({ ...options });
+        this._rulerScene = new HeightRulerScene({
+            name: `heightRulerScene:${this._id}`,
+            ignoreTerrain: false
+        });
+    }
+}

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