@openglobus/og 0.13.5 → 0.13.6

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

@@ -413,8 +413,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/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;
+        }
     }
 
     /**

package/src/og/scene/Planet.js

@@ -613,21 +613,36 @@ export class Planet extends RenderNode {
             this._quadTree.destroyBranches();
         }
 
-        if (terrain._geoid) {
-            if (!terrain._geoid.model) {
-                terrain._geoid.model = null;
-                Geoid.loadModel(terrain._geoid.src)
-                    .then((m) => {
-                        terrain.getGeoid().setModel(m);
-                        this._plainSegmentWorker.setGeoid(terrain.getGeoid());
-                    })
-                    .catch((err) => {
-                        console.log(err);
-                    });
-            } else {
-                this._plainSegmentWorker.setGeoid(terrain.getGeoid());
-            }
+        //if (terrain._geoid) {
+
+        if (terrain._geoid.model) {
+            this._plainSegmentWorker.setGeoid(terrain.getGeoid());
+            terrain._isReady = true;
+        } else {
+            Geoid.loadModel(terrain._geoid.src)
+                .then((m) => {
+                    terrain.getGeoid().setModel(m);
+                    this._plainSegmentWorker.setGeoid(terrain.getGeoid());
+                    terrain._isReady = true;
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
         }
+
+        // if (!terrain._geoid.model) {
+        //     Geoid.loadModel(terrain._geoid.src)
+        //         .then((m) => {
+        //             terrain.getGeoid().setModel(m);
+        //             this._plainSegmentWorker.setGeoid(terrain.getGeoid());
+        //         })
+        //         .catch((err) => {
+        //             console.log(err);
+        //         });
+        // } else {
+        //     this._plainSegmentWorker.setGeoid(terrain.getGeoid());
+        // }
+        //}
     }
 
     /**
@@ -917,15 +932,7 @@ export class Planet extends RenderNode {
             }
         }
 
-        if (this.renderer) {
-            if (html.length) {
-                this.renderer.div.attributions.style.display = "block";
-                this.renderer.div.attributions.innerHTML = "<ul>" + html + "</ul>";
-            } else {
-                this.renderer.div.attributions.style.display = "none";
-                this.renderer.div.attributions.innerHTML = "";
-            }
-        }
+        this._applyAttribution(html)
     }
 
     /**
@@ -971,17 +978,28 @@ export class Planet extends RenderNode {
             }
         }
 
+        this._applyAttribution(html);
+
+        this._sortLayers();
+    }
+
+    /**
+     * Apply to render list of layer attributions
+     * @private
+     */
+    _applyAttribution(html) {
         if (this.renderer) {
             if (html.length) {
-                this.renderer.div.attributions.style.display = "block";
-                this.renderer.div.attributions.innerHTML = "<ul>" + html + "</ul>";
+                html = "<ul>" + html + "</ul>";
+                if (this.renderer.div.attributions.innerHTML !== html) {
+                    this.renderer.div.attributions.style.display = "block";
+                    this.renderer.div.attributions.innerHTML = html;
+                }
             } else {
                 this.renderer.div.attributions.style.display = "none";
                 this.renderer.div.attributions.innerHTML = "";
             }
         }
-
-        this._sortLayers();
     }
 
     /**