@openglobus/og 0.17.2 → 0.18.1

package/lib/js/control/EarthCoordinates.js

@@ -0,0 +1,161 @@
+import * as units from '../utils/units';
+import { Control } from './Control';
+import { heightMode } from '../utils/units';
+import { throttle } from '../utils/shared';
+const DECIMAL_TEMPLATE = `<div class="og-lat-side"></div><div class="og-lat-val"></div>
+    <div class="og-lon-side"></div><div class="og-lon-val"></div>
+    <div class="og-height"></div>
+    <div class="og-units-height"></div>`;
+const DEGREE_TEMPLATE = `<div class="og-lat-side"></div><div class="og-lat-val"></div>
+    <div class="og-lon-side"></div><div class="og-lon-val"></div>
+    <div class="og-height"></div>
+    <div class="og-units-height"></div>`;
+const CENTER_SVG = '<svg width="12" height="12"><g><path stroke-width="1" stroke-opacity="1" d="M6 0L6 12M0 6L12 6" stroke="#337ab7"></path></g></svg>';
+const TYPE_HTML = [DECIMAL_TEMPLATE, DEGREE_TEMPLATE];
+/**
+ * Control displays mouse or screen center Earth coordinates.
+ * @param {Boolean} [options.center] - Earth coordinates by screen center otherwise mouse pointer. False is default.
+ * @param {Boolean} [options.type] - Coordinates shown: 0 - is decimal degrees, 1 - degrees, 2 - mercator geodetic coordinates.
+ */
+export class EarthCoordinates extends Control {
+    constructor(options = {}) {
+        super(options);
+        this._type = options.type || 0;
+        this._TYPE_FUNC = [this._SHOW_DECIMAL, this._SHOW_DEGREE];
+        this._showFn = null;
+        this._el = null;
+        this._latSideEl = null;
+        this._lonSideEl = null;
+        this._latValEl = null;
+        this._lonValEl = null;
+        this._heightEl = null;
+        this._altUnitVal = options.altitudeUnit || "m";
+        this._heightModeVal = options.heightMode || "ell";
+        this._altUnit = units[this._altUnitVal];
+        this._heightMode = heightMode[this._heightModeVal];
+        this._lonLat = null;
+        this._centerMode = options.centerMode != undefined ? options.centerMode : true;
+    }
+    _SHOW_DECIMAL(ll) {
+        if (ll) {
+            let lat = ll.lat, lon = ll.lon;
+            if (lat >= 0) {
+                this._latSideEl.innerHTML = 'N';
+            }
+            else {
+                this._latSideEl.innerHTML = 'S';
+            }
+            if (lon >= 0) {
+                this._lonSideEl.innerHTML = 'E';
+            }
+            else {
+                this._lonSideEl.innerHTML = 'W';
+            }
+            this._latValEl.innerHTML = Math.abs(lat).toFixed(5) + '°';
+            this._lonValEl.innerHTML = Math.abs(lon).toFixed(5) + '°';
+        }
+    }
+    _SHOW_DEGREE(ll) {
+        if (ll) {
+            let lat = ll.lat, lon = ll.lon;
+            if (lat >= 0) {
+                this._latSideEl.innerHTML = 'N';
+            }
+            else {
+                this._latSideEl.innerHTML = 'S';
+            }
+            if (lon >= 0) {
+                this._lonSideEl.innerHTML = 'E';
+            }
+            else {
+                this._lonSideEl.innerHTML = 'W';
+            }
+            let t = 0;
+            let deg = lat < 0 ? Math.ceil(lat) : Math.floor(lat);
+            let min = Math.floor(t = Math.abs((lat - deg)) * 60);
+            let sec = Math.floor((t - min) * 6000) / 100.0;
+            this._latValEl.innerHTML = Math.abs(deg) + '°' + min + "'" + sec.toFixed(0) + '"';
+            deg = lon < 0 ? Math.ceil(lon) : Math.floor(lon);
+            min = Math.floor(t = Math.abs((lon - deg)) * 60);
+            sec = Math.floor((t - min) * 6000) / 100.0;
+            this._lonValEl.innerHTML = Math.abs(deg) + '°' + min + "'" + sec.toFixed(0) + '"';
+        }
+    }
+    _createCenterEl() {
+        let el = document.createElement('div');
+        el.className = 'og-center-icon';
+        el.innerHTML = CENTER_SVG;
+        return el;
+    }
+    _updateUnits() {
+        this._heightMode = heightMode[this._heightModeVal];
+        this._altUnit = units[this._altUnitVal];
+        this._el.querySelector(".og-units-height").innerHTML = units.toString(this._altUnit);
+        this._showHeight();
+    }
+    _refreshCoordinates() {
+        if (this._type >= this._TYPE_FUNC.length) {
+            this._type = 0;
+        }
+        let el = this._el;
+        el.innerHTML = TYPE_HTML[this._type];
+        this._latSideEl = el.querySelector(".og-lat-side");
+        this._lonSideEl = el.querySelector(".og-lon-side");
+        this._latValEl = el.querySelector(".og-lat-val");
+        this._lonValEl = el.querySelector(".og-lon-val");
+        this._heightEl = el.querySelector(".og-height");
+        this._showFn = this._TYPE_FUNC[this._type];
+        this._showFn(this._lonLat);
+    }
+    oninit() {
+        this._el = document.createElement('div');
+        this._el.classList.add("og-coordinates");
+        this.renderer.div.appendChild(this._el);
+        this._el.addEventListener("click", () => {
+            this._type++;
+            this._refreshCoordinates();
+            this._updateUnits();
+            this._showHeight();
+        });
+        if (this._centerMode) {
+            this.renderer.div.appendChild(this._createCenterEl());
+            this.planet.camera.events.on("moveend", this._grabCoordinates, this);
+            this.planet.camera.events.on("moveend", throttle(() => this._showHeight(), 400, true), this);
+        }
+        else {
+            this.renderer.events.on("mousemove", this._grabCoordinates, this);
+            this.renderer.events.on("mousestop", throttle(() => this._showHeight(), 400, true), this);
+        }
+        this._refreshCoordinates();
+        this._updateUnits();
+    }
+    _grabCoordinates(e) {
+        let px = e.pos;
+        let scrPx;
+        let r = this.renderer;
+        if (this._centerMode) {
+            scrPx = r.handler.getCenter();
+        }
+        else {
+            scrPx = px;
+        }
+        this._lonLat = this.planet.getLonLatFromPixelTerrain(scrPx) || null;
+        this._showFn(this._lonLat);
+    }
+    async _showHeight() {
+        if (this._lonLat && this.planet) {
+            let alt = 0;
+            this._heightEl.style.opacity = "0.7";
+            if (this._heightMode === heightMode.ell) {
+                alt = await this.planet.getHeightAboveELL(this._lonLat);
+                alt = Number(units.convertExt(true, units.m, this._altUnit, alt));
+            }
+            else if (this._heightMode === heightMode.msl) {
+                alt = await this.planet.getHeightDefault(this._lonLat);
+                alt = Number(units.convertExt(true, units.m, this._altUnit, alt));
+            }
+            this._heightEl.style.opacity = "1.0";
+            this._heightEl.innerHTML = alt.toString();
+        }
+    }
+}

package/lib/js/control/EarthNavigation.d.ts

@@ -0,0 +1,50 @@
+import { Control, IControlParams } from "./Control";
+import { ITouchState } from "../renderer/RendererEvents";
+import { IMouseState } from "../renderer/RendererEvents";
+import { Quat } from "../math/Quat";
+import { Sphere } from "../bv/Sphere";
+import { Vec3 } from "../math/Vec3";
+interface IEarthNavigationParams extends IControlParams {
+}
+declare class TouchExt {
+    x: number;
+    y: number;
+    prev_x: number;
+    prev_y: number;
+    grabbedPoint: Vec3 | null;
+    grabbedSpheroid: Sphere;
+    constructor();
+    dX(): number;
+    dY(): number;
+}
+export declare class EarthNavigation extends Control {
+    protected grabbedPoint: Vec3 | null;
+    protected grabbedDir: Vec3;
+    inertia: number;
+    protected grabbedSpheroid: Sphere;
+    protected _vRot: Quat;
+    protected _hRot: Quat;
+    protected _a: number;
+    protected scaleRot: number;
+    protected currState: number;
+    protected positionState: {
+        h: number;
+        max: number;
+        min: number;
+    }[];
+    protected touches: TouchExt[];
+    constructor(options?: IEarthNavigationParams);
+    switchZoomState(wheelDelta: number): void;
+    protected onMouseWheel(event: IMouseState): void;
+    oninit(): void;
+    onactivate(): void;
+    protected onTouchStart(e: ITouchState): void;
+    protected onTouchEnd(e: ITouchState): void;
+    protected onTouchMove(e: ITouchState): void;
+    protected onMouseLeftButtonClick(e: IMouseState): void;
+    stopRotation(): void;
+    protected onMouseLeftButtonUp(e: IMouseState): void;
+    protected onMouseLeftButtonDown(e: IMouseState): void;
+    protected onDraw(): void;
+}
+export {};

package/lib/js/control/EarthNavigation.js

@@ -0,0 +1,202 @@
+import { Control } from "./Control";
+import { LonLat } from "../LonLat";
+import { Quat } from "../math/Quat";
+import { Ray } from "../math/Ray";
+import { Sphere } from "../bv/Sphere";
+import { Vec2 } from "../math/Vec2";
+import { Vec3 } from "../math/Vec3";
+class TouchExt {
+    constructor() {
+        this.x = 0;
+        this.y = 0;
+        this.prev_x = 0;
+        this.prev_y = 0;
+        this.grabbedPoint = new Vec3();
+        this.grabbedSpheroid = new Sphere();
+    }
+    dX() {
+        return this.x - this.prev_x;
+    }
+    dY() {
+        return this.y - this.prev_y;
+    }
+}
+export class EarthNavigation extends Control {
+    constructor(options = {}) {
+        super(options);
+        this.grabbedPoint = new Vec3();
+        this.grabbedDir = new Vec3();
+        this.inertia = 0.007;
+        this.grabbedSpheroid = new Sphere();
+        this.planet = null;
+        this._vRot = new Quat();
+        this._hRot = new Quat();
+        this._a = 0.0;
+        this.scaleRot = 0;
+        this.currState = 0;
+        this.positionState = [
+            { h: 17119745.303455353, max: 0.98, min: -0.98 },
+            { h: 6866011, max: 0.98, min: -0.98 },
+            { h: 3000000, max: 0.98, min: -0.98 },
+            { h: 1000000, max: 0.98, min: -0.98 },
+            { h: 500000, max: 0.98, min: -0.98 }
+        ];
+        this.touches = [new TouchExt(), new TouchExt()];
+    }
+    switchZoomState(wheelDelta) {
+        this.stopRotation();
+        if (wheelDelta > 0) {
+            this.currState++;
+        }
+        else {
+            this.currState--;
+        }
+        if (this.currState <= 0)
+            this.currState = 0;
+        if (this.currState >= this.positionState.length) {
+            this.currState = this.positionState.length - 1;
+        }
+        this.planet.stopFlying();
+        const ll = this.planet.camera._lonLat;
+        this.planet.flyLonLat(new LonLat(ll.lon, ll.lat, this.positionState[this.currState].h));
+    }
+    onMouseWheel(event) {
+        this.switchZoomState(event.wheelDelta);
+    }
+    oninit() {
+        this.activate();
+    }
+    onactivate() {
+        let r = this.renderer;
+        r.events.on("mousewheel", this.onMouseWheel, this);
+        r.events.on("lhold", this.onMouseLeftButtonDown, this);
+        r.events.on("ldown", this.onMouseLeftButtonClick, this);
+        r.events.on("lup", this.onMouseLeftButtonUp, this);
+        r.events.on("touchstart", this.onTouchStart, this);
+        r.events.on("touchend", this.onTouchEnd, this);
+        r.events.on("touchmove", this.onTouchMove, this);
+        r.events.on("draw", this.onDraw, this);
+    }
+    onTouchStart(e) {
+        if (e.sys.touches.length == 1) {
+            const t = this.touches[0];
+            t.x = e.sys.touches.item(0).pageX - e.sys.offsetLeft;
+            t.y = e.sys.touches.item(0).pageY - e.sys.offsetTop;
+            t.prev_x = e.sys.touches.item(0).pageX - e.sys.offsetLeft;
+            t.prev_y = e.sys.touches.item(0).pageY - e.sys.offsetTop;
+            // t.grabbedPoint = this.planet!.getCartesianFromPixelTerrain(t, true);
+            t.grabbedPoint = this.planet.getCartesianFromPixelTerrain(new Vec2(t.x, t.y)) || null;
+            if (t.grabbedPoint) {
+                t.grabbedSpheroid.radius = t.grabbedPoint.length();
+                this.stopRotation();
+            }
+        }
+    }
+    onTouchEnd(e) {
+        if (e.sys.touches.length == 0) {
+            this.scaleRot = 1;
+            if (Math.abs(this.touches[0].x - this.touches[0].prev_x) < 3 &&
+                Math.abs(this.touches[0].y - this.touches[0].prev_y) < 3)
+                this.stopRotation();
+        }
+    }
+    onTouchMove(e) {
+        if (e.sys.touches.length == 1) {
+            let cam = this.planet.camera;
+            let t = this.touches[0];
+            t.prev_x = t.x;
+            t.prev_y = t.y;
+            t.x = e.sys.touches.item(0).pageX - e.sys.offsetLeft;
+            t.y = e.sys.touches.item(0).pageY - e.sys.offsetTop;
+            if (!t.grabbedPoint)
+                return;
+            let direction = cam.unproject(t.x, t.y);
+            let targetPoint = new Ray(cam.eye, direction).hitSphere(t.grabbedSpheroid);
+            if (targetPoint) {
+                this._a =
+                    Math.acos(t.grabbedPoint.y / t.grabbedSpheroid.radius) -
+                        Math.acos(targetPoint.y / t.grabbedSpheroid.radius);
+                this._vRot = Quat.axisAngleToQuat(cam._u, this._a);
+                this._hRot = Quat.getRotationBetweenVectors(new Vec3(targetPoint.x, 0.0, targetPoint.z).normal(), new Vec3(t.grabbedPoint.x, 0.0, t.grabbedPoint.z).normal());
+                let rot = this._hRot.mul(this._vRot);
+                let state = this.positionState[this.currState];
+                let lim = rot.mulVec3(cam.eye).normal().dot(Vec3.NORTH);
+                if (lim > state.max || lim < state.min) {
+                    rot = Quat.yRotation(rot.getYaw());
+                }
+                cam.set(rot.mulVec3(cam.eye), Vec3.ZERO, Vec3.NORTH);
+                cam.update();
+            }
+        }
+    }
+    onMouseLeftButtonClick(e) {
+        this.renderer.handler.canvas.classList.add("ogGrabbingPoiner");
+        this.grabbedPoint = this.planet.getCartesianFromMouseTerrain() || null;
+        this.grabbedDir.copy(e.direction);
+        if (this.grabbedPoint) {
+            this.grabbedSpheroid.radius = this.grabbedPoint.length();
+            this.stopRotation();
+        }
+    }
+    stopRotation() {
+        this.scaleRot = 0.0;
+        this._a = 0.0;
+        this._vRot.clear();
+        this._hRot.clear();
+    }
+    onMouseLeftButtonUp(e) {
+        this.scaleRot = 1;
+        this.renderer.handler.canvas.classList.remove("ogGrabbingPoiner");
+        if (Math.abs(e.x - e.prev_x) < 3 && Math.abs(e.y - e.prev_y) < 3)
+            this.stopRotation();
+    }
+    onMouseLeftButtonDown(e) {
+        let cam = this.planet.camera;
+        if (!this.grabbedPoint || cam.isFlying())
+            return;
+        if (this.renderer.events.mouseState.moving) {
+            let targetPoint = new Ray(cam.eye, e.direction).hitSphere(this.grabbedSpheroid);
+            if (targetPoint) {
+                this._a = Math.acos(this.grabbedPoint.y / this.grabbedSpheroid.radius) -
+                    Math.acos(targetPoint.y / this.grabbedSpheroid.radius);
+                let rot = this._vRot = Quat.axisAngleToQuat(cam._u, this._a);
+                cam.set(rot.mulVec3(cam.eye), Vec3.ZERO, rot.mulVec3(cam.getUp()));
+                this._hRot = Quat.getRotationBetweenVectors(new Vec3(targetPoint.x, 0.0, targetPoint.z).normal(), new Vec3(this.grabbedPoint.x, 0.0, this.grabbedPoint.z).normal());
+                rot = this._hRot;
+                cam.set(rot.mulVec3(cam.eye), Vec3.ZERO, rot.mulVec3(cam.getUp()));
+                cam.update();
+            }
+        }
+        else {
+            this.scaleRot = 0;
+        }
+    }
+    onDraw() {
+        let r = this.renderer;
+        let cam = this.planet.camera;
+        if (r.events.mouseState.leftButtonDown || !this.scaleRot || cam.isFlying())
+            return;
+        this.scaleRot -= this.inertia;
+        if (this.scaleRot <= 0) {
+            this.scaleRot = 0;
+        }
+        else {
+            this._vRot = Quat.axisAngleToQuat(cam._u, this._a);
+            let rot = this._vRot.mul(this._hRot);
+            let lim = rot.mulVec3(cam.eye).normal().dot(Vec3.NORTH);
+            let state = this.positionState[this.currState];
+            if (lim > state.max || lim < state.min) {
+                rot = Quat.yRotation(rot.getYaw());
+            }
+            r.controlsBag.scaleRot = this.scaleRot;
+            rot = rot
+                .slerp(Quat.IDENTITY, 1 - this.scaleRot * this.scaleRot * this.scaleRot)
+                .normalize();
+            if (!(rot.x || rot.y || rot.z)) {
+                this.scaleRot = 0;
+            }
+            cam.set(rot.mulVec3(cam.eye), Vec3.ZERO, Vec3.NORTH);
+            cam.update();
+        }
+    }
+}

package/lib/js/control/GeoImageDragControl.d.ts

@@ -0,0 +1,22 @@
+import { Control, IControlParams } from './Control';
+import { Layer } from "../layer/Layer";
+import { ToggleButton } from "../ui/ToggleButton";
+import { IMouseState } from "../renderer/RendererEvents";
+interface IGeoImageDragControlParams extends IControlParams {
+}
+export declare class GeoImageDragControl extends Control {
+    protected _cornerIndex: number;
+    protected _catchCorner: boolean;
+    protected _toggleBtn: ToggleButton;
+    constructor(options?: IGeoImageDragControlParams);
+    oninit(): void;
+    onactivate(): void;
+    ondeactivate(): void;
+    _bindLayer(layer: Layer): void;
+    protected _unbindLayer(layer: Layer): void;
+    protected _onLUp(ms: IMouseState): void;
+    protected _onLDown(ms: IMouseState): void;
+    protected _onMouseLeave(): void;
+    protected _onMouseMove(ms: IMouseState): void;
+}
+export {};

package/lib/js/control/GeoImageDragControl.js

@@ -0,0 +1,102 @@
+import { BaseGeoImage } from '../layer/BaseGeoImage';
+import { Control } from './Control';
+import { ToggleButton } from "../ui/ToggleButton";
+const ICON_BUTTON_SVG = `<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M16 13l6.964 4.062-2.973.85 2.125 3.681-1.732 1-2.125-3.68-2.223 2.15L16 13zm-2-7h2v2h5a1 1 0 0 1 1 1v4h-2v-3H10v10h4v2H9a1 1 0 0 1-1-1v-5H6v-2h2V9a1 1 0 0 1 1-1h5V6zM4 14v2H2v-2h2zm0-4v2H2v-2h2zm0-4v2H2V6h2zm0-4v2H2V2h2zm4 0v2H6V2h2zm4 0v2h-2V2h2zm4 0v2h-2V2h2z" fill="#000"/></svg>`;
+export class GeoImageDragControl extends Control {
+    constructor(options = {}) {
+        super(options);
+        this._cornerIndex = -1;
+        this._catchCorner = false;
+        this._toggleBtn = new ToggleButton({
+            classList: ["og-map-button", "og-geoimagegrag_button"],
+            icon: ICON_BUTTON_SVG
+        });
+    }
+    oninit() {
+        this._toggleBtn.appendTo(this.renderer.div);
+        this.planet.events.on('layeradd', (e) => {
+            if (this.isActive()) {
+                this._bindLayer(e);
+            }
+        }, this);
+        this._toggleBtn.events.on("change", (isActive) => {
+            if (isActive) {
+                this.activate();
+            }
+            else {
+                this.deactivate();
+            }
+        });
+    }
+    onactivate() {
+        super.onactivate();
+        const p = this.planet;
+        for (let i = 0; i < p.layers.length; i++) {
+            this._bindLayer(p.layers[i]);
+        }
+    }
+    ondeactivate() {
+        super.ondeactivate();
+        const p = this.planet;
+        for (let i = 0; i < p.layers.length; i++) {
+            this._unbindLayer(p.layers[i]);
+        }
+    }
+    _bindLayer(layer) {
+        if (layer instanceof BaseGeoImage) {
+            layer.events.on('mousemove', this._onMouseMove, this);
+            layer.events.on("mouseleave", this._onMouseLeave, this);
+            layer.events.on('ldown', this._onLDown, this);
+            layer.events.on('lup', this._onLUp, this);
+        }
+    }
+    _unbindLayer(layer) {
+        if (layer instanceof BaseGeoImage) {
+            layer.events.off('mousemove', this._onMouseMove);
+            layer.events.off("mouseleave", this._onMouseLeave);
+            layer.events.off('ldown', this._onLDown);
+            layer.events.off('lup', this._onLUp);
+        }
+    }
+    _onLUp(ms) {
+        this._catchCorner = false;
+        ms.renderer.controls.mouseNavigation.activate();
+    }
+    _onLDown(ms) {
+        if (this._cornerIndex !== -1) {
+            this._catchCorner = true;
+            ms.renderer.controls.mouseNavigation.deactivate();
+        }
+    }
+    _onMouseLeave() {
+        document.body.style.cursor = 'auto';
+    }
+    _onMouseMove(ms) {
+        let layer = ms.pickingObject;
+        const p = this.planet;
+        if (this._catchCorner) { // mouse is catching a corner
+            let corners = layer.getCornersLonLat();
+            // corners[this._cornerIndex] = p.getLonLatFromPixelTerrain(ms, true);
+            corners[this._cornerIndex] = p.getLonLatFromPixelTerrain(ms);
+            layer.setCornersLonLat(corners);
+        }
+        else { // mouse isn't catching
+            this._cornerIndex = -1;
+            for (let i = 0; i < layer._cornersWgs84.length; i++) {
+                // let ground = p.getLonLatFromPixelTerrain(ms, true);
+                let ground = p.getLonLatFromPixelTerrain(ms);
+                // mouse is near
+                //if (ground && p.ellipsoid.getGreatCircleDistance(layer._cornersWgs84[i], ground) / p.getDistanceFromPixel(ms, true) <= 0.05) {
+                if (ground && p.ellipsoid.getGreatCircleDistance(layer._cornersWgs84[i], ground) / p.getDistanceFromPixel(ms) <= 0.05) {
+                    this._cornerIndex = i;
+                    document.body.style.cursor = 'move';
+                    break;
+                    // mouse is far
+                }
+                else {
+                    document.body.style.cursor = 'auto';
+                }
+            }
+        }
+    }
+}

package/lib/js/control/KeyboardNavigation.d.ts

@@ -0,0 +1,28 @@
+import { Control, IControlParams } from "./Control";
+interface IKeyboardNavigationParams extends IControlParams {
+    step?: number;
+}
+/**
+ * Planet camera keyboard navigation. Use W,S,A,D and left shift key for fly around a planet.
+ */
+export declare class KeyboardNavigation extends Control {
+    step: number;
+    constructor(options?: IKeyboardNavigationParams);
+    onactivate(): void;
+    ondeactivate(): void;
+    oninit(): void;
+    protected onCameraMoveForward(): void;
+    protected onCameraMoveBackward(): void;
+    protected onCameraStrifeLeft(): void;
+    protected onCameraStrifeRight(): void;
+    protected onCameraLookUp(): void;
+    protected onCameraLookDown(): void;
+    protected onCameraLookLeft(): void;
+    protected onCameraLookRight(): void;
+    protected onCameraTurnLeft(): void;
+    protected onCameraTurnRight(): void;
+    protected onCameraRollNorth(): void;
+    protected onCameraRollLeft(): void;
+    protected onCameraRollRight(): void;
+}
+export {};