@openglobus/og 0.17.1 → 0.18.0

package/src/{og/layer/WMS.js → layer/WMS.ts}

@@ -1,15 +1,21 @@
-"use strict";
-
-import { Extent } from "../Extent.js";
-import { LonLat } from "../LonLat.js";
-import * as mercator from "../mercator.js";
-import { XYZ } from "./XYZ.js";
+import * as mercator from "../mercator";
+import {Extent} from "../Extent";
+import {LonLat} from "../LonLat";
+import {Segment} from "../segment/Segment";
+import {XYZ, IXYZParams} from "./XYZ";
+
+interface IWMSParams extends IXYZParams {
+    extra?: any;
+    layers: string;
+    imageWidth?: number;
+    imageHeight?: number;
+    version?: string;
+}
 
 /**
  * Used to display WMS services as tile layers on the globe.
  * @class
  * @extends {XYZ}
- * //TODO: WMS version, format, and custom srs cpecification.
  * @param {string} name - Layer name.
  * @param {Object} options - Options:
  * @param {number} [options.opacity=1.0] - Layer opacity.
@@ -23,7 +29,7 @@ import { XYZ } from "./XYZ.js";
  * @param {number} [options.height=256] - Tile height.
  * @param {string} options.layers - WMS layers string.
  * @param {string} [options.version="1.1.1"] - WMS version.
- * @param {Object} extra  - Extra parameters (by WMS rreference or by WMS service vendors) to pass to WMS service.
+ * @param {Object} extra  - Extra parameters (by WMS reference or by WMS service vendors) to pass to WMS service.
  * @example:
  * new og.layer.WMS("USA States", {
  *     isBaseLayer: false,
@@ -35,30 +41,47 @@ import { XYZ } from "./XYZ.js";
  *     version: "1.1.1",
  *     visibility: false }, {
  *     transparent: true,
- *     sld: "style.sld"}	   
+ *     sld: "style.sld"}
  * );
- *
- * @fires og.layer.XYZ#load
- * @fires og.layer.XYZ#loadend
  */
 class WMS extends XYZ {
 
+    protected _extra: string;
 
-    constructor(name, options, extra) {
-        super(name, options);
+    /**
+     * WMS layers string.
+     * @public
+     * @type {string}
+     */
+    public layers: string;
+
+    /**
+     * WMS tile width.
+     * @public
+     * @type {number}
+     */
+    public imageWidth: number;
+
+    /**
+     * WMS tile height.
+     * @public
+     * @type {number}
+     */
+    public imageHeight: number;
 
-        this._extra = new URLSearchParams(extra).toString();
+    protected _getBbox: (extent: Extent) => string;
 
+    protected _version: string;
+
+    constructor(name: string | null, options: IWMSParams) {
+        super(name, options);
+
+        this._extra = new URLSearchParams(options.extra).toString();
 
         if (!options.extent) {
             this.setExtent(new Extent(new LonLat(-180.0, -90), new LonLat(180.0, 90)));
         }
 
-        /**
-         * WMS layers string.
-         * @public
-         * @type {string}
-         */
         this.layers = options.layers;
 
         /**
@@ -77,59 +100,43 @@ class WMS extends XYZ {
 
         this._getBbox = WMS.get_bbox_v1_1_1;
 
+        this._version = "";
+
         this.setVersion(options.version);
     }
 
     static createRequestUrl(
-        url,
-        layers,
-        format = "image/png",
-        version = "1.1.1",
-        request = "GetMap",
-        srs,
-        bbox,
-        width = 256,
-        height = 256,
-        extra
-
-    ) {
-       return `${url}/?LAYERS=${layers}&FORMAT=${format}&SERVICE=WMS&VERSION=${version}&REQUEST=${request}&SRS=${srs}&BBOX=${bbox}&WIDTH=${width}&HEIGHT=${height}` +
-            (extra ? `&${extra}` : "");
+        url: string,
+        layers: string,
+        format: string = "image/png",
+        version: string = "1.1.1",
+        request: string = "GetMap",
+        srs: string,
+        bbox: string,
+        width: number = 256,
+        height: number = 256,
+        extra?: string
+    ): string {
+        return `${url}/?LAYERS=${layers}&FORMAT=${format}&SERVICE=WMS&VERSION=${version}&REQUEST=${request}&SRS=${srs}&BBOX=${bbox}&WIDTH=${width}&HEIGHT=${height}` + (extra ? `&${extra}` : "");
     }
 
-    static get_bbox_v1_1_1(extent) {
-        return (
-            extent.getWest() +
-            "," +
-            extent.getSouth() +
-            "," +
-            extent.getEast() +
-            "," +
-            extent.getNorth()
-        );
+    static get_bbox_v1_1_1(extent: Extent): string {
+        return `${extent.getWest()},${extent.getSouth()},${extent.getEast()},${extent.getNorth()}`;
     }
 
-    static get_bbox_v1_3_0(extent) {
-        return (
-            extent.getSouth() +
-            "," +
-            extent.getWest() +
-            "," +
-            extent.getNorth() +
-            "," +
-            extent.getEast()
-        );
+    static get_bbox_v1_3_0(extent: Extent): string {
+        return `${extent.getSouth()},${extent.getWest()},${extent.getNorth()},${extent.getEast()}`;
     }
 
-    _checkSegment(segment) {
+    public override _checkSegment(segment: Segment) {
         return true;
     }
 
-    get instanceName() {
+    public override get instanceName(): string {
         return "WMS";
     }
 
-    _createUrl(segment) {
+    protected override _createUrl(segment: Segment): string {
         return WMS.createRequestUrl(
             this.url,
             this.layers,
@@ -144,7 +151,7 @@ class WMS extends XYZ {
         );
     }
 
-    setVersion(version) {
+    public setVersion(version?: string) {
         if (version) {
             this._version = version;
         } else {
@@ -158,25 +165,30 @@ class WMS extends XYZ {
         }
     }
 
-    _correctFullExtent() {
-        var e = this._extent,
-            em = this._extentMerc;
-        var ENLARGE_MERCATOR_LON = mercator.POLE + 50000;
-        var ENLARGE_MERCATOR_LAT = mercator.POLE + 50000;
+    public override _correctFullExtent() {
+        const e = this._extent;
+        const em = this._extentMerc;
+
+        const ENLARGE_MERCATOR_LON = mercator.POLE + 50000;
+        const ENLARGE_MERCATOR_LAT = mercator.POLE + 50000;
+
         if (e.northEast.lat === 90.0) {
             em.northEast.lat = ENLARGE_MERCATOR_LAT;
         }
+
         if (e.northEast.lon === 180.0) {
             em.northEast.lon = ENLARGE_MERCATOR_LON;
         }
+
         if (e.southWest.lat === -90.0) {
             em.southWest.lat = -ENLARGE_MERCATOR_LAT;
         }
+
         if (e.southWest.lon === -180.0) {
             em.southWest.lon = -ENLARGE_MERCATOR_LON;
         }
     }
 }
 
-export { WMS };
+export {WMS};
 

package/src/{og/layer/XYZ.js → layer/XYZ.ts}

@@ -1,16 +1,34 @@
-"use strict";
+import * as mercator from "../mercator";
+import {Layer, ILayerParams, LayerEventsList} from "./Layer";
+import {RENDERING} from "../quadTree/quadTree";
+import {Segment} from "../segment/Segment";
+import {stringTemplate} from "../utils/shared";
+import {EventsHandler} from "../Events";
+import {Material} from "./Material";
+import {NumberArray4} from "../math/Vec4";
+import {IResponse} from "../utils/Loader";
+
+export interface IXYZParams extends ILayerParams {
+    url?: string;
+    subdomains?: string[];
+    minNativeZoom?: number;
+    maxNativeZoom?: number;
+    urlRewrite?: Function;
+}
+
+type XYZEventsList = [
+    "load",
+    "loadend"
+];
 
-import * as mercator from "../mercator.js";
-import { RENDERING } from "../quadTree/quadTree.js";
-import { stringTemplate } from "../utils/shared.js";
-import { Layer } from "./Layer.js";
+type XYZEventsType = EventsHandler<XYZEventsList> & EventsHandler<LayerEventsList>;
 
 /**
  * Represents an imagery tiles source provider.
  * @class
  * @extends {Layer}
  * @param {string} name - Layer name.
- * @param {Object} options:
+ * @param {IXYZParams} options:
  * @param {number} [options.opacity=1.0] - Layer opacity.
  * @param {Array.<string>} [options.subdomains=['a','b','c']] - Subdomains of the tile service.
  * @param {number} [options.minZoom=0] - Minimal visibility zoom level.
@@ -22,10 +40,11 @@ import { Layer } from "./Layer.js";
  * @param {boolean} [options.visibility=true] - Layer visibility.
  * @param {string} [options.crossOrigin=true] - If true, all tiles will have their crossOrigin attribute set to ''.
  * @param {string} options.url - Tile url source template(see example below).
- * @param {string} options.textureFilter - texture gl filter. NEAREST, LINEAR, MIPMAP, ANISOTROPHIC.
- * @param {layer.XYZ~_urlRewriteCallback} options.urlRewrite - Url rewrite function.
- * @fires og.layer.XYZ#load
- * @fires og.layer.XYZ#loadend
+ * @param {string} options.textureFilter - texture gl filter. NEAREST, LINEAR, MIPMAP, ANISOTROPIC.
+ * @param {Function} options.urlRewrite - Url rewrite function.
+ *
+ * @fires EventsHandler<XYZEventsList>#load
+ * @fires EventsHandler<XYZEventsList>#loadend
  *
  * @example <caption>Creates OpenStreetMap base tile layer</caption>
  * new og.layer.XYZ("OpenStreetMap", {
@@ -36,63 +55,78 @@ import { Layer } from "./Layer.js";
  * });
  */
 class XYZ extends Layer {
+
+    public override events: XYZEventsType;
+
     /**
-     * @param {string} name - Layer name.
-     * @param {*} options
+     * Tile url source template.
+     * @public
+     * @type {string}
+     */
+    public url: string;
+
+    /**
+     * @protected
+     */
+    protected _s: string[];
+
+    /**
+     * Minimal native zoom level when tiles are available.
+     * @public
+     * @type {number}
      */
-    constructor(name, options = {}) {
+    public minNativeZoom: number;
+
+    /**
+     * Maximal native zoom level when tiles are available.
+     * @public
+     * @type {number}
+     */
+    public maxNativeZoom: number;
+
+    /**
+     * Rewrites imagery tile url query.
+     * @private
+     * @callback og.layer.XYZ~_urlRewriteCallback
+     * @param {Segment} segment - Segment to load.
+     * @param {string} url - Created url.
+     * @returns {string} - Url query string.
+     */
+    protected _urlRewriteCallback: Function | null;
+
+    protected _requestsPeerSubdomains: number;
+
+    protected _requestCount: number;
+
+    constructor(name: string | null, options: IXYZParams = {}) {
         super(name, options);
 
-        this.events.registerNames(EVENT_NAMES);
+        //@ts-ignore
+        this.events = this.events.registerNames(XYZ_EVENTS);
 
-        /**
-         * Tile url source template.
-         * @public
-         * @type {string}
-         */
         this.url = options.url || "";
 
-        /**
-         * @protected
-         */
         this._s = options.subdomains || ["a", "b", "c"];
 
-        /**
-         * Minimal native zoom level when tiles are available.
-         * @public
-         * @type {number}
-         */
         this.minNativeZoom = options.minNativeZoom || 0;
 
-        /**
-         * Maximal native zoom level when tiles are available.
-         * @public
-         * @type {number}
-         */
         this.maxNativeZoom = options.maxNativeZoom || 19;
 
-        /**
-         * Rewrites imagery tile url query.
-         * @private
-         * @callback og.layer.XYZ~_urlRewriteCallback
-         * @param {Segment} segment - Segment to load.
-         * @param {string} url - Created url.
-         * @returns {string} - Url query string.
-         */
         this._urlRewriteCallback = options.urlRewrite || null;
 
-        this._requestsPeerSubdomian = 4;
+        this._requestsPeerSubdomains = 4;
+
         this._requestCount = 0;
     }
 
     /**
-     * @warning Use XYZ.isIdle in requesAnimationFrame(after setVisibility)
+     * @warning Use XYZ.isIdle in requestAnimationFrame(after setVisibility)
      */
-    get isIdle() {
-        return super.isIdle && this._planet._tileLoader.getRequestCounter(this) === 0;
+    public override get isIdle(): boolean {
+        return super.isIdle && this._planet!._tileLoader.getRequestCounter(this) === 0;
     }
 
-    get instanceName() {
+    public override get instanceName(): string {
         return "XYZ";
     }
 
@@ -100,7 +134,7 @@ class XYZ extends Layer {
      * Abort loading tiles.
      * @public
      */
-    abortLoading() {
+    public override abortLoading() {
         if (this._planet) {
             this._planet._tileLoader.abort(this);
         }
@@ -111,7 +145,7 @@ class XYZ extends Layer {
      * @public
      * @param {boolean} visibility - Layer visibility.
      */
-    setVisibility(visibility) {
+    public override setVisibility(visibility: boolean) {
         if (visibility !== this._visibility) {
             super.setVisibility(visibility);
             if (!visibility) {
@@ -120,9 +154,10 @@ class XYZ extends Layer {
         }
     }
 
-    remove() {
+    public override remove(): this {
         this.abortLoading();
         super.remove();
+        return this;
     }
 
     /**
@@ -131,14 +166,14 @@ class XYZ extends Layer {
      * @param {string} url - Url template.
      * @example
      * http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
-     * where {z}, {x} and {y} - replaces by current tile values, {s} - random domen.
+     * where {z}, {x} and {y} - replaces by current tile values, {s} - random domain.
      */
-    setUrl(url) {
+    public setUrl(url: string) {
         this.url = url;
     }
 
-    _checkSegment(segment) {
-        return segment._projection.id === this._planet.quadTreeStrategy.projection.id;// EPSG4326.id;// EPSG3857.id;
+    public _checkSegment(segment: Segment) {
+        return segment._projection.id === this._planet!.quadTreeStrategy.projection.id;// EPSG4326.id;// EPSG3857.id;
     }
 
     /**
@@ -146,8 +181,9 @@ class XYZ extends Layer {
      * @public
      * @virtual
      * @param {Material} material - Loads current material.
+     * @param {boolean} [forceLoading=false] -
      */
-    loadMaterial(material, forceLoading) {
+    public override loadMaterial(material: Material, forceLoading: boolean = false) {
 
         let seg = material.segment;
 
@@ -158,26 +194,24 @@ class XYZ extends Layer {
         }
 
         // Q: Maybe we should change "<2" to material.segment.tileZoom < (material.layer.minZoom + 1)
-        if (this._planet.layerLock.isFree() || material.segment.tileZoom < 2) {
+        if (this._planet!.layerLock.isFree() || material.segment.tileZoom < 2) {
             material.isReady = false;
             material.isLoading = true;
 
             if (this._checkSegment(seg)) {
                 material.loadingAttempts++;
 
-                this._planet._tileLoader.load(
-                    {
+                this._planet!._tileLoader.load({
                         sender: this,
                         src: this._getHTTPRequestString(material.segment),
                         type: "imageBitmap",
-                        filter: () =>
-                            (seg.initialized && seg.node.getState() === RENDERING) || forceLoading,
+                        filter: () => (seg.initialized && seg.node.getState() === RENDERING) || forceLoading,
                         options: {}
                     },
-                    (response) => {
+                    (response: IResponse) => {
                         if (response.status === "ready") {
                             if (material.isLoading) {
-                                let e = this.events.load;
+                                let e = this.events.load!;
                                 if (e.handlers.length) {
                                     this.events.dispatch(e, material);
                                 }
@@ -191,8 +225,8 @@ class XYZ extends Layer {
                                 material.textureNotExists();
                             }
                         }
-                    },
-                    this._id
+                    }
+                    //,this.__id
                 );
             } else {
                 material.textureNotExists();
@@ -205,9 +239,9 @@ class XYZ extends Layer {
      * @protected
      * @virtual
      * @param {Segment} segment - Creates specific url for current segment.
-     * @returns {String} - Returns url string.
+     * @returns {string} - Returns url string.
      */
-    _createUrl(segment) {
+    protected _createUrl(segment: Segment): string {
         return stringTemplate(this.url, {
             s: this._getSubdomain(),
             x: segment.tileX.toString(),
@@ -216,10 +250,9 @@ class XYZ extends Layer {
         });
     }
 
-    _getSubdomain() {
+    protected _getSubdomain(): string {
         this._requestCount++;
-        return this._s[Math.floor(this._requestCount % (this._requestsPeerSubdomian * this._s.length) / this._requestsPeerSubdomian)];
-
+        return this._s[Math.floor(this._requestCount % (this._requestsPeerSubdomains * this._s.length) / this._requestsPeerSubdomains)];
     }
 
     /**
@@ -228,22 +261,20 @@ class XYZ extends Layer {
      * @param {Segment} segment - Segment that loads image data.
      * @returns {string} - Url string.
      */
-    _getHTTPRequestString(segment) {
-        return this._urlRewriteCallback
-            ? this._urlRewriteCallback(segment, this.url)
-            : this._createUrl(segment);
+    protected _getHTTPRequestString(segment: Segment) {
+        return this._urlRewriteCallback ? this._urlRewriteCallback(segment, this.url) : this._createUrl(segment);
     }
 
     /**
-     * Sets url rewrite callback, used for custom url rewriting for every tile laoding.
+     * Sets url rewrite callback, used for custom url rewriting for every tile loading.
      * @public
-     * @param {layer.XYZ~_urlRewriteCallback} ur - The callback that returns tile custom created url.
+     * @param {Function} ur - The callback that returns tile custom created url.
      */
-    setUrlRewriteCallback(ur) {
+    public setUrlRewriteCallback(ur: Function) {
         this._urlRewriteCallback = ur;
     }
 
-    applyMaterial(material, forceLoading) {
+    public override applyMaterial(material: Material, forceLoading: boolean = false): NumberArray4 {
         if (material.isReady) {
             return material.texOffset;
         } else if (material.segment.tileZoom < this.minNativeZoom) {
@@ -254,7 +285,7 @@ class XYZ extends Layer {
                 pn = segment.node,
                 notEmpty = false;
 
-            let mId = this._id;
+            let mId = this.__id;
             let psegm = material;
             while (pn.parentNode) {
                 pn = pn.parentNode;
@@ -266,21 +297,21 @@ class XYZ extends Layer {
             }
 
             if (segment.passReady) {
-                let maxNativeZoom = material.layer.maxNativeZoom;
+                let maxNativeZoom = (material.layer as XYZ).maxNativeZoom;
                 if (pn.segment.tileZoom === maxNativeZoom) {
                     material.textureNotExists();
                 } else if (material.segment.tileZoom <= maxNativeZoom) {
                     !material.isLoading && !material.isReady && this.loadMaterial(material, forceLoading);
                 } else {
                     let pn = segment.node;
-                    while (pn.segment.tileZoom > material.layer.maxNativeZoom) {
-                        pn = pn.parentNode;
+                    while (pn.segment.tileZoom > (material.layer as XYZ).maxNativeZoom) {
+                        pn = pn.parentNode!;
                     }
-                    let pnm = pn.segment.materials[material.layer._id];
+                    let pnm = pn.segment.materials[material.layer.__id];
                     if (pnm) {
                         !pnm.isLoading && !pnm.isReady && this.loadMaterial(pnm, true);
                     } else {
-                        pnm = pn.segment.materials[material.layer._id] = material.layer.createMaterial(
+                        pnm = pn.segment.materials[material.layer.__id] = material.layer.createMaterial(
                             pn.segment
                         );
                         this.loadMaterial(pnm, true);
@@ -309,16 +340,10 @@ class XYZ extends Layer {
         return material.texOffset;
     }
 
-    clearMaterial(material) {
+    public override clearMaterial(material: Material) {
         if (material.isReady && material.textureExists) {
-            !material.texture.default &&
-            material.segment.handler.gl.deleteTexture(material.texture);
+            !material.texture!.default && material.segment.handler.gl!.deleteTexture(material.texture!);
             material.texture = null;
-
-            if (material.image) {
-                material.image.src = "";
-                material.image = null;
-            }
         }
 
         material.isReady = false;
@@ -329,11 +354,11 @@ class XYZ extends Layer {
     /**
      * @protected
      */
-    _correctFullExtent() {
-        var e = this._extent,
+    protected override _correctFullExtent() {
+        let e = this._extent,
             em = this._extentMerc;
-        var ENLARGE_MERCATOR_LON = mercator.POLE + 50000;
-        var ENLARGE_MERCATOR_LAT = mercator.POLE + 50000;
+        let ENLARGE_MERCATOR_LON = mercator.POLE + 50000;
+        let ENLARGE_MERCATOR_LAT = mercator.POLE + 50000;
         if (e.northEast.lat === 90.0) {
             em.northEast.lat = ENLARGE_MERCATOR_LAT;
         }
@@ -357,18 +382,18 @@ class XYZ extends Layer {
     }
 }
 
-const EVENT_NAMES = [
+const XYZ_EVENTS: XYZEventsList = [
     /**
-     * Triggered when current tile image has loaded before rendereing.
-     * @event og.layer.XYZ#load
+     * Triggered when current tile image has loaded before rendering.
+     * @event #load
      */
     "load",
 
     /**
      * Triggered when all tiles have loaded or loading has stopped.
-     * @event og.layer.XYZ#loadend
+     * @event #loadend
      */
     "loadend"
 ];
 
-export { XYZ };
+export {XYZ};

package/src/layer/index.ts

@@ -0,0 +1,12 @@
+import {CanvasTiles} from './CanvasTiles';
+import {GeoImage} from './GeoImage';
+import {GeoTexture2d} from './GeoTexture2d';
+import {GeoVideo} from './GeoVideo';
+import {KML} from './KML';
+import {Layer} from './Layer';
+import {Vector} from './Vector';
+import {WMS} from './WMS';
+import {XYZ} from './XYZ';
+import {Material} from './Material';
+
+export {CanvasTiles, GeoImage, GeoTexture2d, GeoVideo, KML, Layer, Vector, WMS, XYZ, Material};