@openglobus/og 0.10.3 → 0.10.6

package/src/og/layer/KML.js

@@ -0,0 +1,157 @@
+/**
+ * @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 {
+
+    _billboard = { src: 'https://openglobus.org/examples/billboards/carrot.png' };
+    _color = '#6689db';
+
+    constructor(name, options = {}) {
+        super(name, options);
+        this._extent = null;
+        this._billboard = options.billboard || this._billboard;
+        this._color = options.color || this._color;
+    }
+
+    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/quadTree/Node.js

@@ -32,8 +32,7 @@ import {
 
 import { MAX_NORMAL_ZOOM } from "../segment/Segment.js";
 
-const DOT_VIS = 0.3;
-const VISIBLE_HEIGHT = 3000000.0;
+const VISIBLE_HEIGHT = 1400000.0;
 
 let _tempHigh = new Vec3(),
     _tempLow = new Vec3();
@@ -255,7 +254,7 @@ Node.prototype.renderTree = function (cam, maxZoom, terrainReadySegment, stopLoa
             }
         }
     } else {
-        let commonFrustumFlag = 1 << (numFrustums - 1 - 1); //Math.pow(2, numFrustums - 1) - 1;
+        let commonFrustumFlag = 1 << (numFrustums - 1 - 1);
         for (let i = 0; commonFrustumFlag && i < numFrustums; i++) {
             if (seg.terrainReady) {
                 if (frustums[i].containsBox(seg.bbox)) {
@@ -332,13 +331,13 @@ Node.prototype.prepareForRendering = function (
     } else {
         if (seg.tileZoom < 2) {
             this.renderNode(inFrustum, !inFrustum, terrainReadySegment, stopLoading);
-        } else if (seg.tileZoom >= MAX_NORMAL_ZOOM) {
+        } else if (seg.tileZoom > MAX_NORMAL_ZOOM) {
             this.renderNode(inFrustum, !inFrustum, terrainReadySegment, stopLoading);
         } else if (
-            seg._swNorm.dot(cam.eyeNorm) > DOT_VIS ||
-            seg._nwNorm.dot(cam.eyeNorm) > DOT_VIS ||
-            seg._neNorm.dot(cam.eyeNorm) > DOT_VIS ||
-            seg._seNorm.dot(cam.eyeNorm) > DOT_VIS
+            seg._swNorm.dot(cam._n) > 0.0 ||
+            seg._nwNorm.dot(cam._n) > 0.0 ||
+            seg._neNorm.dot(cam._n) > 0.0 ||
+            seg._seNorm.dot(cam._n) > 0.0
         ) {
             this.renderNode(inFrustum, !inFrustum, terrainReadySegment, stopLoading);
         } else {
@@ -478,26 +477,80 @@ Node.prototype.getCommonSide = function (node) {
             b_sw_lon = b_sw.lon,
             b_sw_lat = b_sw.lat;
 
+        if (as._tileGroup === bs._tileGroup) {
+            if (
+                a_ne_lon === b_sw_lon &&
+                ((a_ne_lat <= b_ne_lat && a_sw_lat >= b_sw_lat) ||
+                    (a_ne_lat >= b_ne_lat && a_sw_lat <= b_sw_lat))
+            ) {
+                return E;
+            } else if (
+                a_sw_lon === b_ne_lon &&
+                ((a_ne_lat <= b_ne_lat && a_sw_lat >= b_sw_lat) ||
+                    (a_ne_lat >= b_ne_lat && a_sw_lat <= b_sw_lat))
+            ) {
+                return W;
+            } else if (
+                a_ne_lat === b_sw_lat &&
+                ((a_sw_lon >= b_sw_lon && a_ne_lon <= b_ne_lon) ||
+                    (a_sw_lon <= b_sw_lon && a_ne_lon >= b_ne_lon))
+            ) {
+                return N;
+            } else if (
+                a_sw_lat === b_ne_lat &&
+                ((a_sw_lon >= b_sw_lon && a_ne_lon <= b_ne_lon) ||
+                    (a_sw_lon <= b_sw_lon && a_ne_lon >= b_ne_lon))
+            ) {
+                return S;
+            } else if (
+                bs.tileX === 0 &&
+                as.tileX === Math.pow(2, as.tileZoom) - 1 &&
+                ((a_ne_lat <= b_ne_lat && a_sw_lat >= b_sw_lat) ||
+                    (a_ne_lat >= b_ne_lat && a_sw_lat <= b_sw_lat))
+            ) {
+                return E;
+            } else if (
+                as.tileX === 0 &&
+                bs.tileX === Math.pow(2, bs.tileZoom) - 1 &&
+                ((a_ne_lat <= b_ne_lat && a_sw_lat >= b_sw_lat) ||
+                    (a_ne_lat >= b_ne_lat && a_sw_lat <= b_sw_lat))
+            ) {
+                return W;
+            }
+        }
+
         if (
-            a_ne_lon === b_sw_lon &&
-            ((a_ne_lat <= b_ne_lat && a_sw_lat >= b_sw_lat) ||
-                (a_ne_lat >= b_ne_lat && a_sw_lat <= b_sw_lat))
+            as._tileGroup === 0 &&
+            bs._tileGroup === 1 &&
+            as.tileY === 0 &&
+            bs.tileY === Math.pow(2, bs.tileZoom) - 1 &&
+            ((a_sw_lon >= b_sw_lon && a_ne_lon <= b_ne_lon) ||
+                (a_sw_lon <= b_sw_lon && a_ne_lon >= b_ne_lon))
         ) {
-            return E;
+            return N;
         } else if (
-            a_sw_lon === b_ne_lon &&
-            ((a_ne_lat <= b_ne_lat && a_sw_lat >= b_sw_lat) ||
-                (a_ne_lat >= b_ne_lat && a_sw_lat <= b_sw_lat))
+            as._tileGroup === 2 &&
+            bs._tileGroup === 0 &&
+            as.tileY === 0 &&
+            bs.tileY === Math.pow(2, bs.tileZoom) - 1 &&
+            ((a_sw_lon >= b_sw_lon && a_ne_lon <= b_ne_lon) ||
+                (a_sw_lon <= b_sw_lon && a_ne_lon >= b_ne_lon))
         ) {
-            return W;
+            return N;
         } else if (
-            a_ne_lat === b_sw_lat &&
+            bs._tileGroup === 1 &&
+            as._tileGroup === 0 &&
+            as.tileY === Math.pow(2, as.tileZoom) - 1 &&
+            bs.tileY === 0 &&
             ((a_sw_lon >= b_sw_lon && a_ne_lon <= b_ne_lon) ||
                 (a_sw_lon <= b_sw_lon && a_ne_lon >= b_ne_lon))
         ) {
-            return N;
+            return S;
         } else if (
-            a_sw_lat === b_ne_lat &&
+            as._tileGroup === 1 &&
+            bs._tileGroup === 0 &&
+            as.tileY === Math.pow(2, as.tileZoom) - 1 &&
+            bs.tileY === 0 &&
             ((a_sw_lon >= b_sw_lon && a_ne_lon <= b_ne_lon) ||
                 (a_sw_lon <= b_sw_lon && a_ne_lon >= b_ne_lon))
         ) {

package/src/og/renderer/RendererEvents.js

@@ -301,33 +301,38 @@ class RendererEvents extends Events {
     }
 
     /**
-     * @private
+     * @protected
      */
-    onMouseMove(event, sys) {
-        let b = sys.buttons;
-
-        if (b & LB_M) {
-            this.mouseState.leftButtonDown = true;
+    updateButtonsStates(buttons) {
+        var ms = this.mouseState;
+        if (buttons & LB_M) {
+            ms.leftButtonDown = true;
         } else {
-            this.mouseState.leftButtonHold = false;
-            this.mouseState.leftButtonDown = false;
+            ms.leftButtonHold = false;
+            ms.leftButtonDown = false;
         }
 
-        if (b & RB_M) {
-            this.mouseState.rightButtonDown = true;
+        if (buttons & RB_M) {
+            ms.rightButtonDown = true;
         } else {
-            this.mouseState.rightButtonHold = false;
-            this.mouseState.rightButtonDown = false;
+            ms.rightButtonHold = false;
+            ms.rightButtonDown = false;
         }
 
-        if (b & MB_M) {
-            this.mouseState.middleButtonDown = true;
+        if (buttons & MB_M) {
+            ms.middleButtonDown = true;
         } else {
-            this.mouseState.middleButtonHold = false;
-            this.mouseState.middleButtonDown = false;
+            ms.middleButtonHold = false;
+            ms.middleButtonDown = false;
         }
+    }
 
+    /**
+     * @private
+     */
+    onMouseMove(event, sys) {
         var ms = this.mouseState;
+        this.updateButtonsStates(sys.buttons)
         ms.sys = event;
 
         let ex = event.clientX,

package/src/og/scene/Planet.js

@@ -24,7 +24,7 @@ import { PlanetCamera } from "../camera/PlanetCamera.js";
 import { RenderNode } from "./RenderNode.js";
 import { Segment } from "../segment/Segment.js";
 import { SegmentLonLat } from "../segment/SegmentLonLat.js";
-import { PlainSegmentWorker } from "../segment/PlainSegmentWorker.js";
+import { PlainSegmentWorker } from "../utils/PlainSegmentWorker.js";
 import { TerrainWorker } from "../utils/TerrainWorker.js";
 import { VectorTileCreator } from "../utils/VectorTileCreator.js";
 import { wgs84 } from "../ellipsoid/wgs84.js";
@@ -174,6 +174,9 @@ class Planet extends RenderNode {
          */
         this.camera = null;
 
+        this._minAltitude = options.minAltitude;
+        this._maxAltitude = options.maxAltitude;
+
         /**
          * Screen mouse pointer projected to planet cartesian position.
          * @public
@@ -699,7 +702,9 @@ class Planet extends RenderNode {
         this.camera = this.renderer.activeCamera = new PlanetCamera(this, {
             eye: new Vec3(0, 0, 28000000),
             look: new Vec3(0, 0, 0),
-            up: new Vec3(0, 1, 0)
+            up: new Vec3(0, 1, 0),
+            minAltitude: this._minAltitude,
+            maxAltitude: this._maxAltitude
         });
 
         this.camera.update();

package/src/og/segment/Segment.js

@@ -31,8 +31,6 @@ var _RenderingSlice = function (p) {
     };
 };
 
-//const BSPHERERADIUSEXT = 2;
-
 /**
  * Planet segment Web Mercator tile class that stored and rendered with quad tree.
  * @class
@@ -1002,7 +1000,7 @@ Segment.prototype.createBoundsByExtent = function () {
     var coord_ne = ellipsoid.geodeticToCartesian(extent.northEast.lon, extent.northEast.lat);
 
     // check for zoom
-    if (this.tileZoom < MAX_NORMAL_ZOOM) {
+    if (this.tileZoom <= MAX_NORMAL_ZOOM) {
         var coord_nw = ellipsoid.geodeticToCartesian(extent.southWest.lon, extent.northEast.lat);
         var coord_se = ellipsoid.geodeticToCartesian(extent.northEast.lon, extent.southWest.lat);
 
@@ -1039,7 +1037,7 @@ Segment.prototype.createBoundsByParent = function () {
             this.bsphere.center.z = pn.segment.bsphere.center.z;
             this.bsphere.radius = pn.segment.bsphere.radius;
 
-            if (this.tileZoom < MAX_NORMAL_ZOOM) {
+            if (this.tileZoom <= MAX_NORMAL_ZOOM) {
                 let i0 = gridSize * offsetY;
                 let j0 = gridSize * offsetX;
 

package/src/og/utils/FontAtlas.js

@@ -188,6 +188,7 @@ class FontAtlas {
                 };
 
                 img.src = `${srcDir}/${data.pages[0]}`;
+                img.crossOrigin = "Anonymous";
             })
             .catch(err => {
                 def.reject();