@openglobus/og 0.10.3 → 0.10.6

package/css/og.css

@@ -27,7 +27,7 @@
 }
 
 .ogGrabbingPoiner {
-    cursor: url(data:text/plain;base64,AAACAAEAICACAAcABQAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAAAEAAAAAAAAAAAAAAgAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8AAAA/AAAAfwAAAP+AAAH/gAAB/8AAAH/AAAB/wAAA/0AAANsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//////////////////////////////////////////////////////////////////////////////////////gH///4B///8Af//+AD///AA///wAH//+AB///wAf//4AH//+AD///yT/////////////////////////////8=), default !important;
+    cursor: grabbing !important;
 }
 
 .ogViewport {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openglobus/og",
-  "version": "0.10.3",
+  "version": "0.10.6",
   "description": "[OpenGlobus](http://www.openglobus.org/) is a javascript library designed to display interactive 3d maps and planets with map tiles, imagery and vector data, markers and 3d objects. It uses the WebGL technology, open source and completely free.",
   "directories": {
     "example": "./sandbox"
@@ -36,12 +36,12 @@
     "./entity": "./src/og/entity/index.js",
     "./control": "./src/og/control/index.js",
     "./webgl": "./src/og/webgl/index.js",
-    "./scene": "./src/og/scene/index.js"
+    "./scene": "./src/og/scene/index.js",
+    "./css/og.css": "./css/og.css"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.12.17",
     "@rollup/plugin-json": "^4.1.0",
-    "enhanced-resolve": "^4.3.0",
     "eslint": "^6.8.0",
     "eslint-config-defaults": "^9.0.0",
     "eslint-config-standard": "^14.1.1",
@@ -55,7 +55,7 @@
     "jest": "^26.6.3",
     "jsdoc": "^3.6.7",
     "lint-staged": "^11.0.0",
-    "local-web-server": "^3.0.7",
+    "local-web-server": "^5.1.1",
     "msdf-bmfont-xml": "^2.3.6",
     "postcss": "^8.3.0",
     "prettier": "^2.3.0",

package/src/og/Extent.js

@@ -14,305 +14,306 @@ import { LonLat } from './LonLat.js';
  * @param {og.LonLat} [sw] - South West extent corner coordiantes.
  * @param {og.LonLat} [ne] - North East extent corner coordiantes.
  */
-const Extent = function (sw, ne) {
+export class Extent {
+
+    constructor(sw, ne) {
+        /**
+         * @public
+         */
+        this.southWest = sw || new LonLat();
+        /**
+         * @public
+         */
+        this.northEast = ne || new LonLat();
+    }
+
     /**
-     * @public
+     * Whole mercator extent.
+     * @const
      */
-    this.southWest = sw || new LonLat();
+    static get FULL_MERC() { return new Extent(LonLat.SW_MERC, LonLat.NE_MERC) };
 
     /**
-     * @public
+     * Degrees extent from north mercator limit to north pole.
+     * @const
      */
-    this.northEast = ne || new LonLat();
-};
-
-/**
- * Whole mercator extent.
- * @const
- */
-Extent.FULL_MERC = new Extent(LonLat.SW_MERC, LonLat.NE_MERC);
-
-/**
- * Degrees extent from north mercator limit to north pole.
- * @const
- */
-Extent.NORTH_POLE_DEG = new Extent(LonLat.NW_MERC_DEG, new LonLat(180.0, 90.0));
-
-/**
- * Degrees extent from south pole to south mercator limit.
- * @const
- */
-Extent.SOUTH_POLE_DEG = new Extent(new LonLat(-180.0, -90.0), LonLat.SE_MERC_DEG);
-
-/**
- * Creates extent instance from values in array.
- * @static
- * @param {Array.<number,number,number,number>} arr - South west and north east longitude and latidudes packed in array.
- * @return {og.Extent} Extent object.
- */
-Extent.createFromArray = function (arr) {
-    return new Extent(new LonLat(arr[0], arr[1]), new LonLat(arr[2], arr[3]));
-};
+    static get NORTH_POLE_DEG() { return new Extent(LonLat.NW_MERC_DEG, new LonLat(180.0, 90.0)); }
 
-/**
- * Creates bound extent instance by coordinate array.
- * @static
- * @param {Array.<og.LonLat>} arr - Coordinate array.
- * @return {og.Extent} Extent object.
- */
-Extent.createByCoordinates = function (arr) {
-    var lonmin = math.MAX, lonmax = math.MIN,
-        latmin = math.MAX, latmax = math.MIN;
-    for (var i = 0; i < arr.length; i++) {
-        var vi = arr[i];
-        if (vi.lon < lonmin) lonmin = vi.lon;
-        if (vi.lon > lonmax) lonmax = vi.lon;
-        if (vi.lat < latmin) latmin = vi.lat;
-        if (vi.lat > latmax) latmax = vi.lat;
-    }
-    return new Extent(new LonLat(lonmin, latmin), new LonLat(lonmax, latmax));
-};
-
-/**
- * Creates bound extent instance by coordinate array.
- * @static
- * @param {Array.<Array<number,number>>} arr - Coordinate array.
- * @return {og.Extent} Extent object.
- */
-Extent.createByCoordinatesArr = function (arr) {
-    var lonmin = math.MAX, lonmax = math.MIN,
-        latmin = math.MAX, latmax = math.MIN;
-    for (var i = 0; i < arr.length; i++) {
-        var vi = arr[i];
-        if (vi[0] < lonmin) lonmin = vi[0];
-        if (vi[0] > lonmax) lonmax = vi[0];
-        if (vi[1] < latmin) latmin = vi[1];
-        if (vi[1] > latmax) latmax = vi[1];
-    }
-    return new Extent(new LonLat(lonmin, latmin), new LonLat(lonmax, latmax));
-};
+    /**
+     * Degrees extent from south pole to south mercator limit.
+     * @const
+     */
+    static get SOUTH_POLE_DEG() { return new Extent(new LonLat(-180.0, -90.0), LonLat.SE_MERC_DEG) };
 
-/**
- * Creates extent by meractor grid tile coordinates.
- * @static
- * @param {number} x -
- * @param {number} y -
- * @param {number} z -
- * @param {number} width -
- * @param {number} height -
- * @returns {og.Extent} -
- */
-Extent.fromTile = function (x, y, z, width, height) {
-    width = width || mercator.POLE_DOUBLE;
-    height = height || mercator.POLE_DOUBLE;
-    var H = Math.pow(2, z),
-        W = Math.pow(2, z),
-        lnSize = width / W,
-        ltSize = height / H;
-
-    var left = -width * 0.5 + x * lnSize,
-        top = height * 0.5 - y * ltSize,
-        bottom = top - ltSize,
-        right = left + lnSize;
-
-    return new Extent(new LonLat(left, bottom), new LonLat(right, top));
-};
+    /**
+     * Creates extent instance from values in array.
+     * @static
+     * @param {Array.<number,number,number,number>} arr - South west and north east longitude and latidudes packed in array.
+     * @return {og.Extent} Extent object.
+     */
+    static createFromArray(arr) {
+        return new Extent(new LonLat(arr[0], arr[1]), new LonLat(arr[2], arr[3]));
+    };
 
-/**
- * Sets current bounding extent object by coordinate array.
- * @public
- * @param {Array.<og.LonLat>} arr - Coordinate array.
- * @return {og.Extent} Current extent.
- */
-Extent.prototype.setByCoordinates = function (arr) {
-    var lonmin = math.MAX, lonmax = math.MIN,
-        latmin = math.MAX, latmax = math.MIN;
-    for (var i = 0; i < arr.length; i++) {
-        var vi = arr[i];
-        if (vi.lon < lonmin) lonmin = vi.lon;
-        if (vi.lon > lonmax) lonmax = vi.lon;
-        if (vi.lat < latmin) latmin = vi.lat;
-        if (vi.lat > latmax) latmax = vi.lat;
-    }
-    this.southWest.lon = lonmin;
-    this.southWest.lat = latmin;
-    this.northEast.lon = lonmax;
-    this.northEast.lat = latmax;
-    return this;
-};
+    /**
+     * Creates bound extent instance by coordinate array.
+     * @static
+     * @param {Array.<og.LonLat>} arr - Coordinate array.
+     * @return {og.Extent} Extent object.
+     */
+    static createByCoordinates(arr) {
+        let lonmin = math.MAX, lonmax = math.MIN,
+            latmin = math.MAX, latmax = math.MIN;
+        for (let i = 0; i < arr.length; i++) {
+            const vi = arr[i];
+            if (vi.lon < lonmin) lonmin = vi.lon;
+            if (vi.lon > lonmax) lonmax = vi.lon;
+            if (vi.lat < latmin) latmin = vi.lat;
+            if (vi.lat > latmax) latmax = vi.lat;
+        }
+        return new Extent(new LonLat(lonmin, latmin), new LonLat(lonmax, latmax));
+    };
 
-/**
- * Determines if point inside extent.
- * @public
- * @param {LonLat} lonlat - Coordinate point.
- * @return {boolean} Returns true if point inside extent.
- */
-Extent.prototype.isInside = function (lonlat) {
-    var sw = this.southWest,
-        ne = this.northEast;
-    return lonlat.lon >= sw.lon && lonlat.lon <= ne.lon &&
-        lonlat.lat >= sw.lat && lonlat.lat <= ne.lat;
-};
+    /**
+     * Creates bound extent instance by coordinate array.
+     * @static
+     * @param {Array.<Array<number,number>>} arr - Coordinate array.
+     * @return {og.Extent} Extent object.
+     */
+    static createByCoordinatesArr(arr) {
+        let lonmin = math.MAX, lonmax = math.MIN,
+            latmin = math.MAX, latmax = math.MIN;
+        for (let i = 0; i < arr.length; i++) {
+            const vi = arr[i];
+            if (vi[0] < lonmin) lonmin = vi[0];
+            if (vi[0] > lonmax) lonmax = vi[0];
+            if (vi[1] < latmin) latmin = vi[1];
+            if (vi[1] > latmax) latmax = vi[1];
+        }
+        return new Extent(new LonLat(lonmin, latmin), new LonLat(lonmax, latmax));
+    };
 
-/**
- * Returns true if two extent overlap each other.
- * @public
- * @param {Extent} e - Another extent.
- * @return {boolean} -
- */
-Extent.prototype.overlaps = function (e) {
-    var sw = this.southWest,
-        ne = this.northEast;
-    return sw.lon <= e.northEast.lon && ne.lon >= e.southWest.lon &&
-        sw.lat <= e.northEast.lat && ne.lat >= e.southWest.lat;
-};
+    /**
+     * Creates extent by meractor grid tile coordinates.
+     * @static
+     * @param {number} x -
+     * @param {number} y -
+     * @param {number} z -
+     * @param {number} width -
+     * @param {number} height -
+     * @returns {og.Extent} -
+     */
+    static fromTile(x, y, z, width, height) {
+        width = width || mercator.POLE_DOUBLE;
+        height = height || mercator.POLE_DOUBLE;
+        const H = Math.pow(2, z),
+            W = Math.pow(2, z),
+            lnSize = width / W,
+            ltSize = height / H;
+
+        const left = -width * 0.5 + x * lnSize,
+            top = height * 0.5 - y * ltSize,
+            bottom = top - ltSize,
+            right = left + lnSize;
+
+        return new Extent(new LonLat(left, bottom), new LonLat(right, top));
+    };
 
-/**
- * Gets extent width.
- * @public
- * @return {number} Extent width.
- */
-Extent.prototype.getWidth = function () {
-    return this.northEast.lon - this.southWest.lon;
-};
+    /**
+     * Sets current bounding extent object by coordinate array.
+     * @public
+     * @param {Array.<og.LonLat>} arr - Coordinate array.
+     * @return {og.Extent} Current extent.
+     */
+    setByCoordinates(arr) {
+        let lonmin = math.MAX, lonmax = math.MIN,
+            latmin = math.MAX, latmax = math.MIN;
+        for (let i = 0; i < arr.length; i++) {
+            const vi = arr[i];
+            if (vi.lon < lonmin) lonmin = vi.lon;
+            if (vi.lon > lonmax) lonmax = vi.lon;
+            if (vi.lat < latmin) latmin = vi.lat;
+            if (vi.lat > latmax) latmax = vi.lat;
+        }
+        this.southWest.lon = lonmin;
+        this.southWest.lat = latmin;
+        this.northEast.lon = lonmax;
+        this.northEast.lat = latmax;
+        return this;
+    };
 
-/**
- * Gets extent height.
- * @public
- * @return {number} Extent height.
- */
-Extent.prototype.getHeight = function () {
-    return this.northEast.lat - this.southWest.lat;
-};
+    /**
+     * Determines if point inside extent.
+     * @public
+     * @param {LonLat} lonlat - Coordinate point.
+     * @return {boolean} Returns true if point inside extent.
+     */
+    isInside(lonlat) {
+        const sw = this.southWest,
+            ne = this.northEast;
+        return lonlat.lon >= sw.lon && lonlat.lon <= ne.lon &&
+            lonlat.lat >= sw.lat && lonlat.lat <= ne.lat;
+    };
 
-/**
- * Creates clone instance of the current extent.
- * @public
- * @return {og.Extent} Extent clone.
- */
-Extent.prototype.clone = function () {
-    return new Extent(this.southWest.clone(), this.northEast.clone());
-};
+    /**
+     * Returns true if two extent overlap each other.
+     * @public
+     * @param {Extent} e - Another extent.
+     * @return {boolean} -
+     */
+    overlaps(e) {
+        const sw = this.southWest,
+            ne = this.northEast;
+        return sw.lon <= e.northEast.lon && ne.lon >= e.southWest.lon &&
+            sw.lat <= e.northEast.lat && ne.lat >= e.southWest.lat;
+    };
 
-/**
- * Gets the center coordinate of the extent.
- * @public
- * @return {number} Center coordinate.
- */
-Extent.prototype.getCenter = function () {
-    var sw = this.southWest, ne = this.northEast;
-    return new LonLat(sw.lon + (ne.lon - sw.lon) * 0.5, sw.lat + (ne.lat - sw.lat) * 0.5);
-};
+    /**
+     * Gets extent width.
+     * @public
+     * @return {number} Extent width.
+     */
+    getWidth() {
+        return this.northEast.lon - this.southWest.lon;
+    };
 
-/**
- * @public
- */
-Extent.prototype.getNorthWest = function () {
-    return new LonLat(this.southWest.lon, this.northEast.lat);
-};
+    /**
+     * Gets extent height.
+     * @public
+     * @return {number} Extent height.
+     */
+    getHeight() {
+        return this.northEast.lat - this.southWest.lat;
+    };
 
-/**
- * @public
- */
-Extent.prototype.getNorthEast = function () {
-    return new LonLat(this.northEast.lon, this.northEast.lat);
-};
+    /**
+     * Creates clone instance of the current extent.
+     * @public
+     * @return {og.Extent} Extent clone.
+     */
+    clone() {
+        return new Extent(this.southWest.clone(), this.northEast.clone());
+    };
 
-Extent.prototype.getSouthWest = function () {
-    return new LonLat(this.southWest.lon, this.southWest.lat);
-};
+    /**
+     * Gets the center coordinate of the extent.
+     * @public
+     * @return {number} Center coordinate.
+     */
+    getCenter() {
+        const sw = this.southWest, ne = this.northEast;
+        return new LonLat(sw.lon + (ne.lon - sw.lon) * 0.5, sw.lat + (ne.lat - sw.lat) * 0.5);
+    };
 
-/**
- * @public
- */
-Extent.prototype.getSouthEast = function () {
-    return new LonLat(this.northEast.lon, this.southWest.lat);
-};
+    /**
+     * @public
+     */
+    getNorthWest() {
+        return new LonLat(this.southWest.lon, this.northEast.lat);
+    };
 
-/**
- * @public
- */
-Extent.prototype.getNorth = function () {
-    return this.northEast.lat;
-};
+    /**
+     * @public
+     */
+    getNorthEast() {
+        return new LonLat(this.northEast.lon, this.northEast.lat);
+    };
 
-Extent.prototype.getEast = function () {
-    return this.northEast.lon;
-};
+    getSouthWest() {
+        return new LonLat(this.southWest.lon, this.southWest.lat);
+    };
 
-/**
- * @public
- */
-Extent.prototype.getWest = function () {
-    return this.southWest.lon;
-};
+    /**
+     * @public
+     */
+    getSouthEast() {
+        return new LonLat(this.northEast.lon, this.southWest.lat);
+    };
 
-/**
- * @public
- */
-Extent.prototype.getSouth = function () {
-    return this.southWest.lat;
-};
+    /**
+     * @public
+     */
+    getNorth() {
+        return this.northEast.lat;
+    };
 
-/**
- * Returns extents are equals.
- * @param {og.Extent} extent - Extent.
- * @returns {boolean} -
- */
-Extent.prototype.equals = function (extent) {
-    return this.southWest.lon === extent.southWest.lon && this.southWest.lat === extent.southWest.lat &&
-        this.northEast.lon === extent.northEast.lon && this.northEast.lat === extent.northEast.lat;
-};
+    getEast() {
+        return this.northEast.lon;
+    };
 
-/**
- * Converts extent coordinates to mercator projection coordinates.
- * @public
- * @return {og.Extent} New instance of the current extent.
- */
-Extent.prototype.forwardMercator = function () {
-    return new Extent(this.southWest.forwardMercator(), this.northEast.forwardMercator());
-};
+    /**
+     * @public
+     */
+    getWest() {
+        return this.southWest.lon;
+    };
 
-/**
- * Converts extent coordinates from mercator projection to degrees.
- * @public
- * @return {og.Extent} New instance of the current extent.
- */
-Extent.prototype.inverseMercator = function () {
-    return new Extent(this.southWest.inverseMercator(), this.northEast.inverseMercator());
-};
+    /**
+     * @public
+     */
+    getSouth() {
+        return this.southWest.lat;
+    };
 
-/**
- * Gets cartesian bounding bounds of the current ellipsoid.
- * @public
- * @param {og.Ellipsoid} ellipsoid - Ellipsoid.
- * @return {Array.<number,number,number,number,number,number>} Cartesian 3d coordinate array.
- */
-Extent.prototype.getCartesianBounds = function (ellipsoid) {
-    var xmin = math.MAX, xmax = math.MIN, ymin = math.MAX,
-        ymax = math.MIN, zmin = math.MAX, zmax = math.MIN;
-
-    var v = [new LonLat(this.southWest.lon, this.southWest.lat),
-    new LonLat(this.southWest.lon, this.northEast.lat),
-    new LonLat(this.northEast.lon, this.northEast.lat),
-    new LonLat(this.northEast.lon, this.southWest.lat)];
-
-    for (var i = 0; i < v.length; i++) {
-        var coord = ellipsoid.lonLatToCartesian(v[i]);
-        var x = coord.x, y = coord.y, z = coord.z;
-        if (x < xmin) xmin = x;
-        if (x > xmax) xmax = x;
-        if (y < ymin) ymin = y;
-        if (y > ymax) ymax = y;
-        if (z < zmin) zmin = z;
-        if (z > zmax) zmax = z;
-    }
+    /**
+     * Returns extents are equals.
+     * @param {og.Extent} extent - Extent.
+     * @returns {boolean} -
+     */
+    equals(extent) {
+        return this.southWest.lon === extent.southWest.lon && this.southWest.lat === extent.southWest.lat &&
+            this.northEast.lon === extent.northEast.lon && this.northEast.lat === extent.northEast.lat;
+    };
 
-    return [xmin, ymin, zmin, xmax, ymax, zmax];
-};
+    /**
+     * Converts extent coordinates to mercator projection coordinates.
+     * @public
+     * @return {og.Extent} New instance of the current extent.
+     */
+    forwardMercator() {
+        return new Extent(this.southWest.forwardMercator(), this.northEast.forwardMercator());
+    };
 
-Extent.prototype.toString = function () {
-    return "[" + this.southWest.lon + ", " + this.southWest.lat + ", " + this.northEast.lon + ", " + this.northEast.lat + "]";
-};
+    /**
+     * Converts extent coordinates from mercator projection to degrees.
+     * @public
+     * @return {og.Extent} New instance of the current extent.
+     */
+    inverseMercator() {
+        return new Extent(this.southWest.inverseMercator(), this.northEast.inverseMercator());
+    };
 
-export { Extent };
+    /**
+     * Gets cartesian bounding bounds of the current ellipsoid.
+     * @public
+     * @param {og.Ellipsoid} ellipsoid - Ellipsoid.
+     * @return {Array.<number,number,number,number,number,number>} Cartesian 3d coordinate array.
+     */
+    getCartesianBounds(ellipsoid) {
+        let xmin = math.MAX, xmax = math.MIN, ymin = math.MAX,
+            ymax = math.MIN, zmin = math.MAX, zmax = math.MIN;
+
+        const v = [new LonLat(this.southWest.lon, this.southWest.lat),
+        new LonLat(this.southWest.lon, this.northEast.lat),
+        new LonLat(this.northEast.lon, this.northEast.lat),
+        new LonLat(this.northEast.lon, this.southWest.lat)];
+
+        for (let i = 0; i < v.length; i++) {
+            const coord = ellipsoid.lonLatToCartesian(v[i]);
+            const x = coord.x, y = coord.y, z = coord.z;
+            if (x < xmin) xmin = x;
+            if (x > xmax) xmax = x;
+            if (y < ymin) ymin = y;
+            if (y > ymax) ymax = y;
+            if (z < zmin) zmin = z;
+            if (z > zmax) zmax = z;
+        }
+
+        return [xmin, ymin, zmin, xmax, ymax, zmax];
+    };
+
+    toString() {
+        return "[" + this.southWest.lon + ", " + this.southWest.lat + ", " + this.northEast.lon + ", " + this.northEast.lat + "]";
+    };
+
+}

package/src/og/Globe.js

@@ -13,6 +13,7 @@ import { isEmpty } from "./utils/shared.js";
 
 import { EarthCoordinates } from "./control/EarthCoordinates.js";
 import { MouseNavigation } from "./control/MouseNavigation.js";
+import { EarthNavigation } from "./control/EarthNavigation.js";
 import { TouchNavigation } from "./control/TouchNavigation.js";
 import { Sun } from "./control/Sun.js";
 import { ZoomControl } from "./control/ZoomControl.js";
@@ -81,7 +82,8 @@ class Globe {
          * @public
          * @type {Element}
          */
-        this.div = document.getElementById(options.target);
+        this.div =
+            document.getElementById(options.target) || document.querySelector(options.target);
         this.div.appendChild(this._canvas);
         this.div.classList.add("ogViewport");
 
@@ -151,7 +153,9 @@ class Globe {
                 ellipsoid: options.ellipsoid,
                 maxGridSize: options.maxGridSize,
                 useNightTexture: options.useNightTexture,
-                useSpecularTexture: options.useSpecularTexture
+                useSpecularTexture: options.useSpecularTexture,
+                minAltitude: options.minAltitude,
+                maxAltitude: options.maxAltitude
             });
         }
 
@@ -170,7 +174,11 @@ class Globe {
         } else {
             this.planet.addControls([
                 new ZoomControl(),
-                new MouseNavigation(),
+                options.useEarthNavigation
+                    ? new EarthNavigation()
+                    : new MouseNavigation({
+                          minSlope: options.minSlope
+                      }),
                 new TouchNavigation(),
                 new EarthCoordinates(),
                 new ScaleControl(),