@artstesh/maps 9.0.4 → 9.1.0-alpha.0

package/dist/fesm2022/maps-components.mjs

@@ -7,7 +7,7 @@ import { getCenter, createEmpty, extend } from 'ol/extent';
 import Polygon, { circular, fromExtent } from 'ol/geom/Polygon';
 import { Control, Zoom } from 'ol/control';
 import * as i0 from '@angular/core';
-import { Component, Injectable, Input, ChangeDetectionStrategy, input, ViewEncapsulation, ViewChild } from '@angular/core';
+import { Component, Injectable, Input, ChangeDetectionStrategy, input, signal, ViewEncapsulation, ViewChild } from '@angular/core';
 import { get, useGeographic, transform } from 'ol/proj';
 import { PostboyGenericMessage, PostboyCallbackMessage, PostboyExecutor, PostboyService, LockMessage, UnlockMessage, PostboyAbstractRegistrator } from '@artstesh/postboy';
 import * as Sphere from 'ol/sphere';
@@ -17,7 +17,7 @@ import { createRegularPolygon, createBox } from 'ol/interaction/Draw';
 import { Subject, combineLatest } from 'rxjs';
 import { first, debounceTime, filter, auditTime } from 'rxjs/operators';
 import { Dictionary } from '@artstesh/collections';
-import { Vector, XYZ } from 'ol/source';
+import { Vector, XYZ, GeoTIFF } from 'ol/source';
 import TileLayer from 'ol/layer/Tile';
 import OSM from 'ol/source/OSM';
 import { Vector as Vector$1 } from 'ol/layer';
@@ -26,6 +26,7 @@ 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 TileLayer$1 from 'ol/layer/WebGLTile';
 import { NgIf, NgTemplateOutlet } from '@angular/common';
 import Map from 'ol/Map';
 import View from 'ol/View';
@@ -997,6 +998,24 @@ class RemoveRasterTileCommand extends PostboyGenericMessage {
     }
 }
 
+class AddGeotiffTileCommand extends PostboyGenericMessage {
+    layer;
+    static ID = '80e1b7be-09cd-43de-b11c-e0699a91b287';
+    constructor(layer) {
+        super();
+        this.layer = layer;
+    }
+}
+
+class RemoveGeotiffTileCommand extends PostboyGenericMessage {
+    layer;
+    static ID = '5545a521-62c4-4b25-a555-ee264258799b';
+    constructor(layer) {
+        super();
+        this.layer = layer;
+    }
+}
+
 class MapPostboyService extends PostboyService {
     constructor() {
         super();
@@ -1050,6 +1069,16 @@ class MapManagementService {
                 return;
             this.map.removeLayer(c.layer);
         });
+        this.postboy.sub(AddGeotiffTileCommand).subscribe((c) => {
+            if (!this.map)
+                return;
+            this.map.addLayer(c.layer);
+        });
+        this.postboy.sub(RemoveGeotiffTileCommand).subscribe((c) => {
+            if (!this.map)
+                return;
+            this.map.removeLayer(c.layer);
+        });
     }
     observeImageLayer() {
         this.postboy.sub(AddImageLayerCommand).subscribe((c) => {
@@ -1513,6 +1542,8 @@ class MessageRegistratorService extends PostboyAbstractRegistrator {
         this.recordSubject(AddLayerCommand);
         this.recordSubject(RemoveLayerCommand);
         this.recordSubject(AddTileCommand);
+        this.recordSubject(AddGeotiffTileCommand);
+        this.recordSubject(RemoveGeotiffTileCommand);
         this.recordSubject(AddRasterTileCommand);
         this.recordSubject(RemoveRasterTileCommand);
         this.recordSubject(RemoveImageLayerCommand);
@@ -2812,6 +2843,209 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 type: Input
             }] } });
 
+class GeotiffTileLayerSettings {
+    /**
+     * The maximum source data value. Rendered values are scaled from 0 to 1 based on the configured min and max.
+     *
+     * @type {number | undefined}
+     * @default undefined
+     */
+    max = undefined;
+    /**
+     * The minimum source data value. Rendered values are scaled from 0 to 1 based on the configured min and max.
+     *
+     * @type {number | undefined}
+     * @default undefined
+     */
+    min = undefined;
+    /**
+     * Represents the URL of the tif.
+     * @typedef {string} url
+     *
+     * @example
+     * 'https://example.ex/geotiff.tif'
+     */
+    url = '';
+    /**
+     * Style to apply to the layer.
+     *
+     * @type {Style | undefined}
+     */
+    style;
+    /**
+     * The opacity of an element.
+     *
+     * @type {number}
+     * @default 0.6
+     */
+    opacity = 0.6;
+    /**
+     * The priority of showing - layers with higher zIndex cover others in case of collisions
+     */
+    zIndex = 1;
+    /**
+     * Creates a copy of the given tile layer settings.
+     *
+     * @param {GeotiffTileLayerSettings} model - The tile layer settings to be copied.
+     * @return {GeotiffTileLayerSettings} - A new instance of GeotiffTileLayerSettings with the same properties as the model.
+     */
+    static copy(model) {
+        const result = new GeotiffTileLayerSettings();
+        result.max = model.max;
+        result.min = model.min;
+        result.zIndex = model.zIndex;
+        result.style = model.style;
+        result.opacity = model.opacity;
+        result.url = model.url;
+        return result;
+    }
+    /**
+     * Sets the URL of the GeotiffTileLayerSettings object.
+     *
+     * @param {string} url - The URL to be set.
+     * @return {GeotiffTileLayerSettings} - The updated GeotiffTileLayerSettings object.
+     */
+    setUrl(url) {
+        return GeotiffTileLayerSettings.copy({ ...this, url });
+    }
+    /**
+     * Updates the style settings for the GeotiffTileLayerSettings and returns a new instance with the updated style.
+     *
+     * @param {Style} [style] - An optional style object that defines the new style settings.
+     * @return {GeotiffTileLayerSettings} A new instance of GeotiffTileLayerSettings with the updated style.
+     */
+    setStyle(style) {
+        return GeotiffTileLayerSettings.copy({ ...this, style });
+    }
+    /**
+     * Sets the maximum value for the GeotiffTileLayerSettings.
+     *
+     * @param {number} max - The maximum value to set.
+     * @return {GeotiffTileLayerSettings} A new instance of GeotiffTileLayerSettings with the updated maximum value.
+     */
+    setMax(max) {
+        return GeotiffTileLayerSettings.copy({ ...this, max: max });
+    }
+    /**
+     * Sets the z-index for the GeotiffTileLayerSettings.
+     *
+     * @param {number} zIndex - The new z-index to be assigned.
+     * @return {GeotiffTileLayerSettings} A new GeotiffTileLayerSettings instance with the updated z-index.
+     */
+    setZIndex(zIndex) {
+        return GeotiffTileLayerSettings.copy({ ...this, zIndex });
+    }
+    /**
+     * Sets the minimum value for the GeotiffTileLayerSettings.
+     *
+     * @param {number} min - The new minimum value to be set.
+     * @return {GeotiffTileLayerSettings} A new instance of GeotiffTileLayerSettings with the updated minimum value.
+     */
+    setMin(min) {
+        return GeotiffTileLayerSettings.copy({ ...this, min: min });
+    }
+    /**
+     * Sets the opacity of the GeotiffTileLayerSettings.
+     *
+     * @param {number} opacity - The opacity value to set. Must be a number between 0 and 1.
+     * @return {GeotiffTileLayerSettings} - A new instance of GeotiffTileLayerSettings with the opacity set.
+     */
+    setOpacity(opacity) {
+        return GeotiffTileLayerSettings.copy({ ...this, opacity });
+    }
+    /**
+     * Checks if the current instance of GeotiffTileLayerSettings is equal to the given model.
+     * @param {GeotiffTileLayerSettings} 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.max !== model.max)
+            return false;
+        if (this.min !== model.min)
+            return false;
+        if (this.zIndex !== model.zIndex)
+            return false;
+        if (this.url !== model.url)
+            return false;
+        if (this.style !== model.style)
+            return false;
+        if (this.opacity !== model.opacity)
+            return false;
+        return true;
+    }
+}
+
+class GeotiffTileLayerFactory {
+    build(settings) {
+        const source = new GeoTIFF({
+            sources: [
+                {
+                    url: settings.url,
+                    min: settings.min,
+                    max: settings.max,
+                },
+            ],
+        });
+        return new TileLayer$1({
+            style: settings.style,
+            source: source,
+            zIndex: settings.zIndex,
+            opacity: settings.opacity,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: GeotiffTileLayerFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: GeotiffTileLayerFactory, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: GeotiffTileLayerFactory, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class GeotiffTileLayerComponent extends DestructibleComponent {
+    postboy;
+    factory;
+    layer;
+    constructor(postboy, factory) {
+        super();
+        this.postboy = postboy;
+        this.factory = factory;
+    }
+    _settings = new GeotiffTileLayerSettings();
+    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 AddGeotiffTileCommand(this.layer));
+    }
+    removeLayer() {
+        if (this.layer)
+            this.postboy.fire(new RemoveGeotiffTileCommand(this.layer));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: GeotiffTileLayerComponent, deps: [{ token: MapPostboyService }, { token: GeotiffTileLayerFactory }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: GeotiffTileLayerComponent, isStandalone: true, selector: "lib-geotiff-tile-layer", inputs: { settings: "settings" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: GeotiffTileLayerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-geotiff-tile-layer', imports: [], template: '' }]
+        }], ctorParameters: () => [{ type: MapPostboyService }, { type: GeotiffTileLayerFactory }], propDecorators: { settings: [{
+                type: Input
+            }] } });
+
 class MapPlateFactory {
     build(settings) {
         return new Map({
@@ -2842,18 +3076,20 @@ class MapPlateComponent extends DestructibleComponent {
     mapFactory;
     registrator;
     detector;
+    ngZone;
     contentRef = input.required(...(ngDevMode ? [{ debugName: "contentRef" }] : []));
     renderTryCount = 0;
-    map;
-    osmUrl = '';
+    map = signal(null, ...(ngDevMode ? [{ debugName: "map" }] : []));
+    osmUrl = signal('', ...(ngDevMode ? [{ debugName: "osmUrl" }] : []));
     drawingLayerSettings = new FeatureLayerSettings().setName(MapConstants.DrawingLayerId);
-    constructor(elementRef, postboy, mapFactory, registrator, detector) {
+    constructor(elementRef, postboy, mapFactory, registrator, detector, ngZone) {
         super();
         this.elementRef = elementRef;
         this.postboy = postboy;
         this.mapFactory = mapFactory;
         this.registrator = registrator;
         this.detector = detector;
+        this.ngZone = ngZone;
         registrator.up();
     }
     _settings = new MapSettings();
@@ -2864,18 +3100,20 @@ class MapPlateComponent extends DestructibleComponent {
         this.setOsm();
     }
     initializeMap() {
-        useGeographic();
-        this.map = this.mapFactory.build(this._settings);
-        this.map.setTarget(this.elementRef.nativeElement);
-        this.detector.detectChanges();
-        this.map.once('postrender', () => {
-            this.map.updateSize();
-            this.postboy.fire(new MapRenderedEvent(this.map));
-        });
-        this.map.on('pointermove', (ev) => {
-            this.postboy.fire(new MapPointerMoveEvent(ev.pixel));
+        this.ngZone.runOutsideAngular(() => {
+            useGeographic();
+            this.map.set(this.mapFactory.build(this._settings));
+            this.map()?.setTarget(this.elementRef.nativeElement);
+            this.detector.detectChanges();
+            this.map()?.once('postrender', () => {
+                this.map()?.updateSize();
+                this.postboy.fire(new MapRenderedEvent(this.map()));
+            });
+            this.map()?.on('pointermove', (ev) => {
+                this.postboy.fire(new MapPointerMoveEvent(ev.pixel));
+            });
+            this.setOsm();
         });
-        this.setOsm();
     }
     ngAfterViewInit() {
         const mapContainer = this.elementRef.nativeElement;
@@ -2897,11 +3135,11 @@ class MapPlateComponent extends DestructibleComponent {
     setOsm() {
         if (!this.map)
             return;
-        this.osmUrl = `https://mt{0-3}.google.com/vt/lyrs=${MapLyrsLabel.get(this._settings.lyrs)}&hl=${this._settings.language}&x={x}&y={y}&z={z}`;
+        this.osmUrl.set(`https://mt{0-3}.google.com/vt/lyrs=${MapLyrsLabel.get(this._settings.lyrs)}&hl=${this._settings.language}&x={x}&y={y}&z={z}`);
         this.detector.detectChanges();
-        this.map.updateSize();
+        this.map()?.updateSize();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapPlateComponent, deps: [{ token: i0.ElementRef }, { token: MapPostboyService }, { token: MapPlateFactory }, { token: MessageRegistratorService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapPlateComponent, deps: [{ token: i0.ElementRef }, { token: MapPostboyService }, { token: MapPlateFactory }, { token: MessageRegistratorService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.18", type: MapPlateComponent, isStandalone: true, selector: "art-map-plate", inputs: { contentRef: { classPropertyName: "contentRef", publicName: "contentRef", isSignal: true, isRequired: true, transformFunction: null }, settings: { classPropertyName: "settings", publicName: "settings", isSignal: false, isRequired: false, transformFunction: null } }, providers: [
             MessageRegistratorService,
             MapStateService,
@@ -2913,7 +3151,7 @@ class MapPlateComponent extends DestructibleComponent {
             FeatureService,
             FeatureModificationService,
             ControlsService,
-        ], usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"contentRef()\"> </ng-container>\r\n<art-osm-tile-layer *ngIf=\"osmUrl && map\" [map]=\"map\" [url]=\"osmUrl\" [opacity]=\"_settings.osmOpacity\"></art-osm-tile-layer>\r\n<art-feature-layer *ngIf=\"map\" [settings]=\"drawingLayerSettings\"></art-feature-layer>\r\n", styles: ["art-map-plate{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "component", type: OsmTileLayerComponent, selector: "art-osm-tile-layer", inputs: ["url", "opacity", "map"] }, { kind: "component", type: FeatureLayerComponent, selector: "art-feature-layer", inputs: ["settings"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"contentRef()\"> </ng-container>\r\n<art-osm-tile-layer *ngIf=\"osmUrl() && map\" [map]=\"map()!\" [url]=\"osmUrl()\" [opacity]=\"_settings.osmOpacity\"></art-osm-tile-layer>\r\n<art-feature-layer *ngIf=\"map\" [settings]=\"drawingLayerSettings\"></art-feature-layer>\r\n", styles: ["art-map-plate{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "component", type: OsmTileLayerComponent, selector: "art-osm-tile-layer", inputs: ["url", "opacity", "map"] }, { kind: "component", type: FeatureLayerComponent, selector: "art-feature-layer", inputs: ["settings"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapPlateComponent, decorators: [{
             type: Component,
@@ -2928,8 +3166,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         FeatureService,
                         FeatureModificationService,
                         ControlsService,
-                    ], encapsulation: ViewEncapsulation.None, imports: [OsmTileLayerComponent, FeatureLayerComponent, NgIf, NgTemplateOutlet], template: "<ng-container *ngTemplateOutlet=\"contentRef()\"> </ng-container>\r\n<art-osm-tile-layer *ngIf=\"osmUrl && map\" [map]=\"map\" [url]=\"osmUrl\" [opacity]=\"_settings.osmOpacity\"></art-osm-tile-layer>\r\n<art-feature-layer *ngIf=\"map\" [settings]=\"drawingLayerSettings\"></art-feature-layer>\r\n", styles: ["art-map-plate{display:block;width:100%;height:100%}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: MapPostboyService }, { type: MapPlateFactory }, { type: MessageRegistratorService }, { type: i0.ChangeDetectorRef }], propDecorators: { contentRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentRef", required: true }] }], settings: [{
+                    ], encapsulation: ViewEncapsulation.None, imports: [OsmTileLayerComponent, FeatureLayerComponent, NgIf, NgTemplateOutlet], template: "<ng-container *ngTemplateOutlet=\"contentRef()\"> </ng-container>\r\n<art-osm-tile-layer *ngIf=\"osmUrl() && map\" [map]=\"map()!\" [url]=\"osmUrl()\" [opacity]=\"_settings.osmOpacity\"></art-osm-tile-layer>\r\n<art-feature-layer *ngIf=\"map\" [settings]=\"drawingLayerSettings\"></art-feature-layer>\r\n", styles: ["art-map-plate{display:block;width:100%;height:100%}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: MapPostboyService }, { type: MapPlateFactory }, { type: MessageRegistratorService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { contentRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentRef", required: true }] }], settings: [{
                 type: Input
             }] } });
 
@@ -3507,5 +3745,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
  * 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, GetGeometryLengthExecutor, GetMapPositionExecutor, ImageLayerComponent, ImageLayerSettings, MapClickEvent, MapConstants, MapControl, MapControlZoomComponent, MapFeatureHoveredEvent, MapLyrs, MapLyrsLabel, 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 };
+export { AddControlCommand, CalculateAreaExecutor, CancelDrawingCommand, CancelFeatureModificationCommand, CloseTooltipCommand, ClusterLayerComponent, ClusterLayerSettings, DrawSelectionAreaCommand, DrawingType, FeatureLayerComponent, FeatureLayerSettings, FeatureOutputFormat, FilterFeaturesInAreaExecutor, FilterFeaturesInPointExecutor, FitToFeaturesCommand, FitToPolygonsCommand, GeotiffTileLayerComponent, GeotiffTileLayerSettings, GetFeaturesInAreaQuery, GetFeaturesInPointQuery, GetGeometryLengthExecutor, GetMapPositionExecutor, ImageLayerComponent, ImageLayerSettings, MapClickEvent, MapConstants, MapControl, MapControlZoomComponent, MapFeatureHoveredEvent, MapLyrs, MapLyrsLabel, 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