@artstesh/maps 5.2.5 → 5.2.6

package/dist/fesm2022/maps-components.mjs

@@ -3,6 +3,7 @@ import { Component, Injectable, ChangeDetectionStrategy, Input, ViewChild, NgMod
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { Feature, Collection } from 'ol';
+export { Feature } from 'ol';
 import { Point, LineString } from 'ol/geom';
 import { GeoJSON, WKT } from 'ol/format';
 import { getCenter, createEmpty, extend } from 'ol/extent';
@@ -24,6 +25,7 @@ import { bbox } from 'ol/loadingstrategy';
 import Cluster from 'ol/source/Cluster';
 import Static from 'ol/source/ImageStatic';
 import ImageLayer from 'ol/layer/Image';
+import RasterSource from 'ol/source/Raster';
 import Map from 'ol/Map';
 import View from 'ol/View';
 import Overlay from 'ol/Overlay';
@@ -944,6 +946,24 @@ class RemoveImageLayerCommand extends PostboyGenericMessage {
     }
 }
 
+class AddRasterTileCommand extends PostboyGenericMessage {
+    layer;
+    static ID = 'd33447fe-eec0-4205-9b5d-0d79ddc74ad7';
+    constructor(layer) {
+        super();
+        this.layer = layer;
+    }
+}
+
+class RemoveRasterTileCommand extends PostboyGenericMessage {
+    layer;
+    static ID = 'd1c4bf6a-e2f2-4385-a7a2-cecb525f8939';
+    constructor(layer) {
+        super();
+        this.layer = layer;
+    }
+}
+
 class MapPostboyService extends PostboyService {
     constructor() {
         super();
@@ -968,19 +988,11 @@ class MapManagementService {
         this.observeRemoveLayer();
         this.observePlaceFeatures();
         this.observeAddTile();
-        this.observeRemoveTile();
         this.observeLayerQuery();
         this.observeFeaturesInArea();
         this.observeFeaturesInPoint();
         this.observeImageLayer();
     }
-    observeRemoveTile() {
-        this.postboy.sub(RemoveTileCommand).subscribe((c) => {
-            if (!this.map)
-                return;
-            this.map.removeLayer(c.layer);
-        });
-    }
     observeLayerQuery() {
         this.postboy.sub(GetLayerQuery).subscribe((ev) => ev.finish(this.layers.take(ev.name)));
     }
@@ -990,6 +1002,21 @@ class MapManagementService {
                 return;
             this.map.addLayer(c.layer);
         });
+        this.postboy.sub(RemoveTileCommand).subscribe((c) => {
+            if (!this.map)
+                return;
+            this.map.removeLayer(c.layer);
+        });
+        this.postboy.sub(AddRasterTileCommand).subscribe((c) => {
+            if (!this.map)
+                return;
+            this.map.addLayer(c.layer);
+        });
+        this.postboy.sub(RemoveRasterTileCommand).subscribe((c) => {
+            if (!this.map)
+                return;
+            this.map.removeLayer(c.layer);
+        });
     }
     observeImageLayer() {
         this.postboy.sub(AddImageLayerCommand).subscribe((c) => {
@@ -1452,6 +1479,8 @@ class MessageRegistratorService extends PostboyAbstractRegistrator {
         this.recordSubject(AddLayerCommand);
         this.recordSubject(RemoveLayerCommand);
         this.recordSubject(AddTileCommand);
+        this.recordSubject(AddRasterTileCommand);
+        this.recordSubject(RemoveRasterTileCommand);
         this.recordSubject(RemoveImageLayerCommand);
         this.recordSubject(AddImageLayerCommand);
         this.recordSubject(RemoveTileCommand);
@@ -2463,6 +2492,265 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
+class RasterTileLayerSettings {
+    /**
+     * The maximum zoom level for a map view.
+     *
+     * @type {number}
+     * @default 19
+     */
+    maxZoom = 19;
+    /**
+     * The minimum zoom level allowed.
+     *
+     * @type {number}
+     */
+    minZoom = 0;
+    /**
+     * The opacity of an element.
+     *
+     * @type {number}
+     * @default 0.6
+     */
+    opacity = 0.6;
+    /**
+     * Represents the tiles URL.
+     * @typedef {string} url
+     *
+     * @example
+     * 'https://example.ex/{z}/{x}/{y}.png'
+     */
+    url = '';
+    /**
+     * The projection of the coordinate system.
+     *
+     * @type {string}
+     * @default 'EPSG:3857'
+     */
+    projection = 'EPSG:3857';
+    /**
+     * Additional headers that should be added to each tile request
+     *
+     * @type {Record<string, string>}
+     * @default An empty array
+     */
+    requestHeaders = null;
+    operation = (d) => d[0] ?? [];
+    /**
+     * Creates a copy of the given tile layer settings.
+     *
+     * @param {RasterTileLayerSettings} model - The tile layer settings to be copied.
+     * @return {RasterTileLayerSettings} - A new instance of RasterTileLayerSettings with the same properties as the model.
+     */
+    static copy(model) {
+        const result = new RasterTileLayerSettings();
+        result.maxZoom = model.maxZoom;
+        result.minZoom = model.minZoom;
+        result.projection = model.projection;
+        result.opacity = model.opacity;
+        result.url = model.url;
+        result.requestHeaders = model.requestHeaders;
+        result.operation = model.operation;
+        return result;
+    }
+    /**
+     * Sets the URL of the RasterTileLayerSettings object.
+     *
+     * @param {string} url - The URL to be set.
+     * @return {RasterTileLayerSettings} - The updated RasterTileLayerSettings object.
+     */
+    setUrl(url) {
+        return RasterTileLayerSettings.copy({ ...this, url });
+    }
+    /**
+     * Sets the operation to apply on raster tile data.
+     *
+     * @param {function} operation - A function that takes an input of either a two-dimensional array of numbers or an array of ImageData objects and returns either a one-dimensional array of numbers or an ImageData object.
+     * @return {RasterTileLayerSettings} A new instance of RasterTileLayerSettings with the updated operation.
+     */
+    setOperation(operation) {
+        return RasterTileLayerSettings.copy({ ...this, operation });
+    }
+    /**
+     * Sets the requestHeaders of the RasterTileLayerSettings object.
+     *
+     * @param {Record<string, string>} requestHeaders - The headers which should be provided.
+     * @return {RasterTileLayerSettings} - The updated RasterTileLayerSettings object.
+     */
+    setRequestHeaders(requestHeaders) {
+        return RasterTileLayerSettings.copy({ ...this, requestHeaders });
+    }
+    /**
+     * Sets the maximum zoom level for the tile layer.
+     *
+     * @param {number} maxZoom - The maximum zoom level.
+     * @returns {RasterTileLayerSettings} - The updated tile layer settings object.
+     */
+    setMaxZoom(maxZoom) {
+        return RasterTileLayerSettings.copy({ ...this, maxZoom });
+    }
+    /**
+     * Sets the minimum zoom level for the Tile Layer.
+     *
+     * @param {number} minZoom - The minimum zoom level to be set.
+     * @return {RasterTileLayerSettings} The modified RasterTileLayerSettings object with the updated minimum zoom level.
+     */
+    setMinZoom(minZoom) {
+        return RasterTileLayerSettings.copy({ ...this, minZoom });
+    }
+    /**
+     * Sets the opacity of the RasterTileLayerSettings.
+     *
+     * @param {number} opacity - The opacity value to set. Must be a number between 0 and 1.
+     * @return {RasterTileLayerSettings} - A new instance of RasterTileLayerSettings with the opacity set.
+     */
+    setOpacity(opacity) {
+        return RasterTileLayerSettings.copy({ ...this, opacity });
+    }
+    /**
+     * Sets the projection for the tile layer settings.
+     *
+     * @param {string} projection - The desired projection for the tile layer settings.
+     * @return {RasterTileLayerSettings} - The updated tile layer settings with the new projection.
+     */
+    setProjection(projection) {
+        return RasterTileLayerSettings.copy({ ...this, projection });
+    }
+    /**
+     * Checks if the current instance of RasterTileLayerSettings is equal to the given model.
+     * @param {RasterTileLayerSettings} model - The model to compare against.
+     * @return {boolean} - True if all properties of the current instance matches the properties of the model;
+     *                    otherwise, false.
+     */
+    isSame(model) {
+        if (this.maxZoom !== model.maxZoom)
+            return false;
+        if (this.minZoom !== model.minZoom)
+            return false;
+        if (this.url !== model.url)
+            return false;
+        if (this.projection !== model.projection)
+            return false;
+        if (this.opacity !== model.opacity)
+            return false;
+        if (this.requestHeaders !== model.requestHeaders)
+            return false;
+        if (this.operation !== model.operation)
+            return false;
+        return true;
+    }
+}
+
+class RasterTileLayerFactory {
+    build(settings) {
+        const source = new XYZ({
+            tileSize: 256,
+            maxZoom: settings.maxZoom || 14,
+            minZoom: settings.minZoom || 1,
+            projection: get(settings.projection),
+            tileUrlFunction: this.getTileFunc(settings),
+            crossOrigin: 'Anonymous',
+            tileLoadFunction: !!settings.requestHeaders
+                ? (tile, src) => this.tileLoader(tile, src, settings.requestHeaders)
+                : undefined,
+        });
+        const raster = new RasterSource({
+            sources: [source],
+            operationType: 'image',
+            operation: settings.operation,
+        });
+        return new ImageLayer({ source: raster, opacity: settings.opacity });
+    }
+    getTileFunc(settings) {
+        return (tileCoord) => {
+            const zoom = tileCoord[0];
+            const x = tileCoord[1];
+            const y = tileCoord[2];
+            const normalizedCoord = this.getNormalizedCoord({ x: x, y: y }, zoom);
+            const bound = 1 << zoom;
+            return settings.url
+                .replace('{x}', String(normalizedCoord?.x || x))
+                .replace('{z}', String(zoom))
+                .replace('{y}', String(bound - (normalizedCoord?.y || y) - 1));
+        };
+    }
+    tileLoader(tile, src, headers) {
+        const client = new XMLHttpRequest();
+        client.open('GET', src);
+        client.responseType = 'arraybuffer';
+        Object.keys(headers).forEach((k) => client.setRequestHeader(k, headers[k]));
+        client.onload = function () {
+            if (this.response !== undefined) {
+                const arrayBufferView = new Uint8Array(this.response);
+                const blob = new Blob([arrayBufferView], { type: 'image/png' });
+                const urlCreator = window.URL || window.webkitURL;
+                tile.getImage().src = urlCreator.createObjectURL(blob);
+            }
+        };
+        client.send();
+    }
+    getNormalizedCoord(coord, zoom) {
+        const y = coord.y;
+        let x = coord.x;
+        const tileRange = 1 << zoom;
+        if (y < 0 || y >= tileRange)
+            return null;
+        if (x < 0 || x >= tileRange)
+            x = ((x % tileRange) + tileRange) % tileRange;
+        return { x: x, y: y };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RasterTileLayerFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RasterTileLayerFactory, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RasterTileLayerFactory, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class RasterTileLayerComponent extends DestructibleComponent {
+    postboy;
+    factory;
+    layer;
+    constructor(postboy, factory) {
+        super();
+        this.postboy = postboy;
+        this.factory = factory;
+    }
+    _settings = new RasterTileLayerSettings();
+    set settings(value) {
+        if (!value || this._settings.isSame(value))
+            return;
+        this._settings = value;
+        this.initLayer();
+    }
+    ngOnInit() {
+        this.postboy
+            .sub(MapRenderedEvent)
+            .pipe(filter((m) => !!m), first())
+            .subscribe((m) => this.initLayer());
+    }
+    onDestroy = () => this.removeLayer();
+    initLayer() {
+        this.removeLayer();
+        this.layer = this.factory.build(this._settings);
+        this.postboy.fire(new AddRasterTileCommand(this.layer));
+    }
+    removeLayer() {
+        if (this.layer)
+            this.postboy.fire(new RemoveRasterTileCommand(this.layer));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RasterTileLayerComponent, deps: [{ token: MapPostboyService }, { token: RasterTileLayerFactory }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RasterTileLayerComponent, selector: "art-raster-tile-layer", inputs: { settings: "settings" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RasterTileLayerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'art-raster-tile-layer', template: '', changeDetection: ChangeDetectionStrategy.OnPush }]
+        }], ctorParameters: function () { return [{ type: MapPostboyService }, { type: RasterTileLayerFactory }]; }, propDecorators: { settings: [{
+                type: Input
+            }] } });
+
 class MapPlateFactory {
     build(settings) {
         return new Map({
@@ -2952,7 +3240,8 @@ class MapModule {
             PolygonsComponent,
             ClusterLayerComponent,
             MapControlZoomComponent,
-            ImageLayerComponent], imports: [CommonModule], exports: [MapPlateComponent,
+            ImageLayerComponent,
+            RasterTileLayerComponent], imports: [CommonModule], exports: [MapPlateComponent,
             FeatureLayerComponent,
             MarkersComponent,
             TileLayerComponent,
@@ -2960,7 +3249,8 @@ class MapModule {
             PolygonsComponent,
             ClusterLayerComponent,
             MapControlZoomComponent,
-            ImageLayerComponent] });
+            ImageLayerComponent,
+            RasterTileLayerComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MapModule, imports: [CommonModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MapModule, decorators: [{
@@ -2979,6 +3269,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         ClusterLayerComponent,
                         MapControlZoomComponent,
                         ImageLayerComponent,
+                        RasterTileLayerComponent,
                     ],
                     exports: [
                         MapPlateComponent,
@@ -2990,6 +3281,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         ClusterLayerComponent,
                         MapControlZoomComponent,
                         ImageLayerComponent,
+                        RasterTileLayerComponent,
                     ],
                 }]
         }] });
@@ -3190,5 +3482,5 @@ class StringifyFeatureHelper {
  * Generated bundle index. Do not edit.
  */
 
-export { AddControlCommand, CalculateAreaExecutor, CancelDrawingCommand, CancelFeatureModificationCommand, CloseTooltipCommand, ClusterLayerComponent, ClusterLayerSettings, DrawSelectionAreaCommand, DrawingType, FeatureLayerComponent, FeatureLayerSettings, FeatureOutputFormat, FilterFeaturesInAreaExecutor, FilterFeaturesInPointExecutor, FitToFeaturesCommand, FitToPolygonsCommand, GetFeaturesInAreaQuery, GetFeaturesInPointQuery, GetMapPositionExecutor, ImageLayerComponent, ImageLayerSettings, MapClickEvent, MapConstants, MapControl, MapControlZoomComponent, MapFeatureHoveredEvent, MapLyrs, MapLyrsLabel, MapModule, MapMoveEndEvent, MapPlateComponent, MapPointerMoveEvent, MapPostboyService, MapRenderedEvent, MapSettings, MarkerModel, MarkerStyleHelper, MarkersComponent, MessageRegistratorService, ModifyFeatureCommand, OsmTileLayerComponent, PolygonModel, PolygonSelfIntersectionExecutor, PolygonStyleHelper, PolygonsComponent, RemoveControlCommand, SetMapCenterCommand, StartDrawingCommand, StringifyFeatureHelper, TextStyleHelper, TileLayerComponent, TileLayerSettings, TooltipComponent, TooltipSettings, ZoomControlSettings };
+export { AddControlCommand, CalculateAreaExecutor, CancelDrawingCommand, CancelFeatureModificationCommand, CloseTooltipCommand, ClusterLayerComponent, ClusterLayerSettings, DrawSelectionAreaCommand, DrawingType, FeatureLayerComponent, FeatureLayerSettings, FeatureOutputFormat, FilterFeaturesInAreaExecutor, FilterFeaturesInPointExecutor, FitToFeaturesCommand, FitToPolygonsCommand, GetFeaturesInAreaQuery, GetFeaturesInPointQuery, GetMapPositionExecutor, ImageLayerComponent, ImageLayerSettings, MapClickEvent, MapConstants, MapControl, MapControlZoomComponent, MapFeatureHoveredEvent, MapLyrs, MapLyrsLabel, MapModule, MapMoveEndEvent, MapPlateComponent, MapPointerMoveEvent, MapPostboyService, MapRenderedEvent, MapSettings, MarkerModel, MarkerStyleHelper, MarkersComponent, MessageRegistratorService, ModifyFeatureCommand, OsmTileLayerComponent, PolygonModel, PolygonSelfIntersectionExecutor, PolygonStyleHelper, PolygonsComponent, RasterTileLayerComponent, RasterTileLayerSettings, RemoveControlCommand, SetMapCenterCommand, StartDrawingCommand, StringifyFeatureHelper, TextStyleHelper, TileLayerComponent, TileLayerSettings, TooltipComponent, TooltipSettings, ZoomControlSettings };
 //# sourceMappingURL=maps-components.mjs.map