@openglobus/og 0.15.5 → 0.16.0

package/src/og/entity/Entity.js

@@ -26,7 +26,7 @@ import { Strip } from "./Strip.js";
  * @param {Object} [options] - Entity options:
  * @param {string} [options.name] - A human readable name to display to users. It does not have to be unique.
  * @param {Vec3|Array.<number>} [options.cartesian] - Spatial entities like billboard, label etc. cartesian position.
- * @param {LonLat} [options.lonlat] - Geodetic coordiantes for an entities like billboard, label etc.
+ * @param {LonLat} [options.lonlat] - Geodetic coordinates for an entities like billboard, label etc.
  * @param {boolean} [options.aground] - True for entities that have to be placed on the relief.
  * @param {boolean} [options.visibility] - Entity visibility.
  * @param {*} [options.billboard] - Billboard options(see {@link og.Billboard}).
@@ -86,7 +86,7 @@ class Entity {
         this._cartesian = utils.createVector3(options.cartesian);
 
         /**
-         * Geodetic entity coordiantes.
+         * Geodetic entity coordinates.
          * @protected
          * @type {LonLat}
          */
@@ -474,7 +474,7 @@ class Entity {
     }
 
     /**
-     * Returns carteain position.
+     * Returns cartesian position.
      * @public
      * @returns {Vec3} -
      */

package/src/og/entity/EntityCollection.js

@@ -506,7 +506,7 @@ class EntityCollection {
     }
 
     /**
-     * Updates coordiantes all lonLat entities in collection after collecction attached to the planet node.
+     * Updates coordinates all lonLat entities in collection after collecction attached to the planet node.
      * @private
      * @param {Ellipsoid} ellipsoid - Globe ellipsoid.
      */
@@ -590,7 +590,7 @@ class EntityCollection {
     }
 
     /**
-     * Removes all entities from colection and clear handlers.
+     * Removes all entities from collection and clear handlers.
      * @public
      */
     clear() {

package/src/og/entity/Label.js

@@ -32,7 +32,7 @@ const STR2ALIGN = {
  * @extends {BaseBillboard}
  * @param {Object} [options] - Label options:
  * @param {Vec3|Array.<number>} [options.position] - Billboard spatial position.
- * @param {number} [options.rotation] - Screen angle rotaion.
+ * @param {number} [options.rotation] - Screen angle rotation.
  * @param {Vec4|string|Array.<number>} [options.color] - Billboard color.
  * @param {Vec3|Array.<number>} [options.alignedAxis] - Billboard aligned vector.
  * @param {Vec3|Array.<number>} [options.offset] - Billboard center screen offset.

package/src/og/entity/Polyline.js

@@ -60,6 +60,8 @@ class Polyline {
          */
         this.thickness = options.thickness || 1.5;
 
+        this._opacity = options.opacity != undefined ? options.opacity : 1.0;
+
         /**
          * Polyline RGBA color.
          * @public
@@ -1708,7 +1710,7 @@ class Polyline {
      * @param {number} opacity - Opacity.
      */
     setOpacity(opacity) {
-        this.color.w = opacity;
+        this._opacity = opacity;
     }
 
     /**
@@ -2010,7 +2012,7 @@ class Polyline {
             ]);
             gl.uniform2fv(shu.viewport, [r.handler.canvas.width, r.handler.canvas.height]);
             gl.uniform1f(shu.thickness, this.thickness * 0.5);
-            gl.uniform1f(shu.opacity, ec._fadingOpacity);
+            gl.uniform1f(shu.opacity, this._opacity * ec._fadingOpacity);
 
             gl.bindBuffer(gl.ARRAY_BUFFER, this._colorsBuffer);
             gl.vertexAttribPointer(sha.color, this._colorsBuffer.itemSize, gl.FLOAT, false, 0, 0);

package/src/og/index.js

@@ -34,6 +34,7 @@ import { Events } from './Events.js';
 import { Extent } from './Extent.js';
 import { LonLat } from './LonLat.js';
 import { RenderNode } from './scene/RenderNode.js';
+import { Planet } from './scene/Planet.js';
 
 import { Popup } from './Popup.js';
 
@@ -45,22 +46,16 @@ import {
     Wgs84QuadTreeStrategy
 } from './quadTree/index.js';
 
-import pkg from "../../package.json";
 
 import { Object3d } from './Object3d.js';
 const { Handler } = webgl, { Control } = control;
-const { Layer, Vector, XYZ} = layer;
+const { Layer, Vector, XYZ, CanvasTiles} = layer;
 const {
     EntityCollection,
     Entity
 } = entity;
 
-const version = {
-    version: pkg.version
-};
-
 export {
-    version,
     bv,
     jd,
     math,
@@ -70,6 +65,7 @@ export {
     Layer,
     XYZ,
     Vector,
+    CanvasTiles,
     layer,
     terrain,
     Control,
@@ -78,6 +74,7 @@ export {
     wgs84,
     Camera,
     Ellipsoid,
+    Planet,
     PlanetCamera,
     Globe,
     LightSource,

package/src/og/layer/CanvasTiles.js

@@ -51,6 +51,7 @@ class CanvasTiles extends Layer {
         this.animated = options.animated || false;
 
         this.minNativeZoom = options.minNativeZoom || 0;
+        this.maxNativeZoom = options.maxNativeZoom || 100;
         /**
          * Current creating tiles couter.
          * @protected
@@ -176,19 +177,21 @@ class CanvasTiles extends Layer {
                 that.events.dispatch(e, material);
             }
             requestAnimationFrame(() => {
-                that.drawTile(material, /**
-                 * Apply canvas.
-                 * @callback applyCanvasCallback
-                 * @param {Object} canvas -
-                 */
-                function (canvas) {
-                    that._counter--;
-                    CanvasTiles.__requestsCounter--;
-                    if (material.isLoading) {
-                        material.applyImage(canvas);
-                    }
-                    that._dequeueRequest();
-                });
+                that.drawTile(
+                    material,
+                    /**
+                     * Apply canvas.
+                     * @callback applyCanvasCallback
+                     * @param {Object} canvas -
+                     */
+                    function (canvas) {
+                        that._counter--;
+                        CanvasTiles.__requestsCounter--;
+                        if (material.isLoading) {
+                            material.applyImage(canvas);
+                        }
+                        that._dequeueRequest();
+                    });
             });
         } else {
             material.textureNotExists();
@@ -239,6 +242,12 @@ class CanvasTiles extends Layer {
 
     applyMaterial(material) {
         if (material.isReady) {
+
+            // IMPORTANT!
+            // Animated doesn't work withMaxNativeZoom
+            // It could be fixed with call drawTile method only for parent
+            // material (which is rendered on the current segment material),
+            // just for one renderer frame
             if (material.layer.animated) {
                 requestAnimationFrame(() => {
                     this.drawTile(material, function (canvas) {
@@ -246,15 +255,19 @@ class CanvasTiles extends Layer {
                     });
                 });
             }
-            return [0, 0, 1, 1];
+
+            return material.texOffset;
+
         } else if (material.segment.tileZoom < this.minNativeZoom) {
             material.textureNotExists();
         } else {
 
             let segment = material.segment;
-            let pn = segment.node, notEmpty = false;
+            let pn = segment.node,
+                parentTextureExists = false;
+            let maxNativeZoom = material.layer.maxNativeZoom;
 
-            if (segment.passReady && !material.isLoading) {
+            if (segment.passReady && !material.isLoading && segment.tileZoom <= maxNativeZoom) {
                 this.loadMaterial(material);
             }
 
@@ -263,14 +276,41 @@ class CanvasTiles extends Layer {
             while (pn.parentNode) {
                 pn = pn.parentNode;
                 psegm = pn.segment.materials[mId];
-                if (psegm && psegm.isReady) {
-                    notEmpty = true;
+                if (psegm && psegm.textureExists) {
+                    parentTextureExists = true;
                     break;
                 }
             }
 
-            if (notEmpty) {
+            if (segment.passReady) {
+                if (pn.segment.tileZoom === maxNativeZoom) {
+                    if (segment.tileZoom > maxNativeZoom) {
+                        material.textureNotExists();
+                    }
+                } else if (pn.segment.tileZoom < maxNativeZoom) {
+
+                    let pn = segment.node;
+                    while (pn.segment.tileZoom > maxNativeZoom) {
+                        pn = pn.parentNode;
+                    }
+
+                    let pnm = pn.segment.materials[mId];
+                    if (pnm) {
+                        !pnm.isLoading && !pnm.isReady && this.loadMaterial(pnm);
+                    } else {
+                        pnm = pn.segment.materials[material.layer._id] = material.layer.createMaterial(
+                            pn.segment
+                        );
+                        this.loadMaterial(pnm);
+                    }
+                }
+            }
+
+            if (parentTextureExists) {
 
+                //
+                // Animated doesn't work withMaxNativeZoom
+                //
                 if (material.layer.animated) {
                     requestAnimationFrame(() => {
                         this.drawTile(material, function (canvas) {
@@ -281,20 +321,27 @@ class CanvasTiles extends Layer {
 
                 material.appliedNodeId = pn.nodeId;
                 material.texture = psegm.texture;
-
                 let dZ2 = 1.0 / (2 << (segment.tileZoom - pn.segment.tileZoom - 1));
-                return [segment.tileX * dZ2 - pn.segment.tileX, segment.tileY * dZ2 - pn.segment.tileY, dZ2, dZ2];
+                material.texOffset[0] = segment.tileX * dZ2 - pn.segment.tileX;
+                material.texOffset[1] = segment.tileY * dZ2 - pn.segment.tileY;
+                material.texOffset[2] = dZ2;
+                material.texOffset[3] = dZ2;
             } else {
                 material.texture = segment.planet.transparentTexture;
-                return [0, 0, 1, 1];
+                material.texOffset[0] = 0.0;
+                material.texOffset[1] = 0.0;
+                material.texOffset[2] = 1.0;
+                material.texOffset[3] = 1.0;
             }
         }
+
+        return material.texOffset;
     }
 
     clearMaterial(material) {
         if (material.isReady) {
             material.isReady = false;
-            if (material.texture && !material.texture.default) {
+            if (material.textureExists && material.texture && !material.texture.default) {
                 material.segment.handler.gl.deleteTexture(material.texture);
                 material.texture = null;
             }

package/src/og/layer/GeoImage.js

@@ -6,6 +6,7 @@
 
 import { nextHighestPowerOfTwo } from "../math.js";
 import { BaseGeoImage } from "./BaseGeoImage.js";
+import { isImageLoaded } from "../utils/shared.js";
 
 /**
  * Used to load and display a single image over specific corner coordinates on the globe, implements og.layer.BaseGeoImage interface.
@@ -48,6 +49,11 @@ class GeoImage extends BaseGeoImage {
         this._planet && this._planet._geoImageCreator.remove(this);
         this._src = src;
         this._sourceReady = false;
+        this._sourceCreated = false;
+        this._image = new Image();
+        this._onLoad_ = this._onLoad.bind(this);
+        this._image.addEventListener("load", this._onLoad_);
+        this._image.src = src;
     }
 
     /**
@@ -57,9 +63,16 @@ class GeoImage extends BaseGeoImage {
      */
     setImage(image) {
         this._planet && this._planet._geoImageCreator.remove(this);
+        this._sourceCreated = false;
+        this._sourceReady = false;
         this._image = image;
         this._src = image.src;
-        this._sourceReady = false;
+        if (isImageLoaded(this._image)) {
+            this._applyImage(this._image);
+        } else {
+            this._onLoad_ = this._onLoad.bind(this);
+            this._image.addEventListener("load", this._onLoad_);
+        }
     }
 
     /**
@@ -76,15 +89,28 @@ class GeoImage extends BaseGeoImage {
 
     /**
      * @private
-     * @param {Image} img
+     * @param {Image} [img]
+     */
+    _onLoad() {
+        this._applyImage(this._image);
+        this._image.removeEventListener("load", this._onLoad_);
+        this._onLoad_ = undefined;
+    }
+
+    /**
+     * @private
+     * @param {Image} [img]
      */
-    _onLoad(img) {
-        this._frameWidth = nextHighestPowerOfTwo(img.width * 2, 4096);
-        this._frameHeight = nextHighestPowerOfTwo(img.height * 3, 4096);
-        this._sourceReady = true;
-        this._planet._geoImageCreator.add(this);
+    _applyImage(img) {
+        if (img) {
+            this._frameWidth = nextHighestPowerOfTwo(img.width * 2, 4096);
+            this._frameHeight = nextHighestPowerOfTwo(img.height * 3, 4096);
+            this._sourceReady = true;
+            this._planet._geoImageCreator.add(this);
+        }
     }
 
+
     /**
      * Loads planet segment material. In this case - GeoImage source image.
      * @virtual
@@ -96,20 +122,16 @@ class GeoImage extends BaseGeoImage {
         this._creationProceeding = true;
         if (!this._sourceReady && this._src) {
             if (this._image) {
-                if (this._image.complete) {
-                    this._onLoad(this._image);
-                } else if (this._image.src) {
-                    let that = this;
-                    this._image.addEventListener("load", function (e) {
-                        that._onLoad(this);
-                    });
+                if (isImageLoaded(this._image)) {
+                    this._applyImage(this._image);
+                } else {
+                    this._onLoad_ = this._onLoad.bind(this);
+                    this._image.addEventListener("load", this._onLoad_);
                 }
             } else {
-                let that = this;
                 this._image = new Image();
-                this._image.addEventListener("load", function (e) {
-                    that._onLoad(this);
-                });
+                this._onLoad_ = this._onLoad.bind(this);
+                this._image.addEventListener("load", this._onLoad_);
                 this._image.src = this._src;
             }
         } else {

package/src/og/layer/Vector.js

@@ -239,7 +239,7 @@ class Vector extends Layer {
      * Adds entity to the layer.
      * @public
      * @param {Entity} entity - Entity.
-     * @param {boolean} [rightNow] - Entity insertion option. False is deafult.
+     * @param {boolean} [rightNow] - Entity insertion option. False is default.
      * @returns {layer.Vector} - Returns this layer.
      */
     add(entity, rightNow) {
@@ -258,7 +258,7 @@ class Vector extends Layer {
      * @public
      * @param {Entity} entity - Entity.
      * @param {Number} index - Index position.
-     * @param {boolean} [rightNow] - Entity insertion option. False is deafult.
+     * @param {boolean} [rightNow] - Entity insertion option. False is default.
      * @returns {layer.Vector} - Returns this layer.
      */
     insert(entity, index, rightNow) {
@@ -336,7 +336,7 @@ class Vector extends Layer {
      * Adds entity array to the layer.
      * @public
      * @param {Array.<Entity>} entities - Entities array.
-     * @param {boolean} [rightNow] - Entity insertion option. False is deafult.
+     * @param {boolean} [rightNow] - Entity insertion option. False is default.
      * @returns {layer.Vector} - Returns this layer.
      */
     addEntities(entities, rightNow) {
@@ -844,7 +844,8 @@ class Vector extends Layer {
 
             // Merc nodes
             this._secondPASS = [];
-            this._entityCollectionsTree.collectRenderCollectionsPASS1(p._visibleNodes, outArr);
+            this._entityCollectionsTree &&
+                this._entityCollectionsTree.collectRenderCollectionsPASS1(p._visibleNodes, outArr);
             var i = this._secondPASS.length;
             while (i--) {
                 this._secondPASS[i].collectRenderCollectionsPASS2(
@@ -856,9 +857,10 @@ class Vector extends Layer {
 
             // North nodes
             this._secondPASS = [];
-            this._entityCollectionsTreeNorth.collectRenderCollectionsPASS1(
-                p._visibleNodesNorth,
-                outArr
+            this._entityCollectionsTreeNorth &&
+                this._entityCollectionsTreeNorth.collectRenderCollectionsPASS1(
+                    p._visibleNodesNorth,
+                    outArr
             );
             i = this._secondPASS.length;
             while (i--) {
@@ -871,10 +873,11 @@ class Vector extends Layer {
 
             // South nodes
             this._secondPASS = [];
-            this._entityCollectionsTreeSouth.collectRenderCollectionsPASS1(
-                p._visibleNodesSouth,
-                outArr
-            );
+            this._entityCollectionsTreeSouth &&
+                this._entityCollectionsTreeSouth.collectRenderCollectionsPASS1(
+                    p._visibleNodesSouth,
+                    outArr
+                );
             i = this._secondPASS.length;
             while (i--) {
                 this._secondPASS[i].collectRenderCollectionsPASS2(

package/src/og/layer/WMS.js

@@ -97,8 +97,8 @@ class WMS extends XYZ {
         extra
 
     ) {
-        return `${url}/wms?LAYERS=${layers}&FORMAT=${format}&SERVICE=WMS&VERSION=${version}&REQUEST=${request}
-        &SRS=${srs}&BBOX=${bbox}&WIDTH=${width}&HEIGHT=${height}&` + extra;
+       return `${url}/?LAYERS=${layers}&FORMAT=${format}&SERVICE=WMS&VERSION=${version}&REQUEST=${request}&SRS=${srs}&BBOX=${bbox}&WIDTH=${width}&HEIGHT=${height}` +
+            (extra ? `&${extra}` : "");
     }
 
     static get_bbox_v1_1_1(extent) {

package/src/og/math.js

@@ -225,7 +225,8 @@ export function step(edge, x) {
  * @returns {number} -
  */
 export function frac(x) {
-    return x - Math.floor(x);
+    const mx = Math.abs(x)
+    return  mx - Math.floor(mx);
 }
 
 /**

package/src/og/quadTree/EPSG4326QuadTreeStrategy.js

@@ -0,0 +1,26 @@
+"use strict";
+import { Extent } from "../Extent.js";
+import { EPSG4326 } from "../proj/EPSG4326.js";
+import { Node } from "../quadTree/Node.js";
+import * as quadTree from "../quadTree/quadTree.js";
+import { SegmentLonLatWgs84 } from "../segment/SegmentLonLatWgs84.js";
+import { QuadTreeStrategy } from "./QuadTreeStrategy.js";
+
+export class EPSG4326QuadTreeStrategy extends QuadTreeStrategy {
+    constructor(options = {}) {
+        super(options);
+        this.name = "EPSG4326";
+        this.projection = EPSG4326;
+    }
+
+    init() {
+        let earthQuadTreeSouth = new Node(SegmentLonLatWgs84, this.planet, quadTree.NW, null, 0, 0,
+            Extent.createFromArray([-180, -90, 0, 90])
+        );
+        let earthQuadTreeWest = new Node(SegmentLonLatWgs84, this.planet, quadTree.NW, null, 0, 0,
+            Extent.createFromArray([0, -90, 180, 90])
+        );
+        this._quadTreeList.push(earthQuadTreeSouth);
+        this._quadTreeList.push(earthQuadTreeWest);
+    }
+}