@openglobus/og 0.14.10 → 0.15.1

package/src/og/terrain/GlobusTerrain.js

@@ -42,7 +42,7 @@ const EVENT_NAMES = [
  * @param {string} [options.url="//openglobus.org/heights/srtm3/{z}/{y}/{x}.ddm"] - Terrain source path url template. Default is openglobus ddm elevation file.
  * @param {Array.<number>} [options.gridSizeByZoom] - Array of segment triangulation grid sizes where array index agreed to the segment zoom index.
  * @param {number} [options.plainGridSize=32] - Elevation grid size. Default is 32x32. Must be power of two.
- * @param {string} [options.responseType="arraybuffer"] - Ajax responce type.
+ * @param {string} [options.responseType="arraybuffer"] - Responce type.
  * @param {number} [options.MAX_LOADING_TILES] - Maximum at one time loading tiles.
  * @param {Array.<number>} [gridSizeByZoom] - Array of values, where each value corresponds to the size of a tile(or segment) on the globe. Each value must be power of two.
  * @fires og.terrain.GlobusTerrain#load
@@ -163,7 +163,7 @@ class GlobusTerrain extends EmptyTerrain {
     }
 
     isBlur(segment) {
-        if (segment.tileZoom >= 8) {
+        if (segment.tileZoom >= 6) {
             return true;
         }
         return false;
@@ -369,7 +369,8 @@ class GlobusTerrain extends EmptyTerrain {
                                 let heights = this._createHeights(response.data,
                                     segment.tileIndex,
                                     segment.tileX, segment.tileY, segment.tileZoom,
-                                    segment.getExtent()
+                                    segment.getExtent(),
+                                    segment.tileZoom === this.maxZoom
                                 );
 
                                 this._elevationCache[segment.tileIndex] = {
@@ -399,7 +400,7 @@ class GlobusTerrain extends EmptyTerrain {
 
     _getSubdomain() {
         this._requestCount++;
-        return  this._s[Math.floor(this._requestCount % (this._requestsPeerSubdomian * this._s.length) / this._requestsPeerSubdomian)];
+        return this._s[Math.floor(this._requestCount % (this._requestsPeerSubdomian * this._s.length) / this._requestsPeerSubdomian)];
     }
 
     _buildURL(x, y, z) {

package/src/og/terrain/MapboxTerrain.js

@@ -2,10 +2,15 @@ import { getTileExtent } from "../mercator.js";
 import { Layer } from "../layer/Layer.js";
 import { GlobusTerrain } from "./GlobusTerrain.js";
 import { isPowerOfTwo } from "../math.js";
+import * as mercator from "../mercator.js";
 
 const KEY =
     "pk.eyJ1IjoiZm94bXVsZGVyODMiLCJhIjoiY2pqYmR3dG5oM2Z1bzNrczJqYm5pODhuNSJ9.Y4DRmEPhb-XSlCR9CAXACQ";
 
+const rgb2Height = (r, g, b) => {
+    return -10000 + 0.1 * (r * 256 * 256 + g * 256 + b);
+};
+
 class MapboxTerrain extends GlobusTerrain {
     constructor(name, options = {}) {
         super(name || "mapbox", options);
@@ -39,10 +44,12 @@ class MapboxTerrain extends GlobusTerrain {
         this._imageSize = options.imageSize || 256;
 
         this._ctx = this._createTemporalCanvas(this._imageSize);
+
+        this._imageDataCache = {};
     }
 
     isBlur(segment) {
-        if (segment.tileZoom >= 13) {
+        if (segment.tileZoom >= 16) {
             return true;
         }
         return false;
@@ -52,15 +59,19 @@ class MapboxTerrain extends GlobusTerrain {
         let canvas = document.createElement("canvas");
         canvas.width = size;
         canvas.height = size;
-        return canvas.getContext("2d");
+        return canvas.getContext("2d",
+            {
+                willReadFrequently: true
+            });
     }
 
-    _createHeights(data, tileIndex, tileX, tileY, tileZoom, extent) {
-        const SIZE = data.width;
+    _createHeights(data, tileIndex, tileX, tileY, tileZoom, extent, preventChildren) {
 
-        this._ctx.clearRect(0, 0, SIZE, SIZE);
+        this._ctx.clearRect(0, 0, this._imageSize, this._imageSize);
         this._ctx.drawImage(data, 0, 0);
-        let rgbaData = this._ctx.getImageData(0, 0, SIZE, SIZE).data;
+        let rgbaData = this._ctx.getImageData(0, 0, this._imageSize, this._imageSize).data;
+
+        const SIZE = data.width;
 
         //
         //Non power of two images
@@ -71,25 +82,42 @@ class MapboxTerrain extends GlobusTerrain {
             return outCurrenElevations;
         }
 
-        // TODO:
-        //if (this._imageSize === this.plainGridSize) {
-        //    let elevationsSize = (this.plainGridSize + 1) * (this.plainGridSize + 1);
-        //    let d = SIZE / this.plainGridSize;
+        if (this._imageSize === this.plainGridSize) {
+            let elevationsSize = (this.plainGridSize + 1) * (this.plainGridSize + 1);
+            let outCurrenElevations = new Float32Array(elevationsSize);
+            for (let k = 0, len = this._imageSize * this._imageSize; k < len; k++) {
+                let j = k % this._imageSize,
+                    i = Math.floor(k / this._imageSize);
+                let fromInd4 = k * 4;
+                let h = rgb2Height(rgbaData[fromInd4], rgbaData[fromInd4 + 1], rgbaData[fromInd4 + 2]);
+                outCurrenElevations[i * (this._imageSize + 1) + j] = h;
+            }
+
+            for (let i = 0, len = this._imageSize; i < len; i++) {
+                let j = this._imageSize - 1;
+                let fromInd4 = (i * this._imageSize + j) * 4;
+                let h = rgb2Height(rgbaData[fromInd4], rgbaData[fromInd4 + 1], rgbaData[fromInd4 + 2]);
+                outCurrenElevations[i * (this._imageSize + 1) + this._imageSize] = h;
+            }
 
-        //    let outCurrenElevations = new Float32Array(elevationsSize);
+            for (let j = 0, len = this._imageSize; j < len; j++) {
+                let i = this._imageSize - 1;
+                let fromInd4 = (i * this._imageSize + j) * 4;
+                let h = rgb2Height(rgbaData[fromInd4], rgbaData[fromInd4 + 1], rgbaData[fromInd4 + 2]);
+                outCurrenElevations[this._imageSize * (this._imageSize + 1) + j] = h;
+            }
 
-        //    for (let i = 0, len = outCurrenElevations.length; i < len; i++) {
-        //        let i4 = i * 4;
-        //        outCurrenElevations[i] = -10000 + 0.1 * (rgbaData[i4] * 256 * 256 + rgbaData[i4 + 1] * 256 + rgbaData[i4 + 2]);
-        //    }
+            let h = rgb2Height(rgbaData[rgbaData.length - 4], rgbaData[rgbaData.length - 3], rgbaData[rgbaData.length - 2]);
+            outCurrenElevations[outCurrenElevations.length - 1] = h;
 
-        //    return outCurrenElevations;
-        //}
+            return outCurrenElevations;
+        }
 
         //
         // Power of two images
         //
         let elevationsSize = (this.plainGridSize + 1) * (this.plainGridSize + 1);
+
         let d = SIZE / this.plainGridSize;
 
         let outCurrenElevations = new Float32Array(elevationsSize);
@@ -102,40 +130,99 @@ class MapboxTerrain extends GlobusTerrain {
             }
         }
 
-        extractElevationTilesMapbox(
-            rgbaData,
-            this.noDataValues,
-            outCurrenElevations,
-            outChildrenElevations
-        );
+        if (preventChildren) {
+            extractElevationTilesMapboxNoChildren(rgbaData, this.noDataValues, outCurrenElevations);
+        } else {
+            extractElevationTilesMapbox(
+                rgbaData,
+                this.noDataValues,
+                outCurrenElevations,
+                outChildrenElevations
+            );
+        }
 
         this._elevationCache[tileIndex] = {
             heights: outCurrenElevations,
             extent: extent//segment.getExtent()
         };
 
-        for (let i = 0; i < d; i++) {
-            for (let j = 0; j < d; j++) {
-                let x = tileX * 2 + j,
-                    y = tileY * 2 + i,
-                    z = tileZoom + 1;
-                let tileIndex = Layer.getTileIndex(x, y, z);
-                this._elevationCache[tileIndex] = {
-                    heights: outChildrenElevations[i][j],
-                    extent: getTileExtent(x, y, z)
-                };
+        if (!preventChildren) {
+            for (let i = 0; i < d; i++) {
+                for (let j = 0; j < d; j++) {
+                    let x = tileX * 2 + j,
+                        y = tileY * 2 + i,
+                        z = tileZoom + 1;
+                    let tileIndex = Layer.getTileIndex(x, y, z);
+                    this._elevationCache[tileIndex] = {
+                        heights: outChildrenElevations[i][j],
+                        extent: getTileExtent(x, y, z)
+                    };
+                }
             }
         }
 
         return outCurrenElevations;
     }
+
+    getHeightAsync(lonLat, callback, zoom) {
+        if (!lonLat || lonLat.lat > mercator.MAX_LAT || lonLat.lat < mercator.MIN_LAT) {
+            callback(0);
+            return true;
+        }
+
+        let z = zoom || this.maxZoom,
+            size = mercator.POLE2 / Math.pow(2, z),
+            merc = mercator.forward(lonLat),
+            x = Math.floor((mercator.POLE + merc.lon) / size),
+            y = Math.floor((mercator.POLE - merc.lat) / size);
+
+        let tileIndex = Layer.getTileIndex(x, y, z),
+            extent = mercator.getTileExtent(x, y, z);
+
+        let sizeImgW = extent.getWidth() / (this._imageSize - 1),
+            sizeImgH = extent.getHeight() / (this._imageSize - 1);
+
+        let i = this._imageSize - Math.ceil((merc.lat - extent.southWest.lat) / sizeImgH) - 1,
+            j = Math.floor((merc.lon - extent.southWest.lon) / sizeImgW);
+        let index = (i * this._imageSize + j) * 4;
+
+        if (this._imageDataCache[tileIndex]) {
+            let data = this._imageDataCache[tileIndex];
+            callback(rgb2Height(data[index], data[index + 1], data[index + 2]));
+            return true;
+        }
+
+        if (!this._fetchCache[tileIndex]) {
+            let url = this._buildURL(x, y, z);
+            this._fetchCache[tileIndex] = this._loader.fetch({
+                src: url,
+                type: this._dataType
+            });
+        }
+
+        this._fetchCache[tileIndex].then((response) => {
+            if (response.status === "ready") {
+                this._ctx.clearRect(0, 0, this._imageSize, this._imageSize);
+                this._ctx.drawImage(response.data, 0, 0);
+                let data = this._ctx.getImageData(0, 0, 256, 256).data;
+                this._imageDataCache[tileIndex] = data;
+                callback(rgb2Height(data[index], data[index + 1], data[index + 2]));
+            } else if (response.status === "error") {
+                callback(0);
+            } else {
+                this._fetchCache[tileIndex] = null;
+                delete this._fetchCache[tileIndex];
+            }
+        });
+
+        return false;
+    }
 }
 
 function extractElevationTilesMapboxNonPowerOfTwo(rgbaData, outCurrenElevations) {
     for (let i = 0, len = outCurrenElevations.length; i < len; i++) {
         let i4 = i * 4;
-        outCurrenElevations[i] =
-            -10000 + 0.1 * (rgbaData[i4] * 256 * 256 + rgbaData[i4 + 1] * 256 + rgbaData[i4 + 2]);
+        outCurrenElevations[i] = rgb2Height(rgbaData[i4], rgbaData[i4 + 1], rgbaData[i4 + 2]);
     }
 }
 
@@ -161,8 +248,8 @@ function extractElevationTilesMapbox(
     ) {
         let k4 = k * 4;
 
-        let height =
-            -10000 + 0.1 * (rgbaData[k4] * 256 * 256 + rgbaData[k4 + 1] * 256 + rgbaData[k4 + 2]);
+        let height = rgb2Height(rgbaData[k4], rgbaData[k4 + 1], rgbaData[k4 + 2]);
+        //-10000 + 0.1 * (rgbaData[k4] * 256 * 256 + rgbaData[k4 + 1] * 256 + rgbaData[k4 + 2]);
 
         let isNoDataCurrent = MapboxTerrain.checkNoDataValue(noDataValues, height),
             isNoDataRight = false,
@@ -189,9 +276,8 @@ function extractElevationTilesMapbox(
 
         if ((j + 1) % destSize === 0 && j !== sourceSize - 1) {
             //current tile
-            rightHeight =
-                -10000 +
-                0.1 * (rgbaData[k4 + 4] * 256 * 256 + rgbaData[k4 + 5] * 256 + rgbaData[k4 + 6]);
+            rightHeight = rgb2Height(rgbaData[k4 + 4], rgbaData[k4 + 5], rgbaData[k4 + 6]);
+            // -10000 + 0.1 * (rgbaData[k4 + 4] * 256 * 256 + rgbaData[k4 + 5] * 256 + rgbaData[k4 + 6]);
 
             isNoDataRight = MapboxTerrain.checkNoDataValue(noDataValues, rightHeight);
 
@@ -217,12 +303,8 @@ function extractElevationTilesMapbox(
             //current tile
             sourceSize4 = sourceSize * 4;
 
-            bottomHeight =
-                -10000 +
-                0.1 *
-                (rgbaData[k4 + sourceSize4] * 256 * 256 +
-                    rgbaData[k4 + sourceSize4 + 1] * 256 +
-                    rgbaData[k4 + sourceSize4 + 2]);
+            bottomHeight = rgb2Height(rgbaData[k4 + sourceSize4], rgbaData[k4 + sourceSize4 + 1], rgbaData[k4 + sourceSize4 + 2]);
+            // -10000 + 0.1 * (rgbaData[k4 + sourceSize4] * 256 * 256 + rgbaData[k4 + sourceSize4 + 1] * 256 + rgbaData[k4 + sourceSize4 + 2]);
 
             isNoDataBottom = MapboxTerrain.checkNoDataValue(noDataValues, bottomHeight);
 
@@ -251,12 +333,8 @@ function extractElevationTilesMapbox(
             i !== sourceSize - 1
         ) {
             //current tile
-            let rightBottomHeight =
-                -10000 +
-                0.1 *
-                (rgbaData[k4 + sourceSize4 + 4] * 256 * 256 +
-                    rgbaData[k4 + sourceSize4 + 5] * 256 +
-                    rgbaData[k4 + sourceSize4 + 6]);
+            let rightBottomHeight = rgb2Height(rgbaData[k4 + sourceSize4 + 4], rgbaData[k4 + sourceSize4 + 5], rgbaData[k4 + sourceSize4 + 6]);
+            // -10000 + 0.1 * (rgbaData[k4 + sourceSize4 + 4] * 256 * 256 + rgbaData[k4 + sourceSize4 + 5] * 256 + rgbaData[k4 + sourceSize4 + 6]);
 
             let isNoDataRightBottom = MapboxTerrain.checkNoDataValue(
                 noDataValues,
@@ -289,4 +367,105 @@ function extractElevationTilesMapbox(
     }
 }
 
+function extractElevationTilesMapboxNoChildren(
+    rgbaData,
+    noDataValues,
+    outCurrenElevations
+) {
+    let destSize = Math.sqrt(outCurrenElevations.length) - 1;
+    let sourceSize = Math.sqrt(rgbaData.length / 4);
+    let dt = sourceSize / destSize;
+
+    let rightHeight = 0,
+        bottomHeight = 0,
+        sourceSize4 = 0;
+
+    for (
+        let k = 0, currIndex = 0, sourceDataLength = rgbaData.length / 4;
+        k < sourceDataLength;
+        k++
+    ) {
+        let k4 = k * 4;
+
+        let height = rgb2Height(rgbaData[k4], rgbaData[k4 + 1], rgbaData[k4 + 2]);
+        //-10000 + 0.1 * (rgbaData[k4] * 256 * 256 + rgbaData[k4 + 1] * 256 + rgbaData[k4 + 2]);
+
+        let isNoDataCurrent = MapboxTerrain.checkNoDataValue(noDataValues, height),
+            isNoDataRight = false,
+            isNoDataBottom = false;
+
+        let i = Math.floor(k / sourceSize),
+            j = k % sourceSize;
+
+        let tileX = Math.floor(j / destSize),
+            tileY = Math.floor(i / destSize);
+
+        if ((i + tileY) % dt === 0 && (j + tileX) % dt === 0) {
+            outCurrenElevations[currIndex++] = height;
+        }
+
+        if ((j + 1) % destSize === 0 && j !== sourceSize - 1) {
+            //current tile
+            rightHeight = rgb2Height(rgbaData[k4 + 4], rgbaData[k4 + 5], rgbaData[k4 + 6]);
+            //-10000 + 0.1 * (rgbaData[k4 + 4] * 256 * 256 + rgbaData[k4 + 5] * 256 + rgbaData[k4 + 6]);
+
+            isNoDataRight = MapboxTerrain.checkNoDataValue(noDataValues, rightHeight);
+
+            let middleHeight = height;
+
+            if (!(isNoDataCurrent || isNoDataRight)) {
+                middleHeight = (height + rightHeight) * 0.5;
+            }
+
+            if ((i + tileY) % dt === 0) {
+                outCurrenElevations[currIndex++] = middleHeight;
+            }
+        }
+
+        if ((i + 1) % destSize === 0 && i !== sourceSize - 1) {
+            //current tile
+            sourceSize4 = sourceSize * 4;
+
+            bottomHeight = rgb2Height(rgbaData[k4 + sourceSize4], rgbaData[k4 + sourceSize4 + 1], rgbaData[k4 + sourceSize4 + 2]);
+            // -10000 + 0.1 * (rgbaData[k4 + sourceSize4] * 256 * 256 + rgbaData[k4 + sourceSize4 + 1] * 256 + rgbaData[k4 + sourceSize4 + 2]);
+
+            isNoDataBottom = MapboxTerrain.checkNoDataValue(noDataValues, bottomHeight);
+
+            let middleHeight = (height + bottomHeight) * 0.5;
+
+            if (!(isNoDataCurrent || isNoDataBottom)) {
+                middleHeight = (height + bottomHeight) * 0.5;
+            }
+
+            if ((j + tileX) % dt === 0) {
+                outCurrenElevations[currIndex++] = middleHeight;
+            }
+        }
+
+        if (
+            (j + 1) % destSize === 0 &&
+            j !== sourceSize - 1 &&
+            (i + 1) % destSize === 0 &&
+            i !== sourceSize - 1
+        ) {
+            //current tile
+            let rightBottomHeight = rgb2Height(rgbaData[k4 + sourceSize4 + 4], rgbaData[k4 + sourceSize4 + 5], rgbaData[k4 + sourceSize4 + 6]);
+            // -10000 + 0.1 * (rgbaData[k4 + sourceSize4 + 4] * 256 * 256 + rgbaData[k4 + sourceSize4 + 5] * 256 + rgbaData[k4 + sourceSize4 + 6]);
+
+            let isNoDataRightBottom = MapboxTerrain.checkNoDataValue(
+                noDataValues,
+                rightBottomHeight
+            );
+
+            let middleHeight = height;
+
+            if (!(isNoDataCurrent || isNoDataRight || isNoDataBottom || isNoDataRightBottom)) {
+                middleHeight = (height + rightHeight + bottomHeight + rightBottomHeight) * 0.25;
+            }
+
+            outCurrenElevations[currIndex++] = middleHeight;
+        }
+    }
+}
+
 export { MapboxTerrain };

package/src/og/ui/Button.js

@@ -0,0 +1,106 @@
+'use strict'
+
+import { View } from './View.js';
+import { stringTemplate } from '../utils/shared.js';
+
+const TEMPLATE =
+    `<div class="og-button">
+       <div class="og-button-icon">{icon}</div>
+       <div class="og-button-text">{text}</div>
+    </div>`;
+
+class Button extends View {
+    constructor(options = {}) {
+        super({
+            template: stringTemplate(TEMPLATE, {
+                icon: options.icon || "",
+                text: options.text || ""
+            }),
+            ...options,
+            eventList: ["click", "mousedown", "mouseup", "touchstart", "touchend", "touchcancel", ...(options.eventList || [])]
+        });
+
+        this.name = options.name || "";
+
+        this.$icon;
+        this.$text;
+    }
+
+    render(params) {
+        super.render(params);
+        this.$icon = this.select(".og-button-icon");
+        this.$text = this.select(".og-button-text");
+        this.el.__og_button__ = this;
+        this._initEvents();
+        return this;
+    }
+
+    _initEvents() {
+        this._onMouseClick_ = this._onMouseClick.bind(this);
+        this.el.addEventListener("click", this._onMouseClick_);
+
+        this._onMouseDown_ = this._onMouseDown.bind(this);
+        this.el.addEventListener("mousedown", this._onMouseDown_);
+
+        this._onMouseUp_ = this._onMouseUp.bind(this);
+        this.el.addEventListener("mouseup", this._onMouseUp_);
+
+        this._onTouchStart_ = this._onTouchStart.bind(this);
+        this.el.addEventListener("touchstart", this._onTouchStart_);
+
+        this._onTouchEnd_ = this._onTouchEnd.bind(this);
+        this.el.addEventListener("touchend", this._onTouchEnd_);
+
+        this._onTouchCancel_ = this._onTouchCancel.bind(this);
+        this.el.addEventListener("touchcancel", this._onTouchCancel_);
+
+    }
+
+    _onMouseDown(e) {
+        e = e || window.event;
+        e.preventDefault();
+        this._events.dispatch(this._events.mousedown, this, e);
+    }
+
+    _onMouseUp(e) {
+        e = e || window.event;
+        e.preventDefault();
+        this._events.dispatch(this._events.mouseup, this, e);
+    }
+
+    _onTouchStart(e) {
+        e = e || window.event;
+        e.preventDefault();
+        this._events.dispatch(this._events.touchstart, this, e);
+    }
+
+    _onTouchEnd(e) {
+        e = e || window.event;
+        e.preventDefault();
+        this._events.dispatch(this._events.touchend, this, e);
+    }
+
+    _onTouchCancel(e) {
+        e = e || window.event;
+        e.preventDefault();
+        this._events.dispatch(this._events.touchcancel, this, e);
+    }
+
+    _onMouseClick(e) {
+        e = e || window.event;
+        e.preventDefault();
+        this._events.dispatch(this._events.click, this, e);
+    }
+
+    remove() {
+        this._clearEvents();
+        super.remove();
+    }
+
+    _clearEvents() {
+        this.el.removeEventListener("click", this._onMouseClick_);
+        this._onMouseClick_ = undefined;
+    }
+}
+
+export { Button }

package/src/og/ui/ButtonGroup.js

@@ -0,0 +1,57 @@
+'use strict';
+
+import { Events } from '../Events.js';
+
+class ButtonGroup {
+    constructor(options) {
+        this._events = new Events(["change", ...(options.eventList || [])]);
+
+        this._buttons = options.buttons
+        for (let i = 0; i < this._buttons.length; i++) {
+            this._bindButton(this._buttons[i]);
+        }
+    }
+
+    on(eventName, callback, sender) {
+        this._events.on(eventName, callback, sender);
+    }
+
+    off(eventName, callback) {
+        this._events.off(eventName, callback);
+    }
+
+    _bindButton(button) {
+        button.on("change", this._onChange, this);
+    }
+
+    add(button) {
+        this._buttons.push(button);
+        this._bindButton(button);
+    }
+
+    _onChange(isActive, btn) {
+        if (isActive) {
+            btn.preventClick = true;
+            for (let i = 0; i < this._buttons.length; i++) {
+                let bi = this._buttons[i];
+                if (!bi.isEqual(btn)) {
+                    bi.setActive(false);
+                    bi.preventClick = false;
+                }
+            }
+            this._events.dispatch(this._events.change, btn);
+        }
+    }
+
+    remove(button) {
+        for (let i = 0; i < this._buttons.length; i++) {
+            if (this._buttons[i].isEqual(button)) {
+                this._buttons.splice(i);
+                button.off("change", this._onChange);
+                return;
+            }
+        }
+    }
+}
+
+export { ButtonGroup }