@artstesh/maps 6.1.5 → 6.1.6

package/dist/fesm2022/maps-components.mjs

@@ -22,6 +22,8 @@ import OSM from 'ol/source/OSM';
 import { Vector as Vector$1 } from 'ol/layer';
 import { bbox } from 'ol/loadingstrategy';
 import Cluster from 'ol/source/Cluster';
+import Static from 'ol/source/ImageStatic';
+import ImageLayer from 'ol/layer/Image';
 import Map from 'ol/Map';
 import View from 'ol/View';
 import Overlay from 'ol/Overlay';
@@ -924,6 +926,24 @@ class ZoomControlFactory {
     }
 }
 
+class AddImageLayerCommand extends PostboyGenericMessage {
+    layer;
+    static ID = '70f9b86f-8bc2-4f28-ae79-a13fc0b1ee5d';
+    constructor(layer) {
+        super();
+        this.layer = layer;
+    }
+}
+
+class RemoveImageLayerCommand extends PostboyGenericMessage {
+    layer;
+    static ID = 'c8e7efdb-17ff-4cf9-89be-e688b8de3b95';
+    constructor(layer) {
+        super();
+        this.layer = layer;
+    }
+}
+
 class MapPostboyService extends PostboyService {
     constructor() {
         super();
@@ -952,6 +972,7 @@ class MapManagementService {
         this.observeLayerQuery();
         this.observeFeaturesInArea();
         this.observeFeaturesInPoint();
+        this.observeImageLayer();
     }
     observeRemoveTile() {
         this.postboy.sub(RemoveTileCommand).subscribe((c) => {
@@ -970,6 +991,18 @@ class MapManagementService {
             this.map.addLayer(c.layer);
         });
     }
+    observeImageLayer() {
+        this.postboy.sub(AddImageLayerCommand).subscribe((c) => {
+            if (!this.map)
+                return;
+            this.map.addLayer(c.layer);
+        });
+        this.postboy.sub(RemoveImageLayerCommand).subscribe((c) => {
+            if (!this.map)
+                return;
+            this.map.removeLayer(c.layer);
+        });
+    }
     observeMapRender() {
         this.postboy.sub(MapRenderedEvent).subscribe((m) => {
             this.map = m.map;
@@ -1419,6 +1452,8 @@ class MessageRegistratorService extends PostboyAbstractRegistrator {
         this.recordSubject(AddLayerCommand);
         this.recordSubject(RemoveLayerCommand);
         this.recordSubject(AddTileCommand);
+        this.recordSubject(RemoveImageLayerCommand);
+        this.recordSubject(AddImageLayerCommand);
         this.recordSubject(RemoveTileCommand);
         this.recordSubject(MapClickEvent);
         this.recordSubject(CloseTooltipCommand);
@@ -2231,6 +2266,203 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
                 type: Input
             }] } });
 
+class ImageLayerSettings {
+    /**
+     * Represents the tiles URL.
+     * @typedef {string} url
+     *
+     * @example
+     * 'https://example.ex/{z}/{x}/{y}.png'
+     */
+    url = '';
+    /**
+     * Use interpolated values when resampling.
+     * By default, linear interpolation is used when resampling.
+     * Set to false to use the nearest neighbor instead.
+     */
+    interpolate = undefined;
+    /**
+     * The projection of the coordinate system.
+     *
+     * @type {string}
+     * @default 'EPSG:3857'
+     */
+    projection = 'EPSG:3857';
+    extent = [0, 0, 0, 0];
+    /**
+     * Additional headers that should be added to each tile request
+     *
+     * @type {Record<string, string>}
+     * @default An empty array
+     */
+    requestHeaders = null;
+    /**
+     * Creates a copy of the given tile layer settings.
+     *
+     * @param {ImageLayerSettings} model - The tile layer settings to be copied.
+     * @return {ImageLayerSettings} - A new instance of ImageLayerSettings with the same properties as the model.
+     */
+    static copy(model) {
+        const result = new ImageLayerSettings();
+        result.interpolate = model.interpolate;
+        result.projection = model.projection;
+        result.extent = model.extent;
+        result.url = model.url;
+        result.requestHeaders = model.requestHeaders;
+        return result;
+    }
+    /**
+     * Sets the URL of the ImageLayerSettings object.
+     *
+     * @param {string} url - The URL to be set.
+     * @return {ImageLayerSettings} - The updated ImageLayerSettings object.
+     */
+    setUrl(url) {
+        return ImageLayerSettings.copy({ ...this, url });
+    }
+    /**
+     * Sets the interpolation state for the image layer settings.
+     *
+     * @param {boolean} [interpolate] - Use interpolated values when resampling.
+     * By default, linear interpolation is used when resampling.
+     * Set to false to use the nearest neighbor instead.
+     * @return {ImageLayerSettings} A new instance of ImageLayerSettings with the updated interpolation setting.
+     */
+    setInterpolate(interpolate) {
+        return ImageLayerSettings.copy({ ...this, interpolate });
+    }
+    setExtent(extent) {
+        return ImageLayerSettings.copy({ ...this, extent });
+    }
+    /**
+     * Sets the requestHeaders of the ImageLayerSettings object.
+     *
+     * @param {Record<string, string>} requestHeaders - The headers which should be provided.
+     * @return {ImageLayerSettings} - The updated ImageLayerSettings object.
+     */
+    setRequestHeaders(requestHeaders) {
+        return ImageLayerSettings.copy({ ...this, requestHeaders });
+    }
+    /**
+     * Sets the maximum zoom level for the tile layer.
+     *
+     * @param {number} maxZoom - The maximum zoom level.
+     * @returns {ImageLayerSettings} - The updated tile layer settings object.
+     */
+    setMaxZoom(maxZoom) {
+        return ImageLayerSettings.copy({ ...this, maxZoom });
+    }
+    /**
+     * Sets the minimum zoom level for the Tile Layer.
+     *
+     * @param {number} minZoom - The minimum zoom level to be set.
+     * @return {ImageLayerSettings} The modified ImageLayerSettings object with the updated minimum zoom level.
+     */
+    setMinZoom(minZoom) {
+        return ImageLayerSettings.copy({ ...this, minZoom });
+    }
+    /**
+     * Sets the opacity of the ImageLayerSettings.
+     *
+     * @param {number} opacity - The opacity value to set. Must be a number between 0 and 1.
+     * @return {ImageLayerSettings} - A new instance of ImageLayerSettings with the opacity set.
+     */
+    setOpacity(opacity) {
+        return ImageLayerSettings.copy({ ...this, opacity });
+    }
+    /**
+     * Sets the projection for the tile layer settings.
+     *
+     * @param {string} projection - The desired projection for the tile layer settings.
+     * @return {ImageLayerSettings} - The updated tile layer settings with the new projection.
+     */
+    setProjection(projection) {
+        return ImageLayerSettings.copy({ ...this, projection });
+    }
+    /**
+     * Checks if the current instance of ImageLayerSettings is equal to the given model.
+     * @param {ImageLayerSettings} 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.url !== model.url)
+            return false;
+        if (this.projection !== model.projection)
+            return false;
+        if (this.extent !== model.extent)
+            return false;
+        if (this.interpolate !== model.interpolate)
+            return false;
+        if (this.requestHeaders !== model.requestHeaders)
+            return false;
+        return true;
+    }
+}
+
+class ImageLayerFactory {
+    build(settings) {
+        const source = new Static({
+            url: settings.url,
+            interpolate: settings.interpolate,
+            crossOrigin: 'Anonymous',
+            projection: get(settings.projection),
+            imageExtent: settings.extent,
+        });
+        return new ImageLayer({ source });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: ImageLayerFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: ImageLayerFactory, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: ImageLayerFactory, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class ImageLayerComponent extends DestructibleComponent {
+    postboy;
+    factory;
+    layer;
+    constructor(postboy, factory) {
+        super();
+        this.postboy = postboy;
+        this.factory = factory;
+    }
+    _settings = new ImageLayerSettings();
+    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 AddImageLayerCommand(this.layer));
+    }
+    removeLayer() {
+        if (this.layer)
+            this.postboy.fire(new RemoveImageLayerCommand(this.layer));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: ImageLayerComponent, deps: [{ token: MapPostboyService }, { token: ImageLayerFactory }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: ImageLayerComponent, selector: "art-image-layer", inputs: { settings: "settings" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: ImageLayerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'art-image-layer', template: '', changeDetection: ChangeDetectionStrategy.OnPush }]
+        }], ctorParameters: () => [{ type: MapPostboyService }, { type: ImageLayerFactory }], propDecorators: { settings: [{
+                type: Input
+            }] } });
+
 class MapPlateFactory {
     build(settings) {
         return new Map({
@@ -2719,14 +2951,16 @@ class MapModule {
             TooltipComponent,
             PolygonsComponent,
             ClusterLayerComponent,
-            MapControlZoomComponent], imports: [CommonModule], exports: [MapPlateComponent,
+            MapControlZoomComponent,
+            ImageLayerComponent], imports: [CommonModule], exports: [MapPlateComponent,
             FeatureLayerComponent,
             MarkersComponent,
             TileLayerComponent,
             TooltipComponent,
             PolygonsComponent,
             ClusterLayerComponent,
-            MapControlZoomComponent] });
+            MapControlZoomComponent,
+            ImageLayerComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: MapModule, imports: [CommonModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: MapModule, decorators: [{
@@ -2744,6 +2978,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
                         PolygonsComponent,
                         ClusterLayerComponent,
                         MapControlZoomComponent,
+                        ImageLayerComponent,
                     ],
                     exports: [
                         MapPlateComponent,
@@ -2754,6 +2989,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
                         PolygonsComponent,
                         ClusterLayerComponent,
                         MapControlZoomComponent,
+                        ImageLayerComponent,
                     ],
                 }]
         }] });
@@ -2954,5 +3190,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, 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, RemoveControlCommand, SetMapCenterCommand, StartDrawingCommand, StringifyFeatureHelper, TextStyleHelper, TileLayerComponent, TileLayerSettings, TooltipComponent, TooltipSettings, ZoomControlSettings };
 //# sourceMappingURL=maps-components.mjs.map