@openglobus/og 0.10.4 → 0.11.1

package/src/og/layer/CanvasTiles.js

@@ -2,10 +2,10 @@
  * @module og/layer/CanvasTiles
  */
 
-'use strict';
+"use strict";
 
-import * as quadTree from '../quadTree/quadTree.js';
-import { Layer } from './Layer.js';
+import * as quadTree from "../quadTree/quadTree.js";
+import { Layer } from "./Layer.js";
 
 /**
  * Maximum tiles per frame.
@@ -92,7 +92,7 @@ class CanvasTiles extends Layer {
         }
         this._pendingsQueue = [];
         // this._pendingsQueue.clear();
-    };
+    }
 
     /**
      * Sets layer visibility.
@@ -119,11 +119,12 @@ class CanvasTiles extends Layer {
      * @param {og.planetSegment.Material} material -
      */
     loadMaterial(material) {
-
         var seg = material.segment;
 
         if (this._isBaseLayer) {
-            material.texture = seg._isNorth ? seg.planet.solidTextureOne : seg.planet.solidTextureTwo;
+            material.texture = seg._isNorth
+                ? seg.planet.solidTextureOne
+                : seg.planet.solidTextureTwo;
         } else {
             material.texture = seg.planet.transparentTexture;
         }
@@ -149,33 +150,32 @@ class CanvasTiles extends Layer {
         this._counter++;
         var that = this;
         if (this.drawTile) {
-
             /**
              * Tile custom draw function.
              * @callback og.layer.CanvasTiles~drawTileCallback
              * @param {og.planetSegment.Material} material
              * @param {applyCanvasCallback} applyCanvasCallback
              */
-            setTimeout(function () {
-                var e = that.events.load;
-                if (e.handlers.length) {
-                    that.events.dispatch(e, material);
+            var e = that.events.load;
+            if (e.handlers.length) {
+                that.events.dispatch(e, material);
+            }
+            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();
-                    });
-            }, 50);
+            );
         } else {
             material.textureNotExists();
         }
@@ -214,7 +214,10 @@ class CanvasTiles extends Layer {
         while (this._pendingsQueue.length) {
             var pmat = this._pendingsQueue.pop();
             if (pmat.segment.node) {
-                if (pmat.segment.initialized && pmat.segment.node.getState() === quadTree.RENDERING) {
+                if (
+                    pmat.segment.initialized &&
+                    pmat.segment.node.getState() === quadTree.RENDERING
+                ) {
                     return pmat;
                 }
                 pmat.isLoading = false;
@@ -227,7 +230,6 @@ class CanvasTiles extends Layer {
         if (material.isReady) {
             return [0, 0, 1, 1];
         } else {
-
             !material.isLoading && this.loadMaterial(material);
 
             var segment = material.segment;
@@ -278,10 +280,10 @@ class CanvasTiles extends Layer {
         material.textureExists = false;
 
         if (material.image) {
-            material.image.src = '';
+            material.image.src = "";
             material.image = null;
         }
     }
-};
+}
 
 export { CanvasTiles };

package/src/og/layer/KML.js

@@ -0,0 +1,159 @@
+/**
+ * @module og/layer/KML
+ */
+
+'use strict';
+import { Entity } from '../entity/Entity.js';
+import { Extent } from '../Extent.js';
+import { LonLat } from '../LonLat.js';
+import { Vector } from './Vector.js';
+
+/**
+ * Layer to render KMLs files
+ * @class
+ * @extends {og.Vector}
+ */
+export class KML extends Vector {
+
+    /**
+     * 
+     * @param {string} name 
+     * @param {*} [options]
+     */
+    constructor(name, options = {}) {
+        super(name, options);
+        this._extent = null;
+        this._billboard = options.billboard || { src: 'https://openglobus.org/examples/billboards/carrot.png' };
+        this._color = options.color || '#6689db';
+    }
+
+    get instanceName() {
+        return 'KML';
+    }
+
+    /**
+     * @private
+     */
+    _extractCoordonatesFromKml(xmlDoc) {
+        const raw = Array.from(xmlDoc.getElementsByTagName('coordinates'));
+        const coordinates = raw.map(item => item.textContent.trim().replace(/\n/g, ' ').split(' ').map(co => co.split(',').map(parseFloat)));
+        return coordinates;
+    }
+
+    /**
+     * Creates billboards or polylines from array of lonlat.
+     * @private
+     * @param {Array} coordonates
+     * @param {string} color 
+     * @returns {Array<og.Entity>}
+     */
+    _convertCoordonatesIntoEntities(coordinates, color, billboard) {
+        const extent = new Extent(new LonLat(180.0, 90.0), new LonLat(-180.0, -90.0));
+        const addToExtent = (c) => {
+            const lon = c[0], lat = c[1];
+            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;
+        };
+        const _pathes = [];
+        coordinates.forEach(kmlFile => kmlFile.forEach(p => _pathes.push(p)));
+        const entities = _pathes.map(path => {
+            if (path.length === 1) {
+                const lonlat = path[0];
+                const _entity = new Entity({ lonlat, billboard });
+                addToExtent(lonlat);
+                return _entity;
+            } else if (path.length > 1) {
+                const pathLonLat = path.map(item => {
+                    addToExtent(item);
+                    return new LonLat(item[0], item[1], item[2]);
+                });
+                const _entity = new Entity({ polyline: { pathLonLat: [pathLonLat], thickness: 3, color, isClosed: false } });
+                return _entity;
+            }
+        });
+        return { entities, extent };
+    }
+
+    /**
+     * @private
+     */
+    _getXmlContent(file) {
+        return new Promise(resolve => {
+            const fileReader = new FileReader();
+            fileReader.onload = async i => resolve((new DOMParser()).parseFromString(i.target.result, 'text/xml'));
+            fileReader.readAsText(file);
+        });
+    };
+
+    /**
+     * @private
+     */
+    _expandExtents(extent1, extent2) {
+        if (!extent1) return extent2;
+        if (extent2.southWest.lon < extent1.southWest.lon) extent1.southWest.lon = extent2.southWest.lon;
+        if (extent2.southWest.lat < extent1.southWest.lat) extent1.southWest.lat = extent2.southWest.lat;
+        if (extent2.northEast.lon > extent1.northEast.lon) extent1.northEast.lon = extent2.northEast.lon;
+        if (extent2.northEast.lat > extent1.northEast.lat) extent1.northEast.lat = extent2.northEast.lat;
+        return extent1;
+    }
+
+    /**
+     * @public
+     * @param {File[]} kmls
+     * @returns {Promise}
+     */
+    async addKmlFromFiles(kmls) {
+        const kmlObjs = await Promise.all(kmls.map(this._getXmlContent));
+        const coordonates = kmlObjs.map(this._extractCoordonatesFromKml);
+        const { entities, extent } = this._convertCoordonatesIntoEntities(coordonates, this._color, this._billboard);
+        this._extent = this._expandExtents(this._extent, extent);
+        entities.forEach(this.add.bind(this));
+        return { entities, extent };
+    }
+
+    /**
+     * @param {string} color 
+     * @public
+     */
+    setColor(color) {
+        this._color = color;
+        this._billboard.color = color;
+    }
+
+    /**
+     * @private
+     */
+    _getKmlFromUrl(url) {
+        return new Promise((resolve, reject) => {
+            const request = new XMLHttpRequest();
+            request.open('GET', url, true);
+            request.responseType = 'document';
+            request.overrideMimeType('text/xml');
+            request.onload = () => {
+                if (request.readyState === request.DONE && request.status === 200) {
+                    resolve(request.responseXML);
+                } else {
+                    reject(new Error('no valid kml file'));
+                }
+            };
+            request.send();
+        });
+    };
+
+    /**
+     * @public
+     * @param {string} url - Url of the KML to display. './myFile.kml' or 'http://mySite/myFile.kml' for example.
+     * @returns {Promise}
+     */
+    async addKmlFromUrl(url) {
+        const kml = await this._getKmlFromUrl(url);
+        const coordonates = this._extractCoordonatesFromKml(kml);
+        const { entities, extent } = this._convertCoordonatesIntoEntities([coordonates], this._color, this._billboard);
+        this._extent = this._expandExtents(this._extent, extent);
+        entities.forEach(this.add.bind(this));
+        return { entities, extent };
+    }
+
+};

package/src/og/layer/Vector.js

@@ -68,6 +68,11 @@ function _entitiesConstructor(entities) {
  * @fires og.layer.Vector#visibilitychange
  */
 class Vector extends Layer {
+
+    /**
+     * @param {string} name 
+     * @param {*} [options]
+     */
     constructor(name, options = {}) {
 
         super(name, options);

package/src/og/layer/index.js

@@ -2,9 +2,10 @@ import { CanvasTiles } from './CanvasTiles.js';
 import { GeoImage } from './GeoImage.js';
 import { GeoTexture2d } from './GeoTexture2d.js';
 import { GeoVideo } from './GeoVideo.js';
+import { KML } from './KML.js';
 import { Layer } from './Layer.js';
 import { Vector } from './Vector.js';
 import { WMS } from './WMS.js';
 import { XYZ } from './XYZ.js';
 
-export { CanvasTiles, GeoImage, GeoTexture2d, GeoVideo, Layer, Vector, WMS, XYZ };
+export { CanvasTiles, GeoImage, GeoTexture2d, GeoVideo, KML, Layer, Vector, WMS, XYZ };