@openglobus/og 0.13.5 → 0.13.8

package/src/og/layer/KML.js

@@ -42,17 +42,179 @@ export class KML extends Vector {
     _extractCoordonatesFromKml(xmlDoc) {
         const raw = Array.from(xmlDoc.getElementsByTagName("coordinates"));
         const rawText = raw.map(item => item.textContent.trim());
-        const coordinates = rawText.map(item => 
+        const coordinates = rawText.map(item =>
             item
-             .replace(/\n/g, " ")
-             .replace(/\t/g, " ")
-             .replace(/ +/g," ")
-             .split(" ")
-             .map((co) => co.split(",").map(parseFloat))
+                .replace(/\n/g, " ")
+                .replace(/\t/g, " ")
+                .replace(/ +/g, " ")
+                .split(" ")
+                .map((co) => co.split(",").map(parseFloat))
         );
         return coordinates;
     }
 
+    /**
+     * @private
+     */
+    _AGBRtoRGBA(agbr) {
+        if (!agbr || agbr.length != 8) return
+
+        const a = parseInt(agbr.slice(0, 2), 16) / 255;
+        const b = parseInt(agbr.slice(2, 4), 16);
+        const g = parseInt(agbr.slice(4, 6), 16);
+        const r = parseInt(agbr.slice(6, 8), 16);
+
+        return `rgba(${r},${g},${b},${a})`;
+    }
+
+    /**
+     * @private
+     returns array of longitude, latitude, altitude (altitude optional)
+     */
+    _parseKMLcoordinates(coords) {
+        const coordinates = coords.innerHTML.trim()
+            .replace(/\n/g, ' ')
+            .replace(/\t/g, ' ')
+            .replace(/ +/g, ' ')
+            .split(" ")
+            .map((co) => co.split(",").map(parseFloat))
+
+        return coordinates;
+    }
+
+    /**
+     * @private
+     */
+    _kmlPlacemarkToEntity(placemark, extent) {
+        if (!placemark) return;
+
+        const nameTags = Array.from(placemark.getElementsByTagName("name"))
+        const name = nameTags && nameTags[0]?.innerHTML?.trim() || '';
+
+        const { iconHeading, iconURL, iconColor, lineWidth, lineColor } = this._extractStyle(placemark);
+
+        // TODO handle MultiGeometry
+
+        const lonLats = [];
+        for (const coord of placemark.getElementsByTagName("coordinates")) {
+            const coordinates = this._parseKMLcoordinates(coord) || [[0, 0, 0]]
+
+            for (const lonlatalt of coordinates) {
+                const [lon, lat, alt] = lonlatalt
+
+                lonLats.push(new LonLat(lon, lat, alt));
+
+                if (lon < extent.southWest.lon) extent.southWest.lon = lon;
+                if (lat < extent.southWest.lat) extent.southWest.lat = lat;
+                if (lon > extent.northEast.lon) extent.northEast.lon = lon;
+                if (lat > extent.northEast.lat) extent.northEast.lat = lat;
+            }
+        }
+
+        if (lonLats.length === 1) {
+            const hdgrad = iconHeading * 0.01745329; // radians
+
+            return new Entity({
+                name,
+                lonlat: lonLats[0],
+                billboard: {
+                    src: iconURL,
+                    size: [24, 24],
+                    color: iconColor,
+                    rotation: hdgrad
+                },
+                properties: {
+                    color: iconColor,
+                    heading: iconHeading
+                }
+            });
+
+        } else {
+            return new Entity({
+                polyline: {
+                    pathLonLat: [lonLats],
+                    thickness: lineWidth,
+                    color: lineColor,
+                    isClosed: false
+                }
+            });
+        }
+    }
+
+    _extractStyle(placemark) {
+        let iconColor;
+        let iconHeading;
+        let iconURL;
+        let lineColor;
+        let lineWidth;
+
+        const style = placemark.getElementsByTagName("Style")[0];
+        if (style) {
+            let iconstyle = style.getElementsByTagName("IconStyle")[0];
+            if (iconstyle) {
+                let color = iconstyle.getElementsByTagName("color")[0];
+                if (color)
+                    iconColor = this._AGBRtoRGBA(color.innerHTML.trim());
+
+                let heading = iconstyle.getElementsByTagName("heading")[0];
+                if (heading) {
+                    const hdg = parseFloat(heading.innerHTML.trim());
+                    if (hdg >= 0 && hdg <= 360)
+                        iconHeading = hdg % 360;
+                }
+
+                let icon = iconstyle.getElementsByTagName("Icon")[0];
+                if (icon) {
+                    let href = icon.getElementsByTagName("href")[0];
+                    if (href) {
+                        iconURL = href.innerHTML.trim();
+                    }
+                }
+            }
+
+            let linestyle = style.getElementsByTagName("LineStyle")[0];
+            if (linestyle) {
+                let color = linestyle.getElementsByTagName("color")[0];
+                if (color)
+                    lineColor = this._AGBRtoRGBA(color.innerHTML.trim());
+                let width = linestyle.getElementsByTagName("width")[0];
+                if (width !== undefined)
+                    lineWidth = parseFloat(width.innerHTML.trim());
+            }
+        }
+
+        if (!iconColor) iconColor = "#FFFFFF"
+        if (!iconHeading) iconHeading = 0
+        if (!iconURL) iconURL = "https://openglobus.org/examples/billboards/carrot.png"
+
+        if (!lineColor) lineColor = "#FFFFFF"
+        if (!lineWidth) lineWidth = 1
+
+        return { iconHeading, iconURL, iconColor, lineWidth, lineColor };
+    }
+
+    _parseKML(xml, extent, entities = undefined) {
+        if (!entities)
+            entities = [];
+
+        if (xml.documentElement.nodeName !== "kml")
+            return entities;
+
+        for (const placemark of xml.getElementsByTagName("Placemark")) {
+            const entity = this._kmlPlacemarkToEntity(placemark, extent);
+            if (entity) entities.push(entity);
+        }
+
+        return entities;
+    }
+
+    _convertKMLintoEntities(xml) {
+        const extent = new Extent(new LonLat(180.0, 90.0), new LonLat(-180.0, -90.0));
+        const entities = this._parseKML(xml, extent);
+
+        return { entities, extent }
+    }
+
     /**
      * Creates billboards or polylines from array of lonlat.
      * @public
@@ -129,6 +291,7 @@ export class KML extends Vector {
      * @returns {Promise<{entities: Entity[], extent: Extent}>}
      */
     async addKmlFromFiles(kmls, color = null, billboard = null) {
+        if (!Array.isArray(kmls)) return null
         const kmlObjs = await Promise.all(kmls.map(this._getXmlContent));
         const coordonates = kmlObjs.map(this._extractCoordonatesFromKml);
         const { entities, extent } = this._convertCoordonatesIntoEntities(
@@ -179,14 +342,20 @@ export class KML extends Vector {
      */
     async addKmlFromUrl(url, color = null, billboard = null) {
         const kml = await this._getKmlFromUrl(url);
-        const coordonates = this._extractCoordonatesFromKml(kml);
-        const { entities, extent } = this._convertCoordonatesIntoEntities(
-            [coordonates],
-            color || this._color,
-            billboard || this._billboard
-        );
+        /*
+                const coordonates = this._extractCoordonatesFromKml(kml);
+                const { entities, extent } = this._convertCoordonatesIntoEntities(
+                    [coordonates],
+                    color || this._color,
+                    billboard || this._billboard
+                );
+        */
+        const { entities, extent } = this._convertKMLintoEntities(kml);
+
         this._extent = this._expandExtents(this._extent, extent);
+
         entities.forEach(this.add.bind(this));
+
         return { entities, extent };
     }
 }

package/src/og/layer/Layer.js

@@ -34,29 +34,29 @@ export const FADING_FACTOR = 0.29;
  * @fires og.Layer#visibilitychange
  * @fires og.Layer#add
  * @fires og.Layer#remove
- * @fires og.layer.Vector#mousemove
- * @fires og.layer.Vector#mouseenter
- * @fires og.layer.Vector#mouseleave
- * @fires og.layer.Vector#lclick
- * @fires og.layer.Vector#rclick
- * @fires og.layer.Vector#mclick
- * @fires og.layer.Vector#ldblclick
- * @fires og.layer.Vector#rdblclick
- * @fires og.layer.Vector#mdblclick
- * @fires og.layer.Vector#lup
- * @fires og.layer.Vector#rup
- * @fires og.layer.Vector#mup
- * @fires og.layer.Vector#ldown
- * @fires og.layer.Vector#rdown
- * @fires og.layer.Vector#mdown
- * @fires og.layer.Vector#lhold
- * @fires og.layer.Vector#rhold
- * @fires og.layer.Vector#mhold
- * @fires og.layer.Vector#mousewheel
- * @fires og.layer.Vector#touchmove
- * @fires og.layer.Vector#touchstart
- * @fires og.layer.Vector#touchend
- * @fires og.layer.Vector#doubletouch
+ * @fires og.layer.Layer#mousemove
+ * @fires og.layer.Layer#mouseenter
+ * @fires og.layer.Layer#mouseleave
+ * @fires og.layer.Layer#lclick
+ * @fires og.layer.Layer#rclick
+ * @fires og.layer.Layer#mclick
+ * @fires og.layer.Layer#ldblclick
+ * @fires og.layer.Layer#rdblclick
+ * @fires og.layer.Layer#mdblclick
+ * @fires og.layer.Layer#lup
+ * @fires og.layer.Layer#rup
+ * @fires og.layer.Layer#mup
+ * @fires og.layer.Layer#ldown
+ * @fires og.layer.Layer#rdown
+ * @fires og.layer.Layer#mdown
+ * @fires og.layer.Layer#lhold
+ * @fires og.layer.Layer#rhold
+ * @fires og.layer.Layer#mhold
+ * @fires og.layer.Layer#mousewheel
+ * @fires og.layer.Layer#touchmove
+ * @fires og.layer.Layer#touchstart
+ * @fires og.layer.Layer#touchend
+ * @fires og.layer.Layer#doubletouch
  */
 class Layer {
     constructor(name, options = {}) {
@@ -230,23 +230,6 @@ class Layer {
         this.__lcounter = n;
     }
 
-    static get __requestsCounter() {
-        return this.__reqcounter;
-    }
-
-    static set __requestsCounter(v) {
-        this.__reqcounter = v;
-    }
-
-    /**
-     * Maximum loading queries at one time.
-     * @const
-     * @type {number}
-     */
-    static get MAX_REQUESTS() {
-        return 7;
-    }
-
     get instanceName() {
         return "Layer";
     }
@@ -413,8 +396,10 @@ class Layer {
      * @param {string} html - HTML code that represents layer attribution, it could be just a text.
      */
     setAttribution(html) {
-        this._attribution = html;
-        this._planet && this._planet.updateAttributionsList();
+        if (this._attribution !== html) {
+            this._attribution = html;
+            this._planet && this._planet.updateAttributionsList();
+        }
     }
 
     /**

package/src/og/layer/Vector.js

@@ -137,6 +137,11 @@ class Vector extends Layer {
         });
         this._bindEventsDefault(this._polylineEntityCollection);
 
+        this._geoObjectEntityCollection = new EntityCollection({
+            pickingEnabled: this.pickingEnabled
+        });
+        this._bindEventsDefault(this._geoObjectEntityCollection);
+
         this._geometryHandler = new GeometryHandler(this);
 
         this._entityCollectionsTree = null;
@@ -186,6 +191,7 @@ class Vector extends Layer {
             this._geometryHandler.assignHandler(planet.renderer.handler);
             this._polylineEntityCollection.addTo(planet, true);
             this._stripEntityCollection.addTo(planet, true);
+            this._geoObjectEntityCollection.addTo(planet, true);
             this.setEntities(this._entities);
         }
         return this;
@@ -285,6 +291,10 @@ class Vector extends Layer {
             this._polylineEntityCollection.add(entity);
         }
 
+        if (entity.geoObject) {
+            this._geoObjectEntityCollection.add(entity);
+        }
+
         if (entity.geometry) {
             this._hasImageryTiles = true;
             if (this._planet) {
@@ -412,20 +422,22 @@ class Vector extends Layer {
 
         this._polylineEntityCollection.setPickingEnabled(picking);
 
+        this._geoObjectEntityCollection.setPickingEnabled(picking);
+
         this._entityCollectionsTree &&
-            this._entityCollectionsTree.traverseTree(function (node) {
-                node.entityCollection.setPickingEnabled(picking);
-            });
+        this._entityCollectionsTree.traverseTree(function (node) {
+            node.entityCollection.setPickingEnabled(picking);
+        });
 
         this._entityCollectionsTreeNorth &&
-            this._entityCollectionsTreeNorth.traverseTree(function (node) {
-                node.entityCollection.setPickingEnabled(picking);
-            });
+        this._entityCollectionsTreeNorth.traverseTree(function (node) {
+            node.entityCollection.setPickingEnabled(picking);
+        });
 
         this._entityCollectionsTreeSouth &&
-            this._entityCollectionsTreeSouth.traverseTree(function (node) {
-                node.entityCollection.setPickingEnabled(picking);
-            });
+        this._entityCollectionsTreeSouth.traverseTree(function (node) {
+            node.entityCollection.setPickingEnabled(picking);
+        });
     }
 
     /**
@@ -527,10 +539,10 @@ class Vector extends Layer {
 
         this._entities = new Array(temp.length);
 
-        var entitiesForTree = [];
+        let entitiesForTree = [];
 
-        for (var i = 0; i < temp.length; i++) {
-            var ei = temp[i];
+        for (let i = 0; i < temp.length; i++) {
+            let ei = temp[i];
 
             ei._layer = this;
             ei._layerIndex = i;
@@ -539,6 +551,8 @@ class Vector extends Layer {
                 this._stripEntityCollection.add(ei);
             } else if (ei.polyline || ei.ray) {
                 this._polylineEntityCollection.add(ei);
+            } else if (ei.geoObject) {
+                this._geoObjectEntityCollection.add(ei);
             } else if (ei.billboard || ei.label || ei.shape) {
                 entitiesForTree.push(ei);
             }
@@ -711,7 +725,7 @@ class Vector extends Layer {
     }
 
     _collectPolylineCollectionPASS(outArr) {
-        var ec = this._polylineEntityCollection;
+        let ec = this._polylineEntityCollection;
 
         ec._fadingOpacity = this._fadingOpacity;
         ec.scaleByDistance = this.scaleByDistance;
@@ -762,6 +776,58 @@ class Vector extends Layer {
         }
     }
 
+    _collectGeoObjectCollectionPASS(outArr) {
+        let ec = this._geoObjectEntityCollection;
+
+        ec._fadingOpacity = this._fadingOpacity;
+        ec.scaleByDistance = this.scaleByDistance;
+        ec.pickingScale = this.pickingScale;
+        ec.polygonOffsetUnits = this.polygonOffsetUnits;
+
+        outArr.push(ec);
+
+        // if (this.clampToGround || this.relativeToGround) {
+        //     let rtg = Number(this.relativeToGround);
+        //
+        //     var nodes = this._planet._renderedNodes;
+        //     var visibleExtent = this._planet.getViewExtent();
+        //     var e = ec._entities;
+        //     var e_i = e.length;
+        //     let res = new Vec3();
+        //
+        //     while (e_i--) {
+        //         var p = e[e_i].polyline;
+        //         if (visibleExtent.overlaps(p._extent)) {
+        //             // TODO:this works only for mercator area.
+        //             // needs to be working on poles.
+        //             let coords = p._pathLonLatMerc,
+        //                 c_j = coords.length;
+        //             while (c_j--) {
+        //                 var c_j_h = coords[c_j].length;
+        //                 while (c_j_h--) {
+        //                     let ll = coords[c_j][c_j_h],
+        //                         n_k = nodes.length;
+        //                     while (n_k--) {
+        //                         var seg = nodes[n_k].segment;
+        //                         if (seg._extent.isInside(ll)) {
+        //                             let cart = p._path3v[c_j][c_j_h];
+        //                             seg.getTerrainPoint(cart, ll, res);
+        //                             p.setPoint3v(
+        //                                 res.addA(res.normal().scale((rtg && p.altitude) || 0.0)),
+        //                                 c_j_h,
+        //                                 c_j,
+        //                                 true
+        //                             );
+        //                             break;
+        //                         }
+        //                     }
+        //                 }
+        //             }
+        //         }
+        //     }
+        // }
+    }
+
     collectVisibleCollections(outArr) {
         var p = this._planet;
 
@@ -775,8 +841,8 @@ class Vector extends Layer {
 
             // Common collections first
             this._collectStripCollectionPASS(outArr);
-
             this._collectPolylineCollectionPASS(outArr);
+            this._collectGeoObjectCollectionPASS(outArr);
 
             // Merc nodes
             this._secondPASS = [];

package/src/og/layer/XYZ.js

@@ -92,6 +92,10 @@ class XYZ extends Layer {
         this._urlRewriteCallback = options.urlRewrite || null;
     }
 
+    get isIdle() {
+        return !this._planet || this._planet._tileLoader.isIdle(this);
+    }
+
     get instanceName() {
         return "XYZ";
     }
@@ -162,6 +166,7 @@ class XYZ extends Layer {
 
                 this._planet._tileLoader.load(
                     {
+                        sender: this,
                         src: this._getHTTPRequestString(material.segment),
                         type: "imageBitmap",
                         filter: () =>
@@ -185,7 +190,8 @@ class XYZ extends Layer {
                                 material.textureNotExists();
                             }
                         }
-                    }
+                    },
+                    this._id
                 );
             } else {
                 material.textureNotExists();
@@ -303,7 +309,7 @@ class XYZ extends Layer {
     clearMaterial(material) {
         if (material.isReady && material.textureExists) {
             !material.texture.default &&
-            material.segment.handler.gl.deleteTexture(material.texture);
+                material.segment.handler.gl.deleteTexture(material.texture);
             material.texture = null;
 
             if (material.image) {

package/src/og/math/Vec3.js

@@ -194,7 +194,7 @@ export class Vec3 {
      * @returns {Vec3} -
      */
     static lerp(v1, v2, l) {
-        return Vec3(v1.x + (v2.x - v1.x) * l, v1.y + (v2.y - v1.y) * l, v1.z + (v2.z - v1.z) * l);
+        return new Vec3(v1.x + (v2.x - v1.x) * l, v1.y + (v2.y - v1.y) * l, v1.z + (v2.z - v1.z) * l);
     }
 
     /**

package/src/og/math.js

@@ -200,15 +200,15 @@ export function mod(m, n) {
  * @returns {number} -
  */
 export function zeroTwoPI(a) {
-    var mod = mod(a, TWO_PI);
-    if (Math.abs(mod) < EPSILON14 && Math.abs(a) > EPSILON14) {
+    const res = mod(a, TWO_PI);
+    if (Math.abs(res) < EPSILON14 && Math.abs(a) > EPSILON14) {
         return TWO_PI;
     }
-    return mod;
+    return res;
 }
 
 /**
- * Returns 0.0 if x is smaller then edge and otherwise 1.0.
+ * Returns 0.0 if x is smaller than edge and otherwise 1.0.
  * @function
  * @param {number} edge -
  * @param {number} x - Value to edge.

package/src/og/quadTree/Node.js

@@ -284,7 +284,7 @@ class Node {
             } else if (
                 seg.terrainReady &&
                 seg.tileZoom < planet.terrain._maxNodeZoom &&
-                (!maxZoom || maxZoom && cam.projectedSize(seg.bsphere.center, seg.bsphere.radius) > this.planet._maxLodSize)) {
+                (!maxZoom || cam.projectedSize(seg.bsphere.center, seg.bsphere.radius) > this.planet._maxLodSize)) {
                 this.traverseNodes(cam, maxZoom, seg, stopLoading);
             } else if (altVis) {
                 seg.passReady = maxZoom ? seg.terrainReady : false;
@@ -404,6 +404,7 @@ class Node {
 
         if (!this.segment.terrainReady) {
             this.planet._renderCompleted = false;
+            this.planet._terrainCompleted = false;
         }
 
         let k = 0,

package/src/og/renderer/Renderer.js

@@ -15,7 +15,6 @@ import { FontAtlas } from "../utils/FontAtlas.js";
 import { TextureAtlas } from "../utils/TextureAtlas.js";
 import * as arial from "../arial.js";
 import { depth } from "../shaders/depth.js";
-import { ARIAL_FONT_B64 } from "../res/images.js";
 import { LabelWorker } from "../entity/LabelWorker.js";
 
 let __pickingCallbackCounter__ = 0;
@@ -497,7 +496,7 @@ class Renderer {
 
         this.outputTexture = this.screenTexture.screen;
 
-        this.fontAtlas.initFont("arial", arial.data, ARIAL_FONT_B64);
+        this.fontAtlas.initFont("arial", arial.data, arial.image);
     }
 
     setCurrentScreen(screenName) {

package/src/og/renderer/RendererEvents.js

@@ -161,6 +161,8 @@ class RendererEvents extends Events {
             prev_x: 0,
             /** Previous touch Y coordinate. */
             prev_y: 0,
+            /** Screen touch position world direction. */
+            direction: new Vec3(),
             /** JavaScript touching system event message. */
             sys: null,
             /** Current touched(picking) object. */
@@ -222,6 +224,13 @@ class RendererEvents extends Events {
                 this.mouseState.x,
                 this.mouseState.y
             );
+            //
+            // TODO: Replace in some other place with a thought that we do            
+            // not need to make unproject when we do not make touching
+            this.touchState.direction = this.renderer.activeCamera.unproject(
+                this.touchState.x,
+                this.touchState.y
+            );
             this.entityPickingEvents();
             this._keyboardHandler.handleEvents();
             this.handleMouseEvents();
@@ -493,7 +502,7 @@ class RendererEvents extends Events {
         var ts = this.touchState;
         ts.sys = event;
 
-        ts.clienX = event.touches.item(0).clientX - event.offsetLeft;
+        ts.clientX = event.touches.item(0).clientX - event.offsetLeft;
         ts.clientY = event.touches.item(0).clientY - event.offsetTop;
 
         let h = this.renderer.handler;
@@ -569,8 +578,13 @@ class RendererEvents extends Events {
 
         ts.sys = event;
         ts.moving = true;
-        // this._dblTchBegins = 0;
-        // this._oneTouchStart = false;
+
+        var dX = ts.x - ts.prev_x
+        var dY = ts.y - ts.prev_y
+        if (Math.abs(dX) > 9 || Math.abs(dY) > 9) {
+            this._dblTchBegins = 0;
+            this._oneTouchStart = false;
+        }
     }
 
     /**