@openglobus/og 0.18.4 → 0.19.0

package/lib/js/Globe.d.ts

@@ -29,6 +29,7 @@ interface IGlobeParams {
     quadTreeStrategyPrototype?: any;
     maxLoadingRequests?: number;
     atmosphereEnabled?: boolean;
+    transitionOpacityEnabled?: boolean;
     terrain?: EmptyTerrain;
     controls?: Control[];
     useEarthNavigation?: boolean;
@@ -92,6 +93,7 @@ interface IGlobeParams {
  * @param {number} [options.msaa=0] - MSAA antialiasing parameter: 2,4,8,16. Default is 0.
  * @param {number} [options.dpi] - Device pixel ratio. Default is current screen DPI.
  * @param {boolean} [options.atmosphereEnabled] - Enables atmosphere effect.
+ * @param {boolean} [options.transtitionOpacityEnabled] - Enables terrain smooth opacity transition effect.
  */
 declare class Globe {
     static __counter__: number;

package/lib/js/Globe.js

@@ -66,6 +66,7 @@ const PLANET_NAME_PREFIX = "globus_planet_";
  * @param {number} [options.msaa=0] - MSAA antialiasing parameter: 2,4,8,16. Default is 0.
  * @param {number} [options.dpi] - Device pixel ratio. Default is current screen DPI.
  * @param {boolean} [options.atmosphereEnabled] - Enables atmosphere effect.
+ * @param {boolean} [options.transtitionOpacityEnabled] - Enables terrain smooth opacity transition effect.
  */
 class Globe {
     constructor(options) {
@@ -146,7 +147,8 @@ class Globe {
             minEqualZoomCameraSlope: options.minEqualZoomCameraSlope,
             quadTreeStrategyPrototype: options.quadTreeStrategyPrototype,
             maxLoadingRequests: options.maxLoadingRequests,
-            atmosphereEnabled: options.atmosphereEnabled
+            atmosphereEnabled: options.atmosphereEnabled,
+            transitionOpacityEnabled: options.transitionOpacityEnabled
         });
         // Attach terrain provider (can be one object or array)
         if (options.terrain) {

package/lib/js/camera/PlanetCamera.d.ts

@@ -137,7 +137,7 @@ declare class PlanetCamera extends Camera {
      * @param {Number} height - Camera height
      * @returns {Vec3}
      */
-    getExtentPosition(extent: Extent, height?: number): Vec3;
+    getExtentPosition(extent: Extent, height?: number | null): Vec3;
     /**
      * View current extent.
      * @public
@@ -156,7 +156,7 @@ declare class PlanetCamera extends Camera {
      * @param {Function} [startCallback] - Callback that calls before the flying begins.
      * @param {Function} [frameCallback] - Each frame callback
      */
-    flyExtent(extent: Extent, height?: number, up?: Vec3, ampl?: number, completeCallback?: Function, startCallback?: Function, frameCallback?: Function): void;
+    flyExtent(extent: Extent, height?: number | null, up?: Vec3 | null, ampl?: number | null, completeCallback?: Function | null, startCallback?: Function | null, frameCallback?: Function | null): void;
     viewDistance(cartesian: Vec3, distance?: number): void;
     flyDistance(cartesian: Vec3, distance?: number, ampl?: number, completeCallback?: Function, startCallback?: Function, frameCallback?: Function): void;
     /**

package/lib/js/camera/PlanetCamera.js

@@ -133,7 +133,8 @@ class PlanetCamera extends Camera {
      * @param {Number} height - Camera height
      * @returns {Vec3}
      */
-    getExtentPosition(extent, height = 0) {
+    getExtentPosition(extent, height) {
+        height = height || 0;
         let north = extent.getNorth();
         let south = extent.getSouth();
         let east = extent.getEast();
@@ -196,7 +197,7 @@ class PlanetCamera extends Camera {
      * @param {Function} [frameCallback] - Each frame callback
      */
     flyExtent(extent, height, up, ampl, completeCallback, startCallback, frameCallback) {
-        this.flyCartesian(this.getExtentPosition(extent, height), Vec3.ZERO, up, ampl, completeCallback, startCallback, frameCallback);
+        this.flyCartesian(this.getExtentPosition(extent, height), Vec3.ZERO, up, ampl == null ? 1 : ampl, completeCallback, startCallback, frameCallback);
     }
     viewDistance(cartesian, distance = 10000.0) {
         let p0 = this.eye.add(this.getForward().scaleTo(distance));

package/lib/js/control/DebugInfo.js

@@ -78,6 +78,7 @@ export class DebugInfo extends Control {
         this._canvasTiles = new CanvasTiles("Tile grid", {
             visibility: true,
             isBaseLayer: false,
+            hideInLayerSwitcher: true,
             drawTile: function (material, applyCanvas) {
                 //
                 // This is important create canvas here!
@@ -159,6 +160,10 @@ export class DebugInfo extends Control {
                     label: "Nodes count",
                     frame: () => p._renderedNodes.length
                 },
+                {
+                    label: "Planet._fadingNodes",
+                    frame: () => p._fadingNodes.size
+                },
                 {
                     label: "createdNodes",
                     frame: () => p._createdNodesCount

package/lib/js/control/EarthCoordinates.js

@@ -51,8 +51,8 @@ export class EarthCoordinates extends Control {
             else {
                 this._lonSideEl.innerHTML = 'W';
             }
-            this._latValEl.innerHTML = Math.abs(lat).toFixed(5) + '°';
-            this._lonValEl.innerHTML = Math.abs(lon).toFixed(5) + '°';
+            this._latValEl.innerHTML = Math.abs(lat).toFixed(7) + '°';
+            this._lonValEl.innerHTML = Math.abs(lon).toFixed(7) + '°';
         }
     }
     _SHOW_DEGREE(ll) {

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

@@ -2,18 +2,33 @@ import { Control, IControlParams } from "./Control";
 import { Dialog } from "../ui/Dialog";
 import { Layer } from "../layer/Layer";
 import { ToggleButton } from "../ui/ToggleButton";
+import { IViewParams, View } from "../ui/View";
 interface ILayerSwitcherParams extends IControlParams {
 }
+declare class LayerButtonView extends View<Layer> {
+    constructor(params: IViewParams);
+    render(params?: any): this;
+    protected _onVisibilityChange: (layer: Layer) => void;
+    protected _onClick: () => void;
+    protected _onDblClick: () => void;
+    remove(): void;
+}
 /**
  * Advanced :) layer switcher, includes base layers, overlays, geo images etc. groups.
  * Double click for zoom, drag-and-drop to change zIndex
  */
 export declare class LayerSwitcher extends Control {
-    dialog: Dialog<null>;
-    protected _menuBtn: ToggleButton;
+    protected _dialog: Dialog<null>;
+    protected _toggleBtn: ToggleButton;
+    protected _panel: View<null>;
+    $baseLayers: HTMLElement | null;
+    $overlays: HTMLElement | null;
+    _layerViews: LayerButtonView[];
     constructor(options?: ILayerSwitcherParams);
     oninit(): void;
-    addNewLayer: (layer: Layer) => void;
+    protected _initLayers(): void;
+    protected _createLayerButton(layer: Layer): LayerButtonView;
+    addLayer: (layer: Layer) => void;
     removeLayer: (layer: Layer) => void;
     onactivate(): void;
     ondeactivate(): void;

package/lib/js/control/LayerSwitcher.js

@@ -1,6 +1,8 @@
 import { Control } from "./Control";
 import { Dialog } from "../ui/Dialog";
 import { ToggleButton } from "../ui/ToggleButton";
+import { View } from "../ui/View";
+import { stringTemplate } from "../utils/shared";
 const ICON_BUTTON_SVG = `<?xml version="1.0" encoding="utf-8"?>
 <!-- Svg Vector Icons : http://www.onlinewebfonts.com/icon -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
@@ -8,6 +10,60 @@ const ICON_BUTTON_SVG = `<?xml version="1.0" encoding="utf-8"?>
 <metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata>
 <g><path d="M500,573.5c-3.2,0-6.5-0.6-9.5-1.9L25,375.6c-9.1-3.8-15-12.7-15-22.6s5.9-18.8,15-22.6l465.5-196c6.1-2.5,12.9-2.5,19,0l465.5,196c9.1,3.8,15,12.7,15,22.6s-5.9,18.8-15,22.6l-465.5,196C506.5,572.9,503.2,573.5,500,573.5L500,573.5z M97.6,353L500,522.4L902.4,353L500,183.6L97.6,353L97.6,353z"/><path d="M500,720.5c-3.2,0-6.5-0.6-9.5-1.9L25,522.6c-12.4-5.2-18.3-19.6-13.1-32.1c5.2-12.5,19.6-18.3,32.1-13.1l456,192l456-192c12.4-5.2,26.9,0.6,32.1,13.1s-0.6,26.9-13.1,32.1l-465.5,196C506.5,719.9,503.2,720.5,500,720.5L500,720.5z"/><path d="M500,867.5c-3.2,0-6.5-0.6-9.5-1.9L25,669.6c-12.4-5.2-18.3-19.6-13.1-32.1c5.2-12.5,19.6-18.3,32.1-13.1l456,192l456-192c12.4-5.2,26.9,0.6,32.1,13.1c5.2,12.5-0.6,26.8-13.1,32.1l-465.5,196C506.5,866.9,503.2,867.5,500,867.5L500,867.5z"/></g>
 </svg>`;
+const TEMPLATE = `<div class="og-layerSwitcher">
+      <div class="og-layerSwitcher__title">Base Layers</div>
+      <div class="og-layerSwitcher__list og-layerSwitcher__baseLayers"></div>        
+        
+      <div class="og-layerSwitcher__title">Overlays</div>
+      <div class="og-layerSwitcher__list og-layerSwitcher__overlays"></div>
+         
+    </div>`;
+const LAYER_BUTTON_TEMPLATE = `<button title={title} class="og-layerSwitcher__layerButton">{icon}<div class="og-layerSwitcher__name">{name}</div></button>`;
+class LayerButtonView extends View {
+    constructor(params) {
+        super({
+            template: stringTemplate(LAYER_BUTTON_TEMPLATE, {
+                title: params.model.name,
+                name: params.model.name,
+                icon: params.model.iconSrc ? `<img src="${params.model.iconSrc}" />` : ""
+            }),
+            ...params
+        });
+        this._onVisibilityChange = (layer) => {
+            if (this.el) {
+                if (this.model.getVisibility()) {
+                    this.el.classList.add("og-layerSwitcher__visible");
+                }
+                else {
+                    this.el.classList.remove("og-layerSwitcher__visible");
+                }
+            }
+        };
+        this._onClick = () => {
+            if (this.model.isBaseLayer()) {
+                this.model.setVisibility(true);
+            }
+            else {
+                this.model.setVisibility(!this.model.getVisibility());
+            }
+        };
+        this._onDblClick = () => {
+            this.model.flyExtent();
+        };
+    }
+    render(params) {
+        super.render(params);
+        this.model.events.on("visibilitychange", this._onVisibilityChange);
+        this._onVisibilityChange(this.model);
+        this.el.addEventListener("click", this._onClick);
+        this.el.addEventListener("dblclick", this._onDblClick);
+        return this;
+    }
+    remove() {
+        super.remove();
+        this.model.events.off("visibilitychange", this._onVisibilityChange);
+    }
+}
 /**
  * Advanced :) layer switcher, includes base layers, overlays, geo images etc. groups.
  * Double click for zoom, drag-and-drop to change zIndex
@@ -18,34 +74,78 @@ export class LayerSwitcher extends Control {
             name: "LayerSwitcher",
             ...options
         });
-        this.addNewLayer = (layer) => {
+        this.addLayer = (layer) => {
+            if (!layer.hideInLayerSwitcher) {
+                let layerView = this._createLayerButton(layer);
+                this._layerViews.push(layerView);
+                if (layer.isBaseLayer()) {
+                    layerView.appendTo(this.$baseLayers);
+                }
+                else {
+                    layerView.appendTo(this.$overlays);
+                }
+            }
         };
         this.removeLayer = (layer) => {
+            for (let i = 0; i < this._layerViews.length; i++) {
+                let li = this._layerViews[i];
+                if (li.model.isEqual(layer)) {
+                    li.remove();
+                    this._layerViews.splice(i, 1);
+                    break;
+                }
+            }
         };
-        this.dialog = new Dialog({
+        this._dialog = new Dialog({
             title: "Layer Switcher",
             top: 15,
             useHide: true,
             visible: false,
-            width: 200
+            width: 300,
+            maxHeight: 500
         });
-        this._menuBtn = new ToggleButton({
-            classList: ["og-map-button", "og-layerswitcher_button"],
+        this._panel = new View({
+            template: TEMPLATE
+        });
+        this._toggleBtn = new ToggleButton({
+            classList: ["og-map-button", "og-layerSwitcher_button"],
             icon: ICON_BUTTON_SVG
         });
+        this.$baseLayers = null;
+        this.$overlays = null;
+        this._layerViews = [];
     }
     oninit() {
-        this.dialog.appendTo(this.planet.renderer.div);
-        this.dialog.setPosition(this.planet.renderer.div.clientWidth - this.dialog.width - 67);
-        this.dialog.events.on("visibility", (v) => {
-            this._menuBtn.setActive(v);
+        this._toggleBtn.appendTo(this.renderer.div);
+        this._dialog.appendTo(this.planet.renderer.div);
+        this._panel.appendTo(this._dialog.container);
+        this.$baseLayers = this._panel.el.querySelector(".og-layerSwitcher__baseLayers");
+        this.$overlays = this._panel.el.querySelector(".og-layerSwitcher__overlays");
+        this._dialog.setPosition(this.planet.renderer.div.clientWidth - this._dialog.width - 67);
+        this._dialog.events.on("visibility", (v) => {
+            this._toggleBtn.setActive(v);
+        });
+        this._toggleBtn.events.on("change", (isActive) => {
+            this._dialog.setVisibility(isActive);
         });
-        this.planet.events.on("layeradd", this.addNewLayer, this);
+        this.planet.events.on("layeradd", this.addLayer, this);
         this.planet.events.on("layerremove", this.removeLayer, this);
+        this._initLayers();
+    }
+    _initLayers() {
+        let layers = this.planet.layers;
+        for (let i = 0; i < layers.length; i++) {
+            this.addLayer(layers[i]);
+        }
+    }
+    _createLayerButton(layer) {
+        return new LayerButtonView({
+            model: layer
+        });
     }
     onactivate() {
     }
     ondeactivate() {
-        this.dialog.hide();
+        this._dialog.hide();
     }
 }

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

@@ -58,5 +58,7 @@ export declare class MouseNavigation extends Control {
     onShiftFree(): void;
     protected onMouseMove(e: IMouseState): void;
     protected onDraw(): void;
+    lockPlanet(skipTerrain?: boolean): void;
+    freePlanet(): void;
 }
 export {};

package/lib/js/control/MouseNavigation.js

@@ -176,9 +176,7 @@ export class MouseNavigation extends Control {
         this.planet.stopFlying();
         this.stopRotation();
         this._deactivate = true;
-        this.planet.layerLock.lock(this._keyLock);
-        //this.planet!.terrainLock.lock(this._keyLock);
-        this.planet._normalMapCreator.lock(this._keyLock);
+        this.lockPlanet(true);
         this.stepsForward = MouseNavigation.getMovePointsFromPixelTerrain(this.planet.camera, this.planet, this.stepsCount, this.distDiff, e.pos, e.wheelDelta > 0, e.direction) || null;
         this._wheelDirection = e.wheelDelta;
         if (this.stepsForward) {
@@ -227,9 +225,7 @@ export class MouseNavigation extends Control {
     }
     stopRotation() {
         this.qRot.clear();
-        this.planet.layerLock.free(this._keyLock);
-        this.planet.terrainLock.free(this._keyLock);
-        this.planet._normalMapCreator.free(this._keyLock);
+        this.freePlanet();
     }
     onMouseLeftButtonUp(e) {
         this.renderer.handler.canvas.classList.remove("ogGrabbingPoiner");
@@ -322,9 +318,7 @@ export class MouseNavigation extends Control {
             else {
                 if (this._deactivate) {
                     this._deactivate = false;
-                    this.planet.layerLock.free(this._keyLock);
-                    this.planet.terrainLock.free(this._keyLock);
-                    this.planet._normalMapCreator.free(this._keyLock);
+                    this.freePlanet();
                 }
             }
             if (r.events.mouseState.leftButtonDown || !this.scaleRot) {
@@ -348,15 +342,21 @@ export class MouseNavigation extends Control {
                 cam._b = rot.mulVec3(cam._b);
             }
             if (cam.eye.distance(prevEye) / cam.getAltitude() > 0.01) {
-                this.planet.layerLock.lock(this._keyLock);
-                this.planet.terrainLock.lock(this._keyLock);
-                this.planet._normalMapCreator.lock(this._keyLock);
+                this.lockPlanet();
             }
             else {
-                this.planet.layerLock.free(this._keyLock);
-                this.planet.terrainLock.free(this._keyLock);
-                this.planet._normalMapCreator.free(this._keyLock);
+                this.freePlanet();
             }
         }
     }
+    lockPlanet(skipTerrain) {
+        this.planet.layerLock.lock(this._keyLock);
+        !skipTerrain && this.planet.terrainLock.lock(this._keyLock);
+        this.planet._normalMapCreator.lock(this._keyLock);
+    }
+    freePlanet() {
+        this.planet.layerLock.free(this._keyLock);
+        this.planet.terrainLock.free(this._keyLock);
+        this.planet._normalMapCreator.free(this._keyLock);
+    }
 }

package/lib/js/control/elevationProfile/ElevationProfile.d.ts

@@ -2,60 +2,76 @@ import { EventsHandler } from '../../Events';
 import { Vec3 } from "../../math/Vec3";
 import { Planet } from "../../scene/Planet";
 import { LonLat } from "../../LonLat";
-interface ElevationProfileParams {
-    planet: Planet;
+export interface ElevationProfileParams {
+    planet?: Planet;
 }
-interface IProfileData {
+export interface IProfileData {
     dist: number;
     minY: number;
     maxY: number;
-    trackCoords: number[][];
-    groundCoords: number[][];
+    trackCoords: TrackItem[];
+    groundCoords: GroundItem[];
 }
-type ElevationProfileEventsList = ["profilecollected"];
+export type ElevationProfileDrawData = [TrackItem[], GroundItem[]];
+type ElevationProfileEventsList = ["startcollecting", "profilecollected", "clear"];
 /**
  * Point types
  */
-declare const SAFE = 0;
-declare const WARNING = 1;
-declare const COLLISION = 2;
-declare class ElevationProfile {
+export declare const SAFE = 0;
+export declare const WARNING = 1;
+export declare const COLLISION = 2;
+type WarningLevel = typeof SAFE | typeof WARNING | typeof COLLISION;
+/**
+ * 0 - distance, 1 - elevation, 2 - related ground point index
+ */
+export type TrackItem = [number, number, number];
+/**
+ * 0 - distance, 1 - elevation, 2 - warning level, 3 - ..., 4 - related track point index
+ */
+export type GroundItem = [number, number, WarningLevel, number, number];
+export declare class ElevationProfile {
     events: EventsHandler<ElevationProfileEventsList>;
-    planet: Planet;
+    planet: Planet | null;
     protected _warningHeightLevel: number;
     protected _pointsReady: boolean;
     protected _isWarning: boolean;
+    protected _planeDistance: number;
     protected _minX: number;
     protected _maxX: number;
     protected _minY: number;
     protected _maxY: number;
-    protected _drawData: [number[][], number[][]];
+    protected _drawData: ElevationProfileDrawData;
     protected _promiseArr: Promise<void | number>[];
     protected _promiseCounter: number;
     protected _pMaxY: number;
     protected _pMinY: number;
     protected _pDist: number;
-    protected _pTrackCoords: number[][];
-    protected _pGroundCoords: number[][];
+    protected _pTrackCoords: TrackItem[];
+    protected _pGroundCoords: GroundItem[];
     protected _pIndex: number;
-    constructor(options: ElevationProfileParams);
+    constructor(options?: ElevationProfileParams);
+    bindPlanet(planet: Planet): void;
     setWarningHeightLevel(warningHeight?: number): void;
-    setRange(minX: number, maxX: number, minY: number, maxY: number): void;
-    protected _getHeightAsync(ll: LonLat, pIndex: number): Promise<number>;
-    protected _collectCoordsBetweenTwoTrackPoints(internalPoints: number, scaleFactor: number, p0: Vec3, trackDir: Vec3): void;
-    protected _collectAllPoints(pointsLonLat: LonLat[]): void;
-    protected _getGroundElevation(lonLat: LonLat): void;
-    protected _collectPromise(resolve: (p: IProfileData) => void): void;
-    protected _calcPointsAsync(pointsLonLat: LonLat[]): Promise<IProfileData>;
+    setRange(minX: number, maxX: number, minY?: number, maxY?: number): void;
+    protected _getHeightAsync(ll: LonLat, pIndex: number, promiseCounter: number): Promise<number>;
+    protected _collectCoordsBetweenTwoTrackPoints(index: number, internalPoints: number, scaleFactor: number, p0: Vec3, trackDir: Vec3, promiseCounter: number): void;
+    protected _collectAllPoints(pointsLonLat: LonLat[], promiseCounter: number): void;
+    protected _getGroundElevation(lonLat: LonLat, index: number, promiseCounter: number): void;
+    protected _calcPointsAsync(pointsLonLat: LonLat[], promiseCounter: number): Promise<IProfileData>;
     get minX(): number;
+    get planeDistance(): number;
     get maxX(): number;
     get minY(): number;
     get maxY(): number;
     get pointsReady(): boolean;
     get isWarningOrCollision(): boolean;
-    collectProfile(pointsLonLat: LonLat[]): void;
-    protected _setPointType(pIndex: number): void;
+    get drawData(): ElevationProfileDrawData;
+    collectProfile(pointsLonLat: LonLat[]): Promise<ElevationProfileDrawData>;
+    protected _updatePointType(pIndex: number): void;
+    /**
+     * @deprecated
+     */
     protected _setPointsType(): void;
     clear(): void;
 }
-export { COLLISION, SAFE, WARNING, type IProfileData, ElevationProfile, };
+export {};