@artstesh/maps 1.1.25 → 1.1.27

package/dist/bundles/maps-components-src-map.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('ol'), require('ol/geom'), require('ol/format'), require('ol/extent'), require('ol/geom/Polygon'), require('ol/control'), require('ol/proj'), require('@artstesh/postboy'), require('ol/interaction'), require('ol/interaction/Draw'), require('ol/sphere'), require('rxjs'), require('rxjs/operators'), require('@artstesh/collections'), require('ol/source'), require('ol/layer/Tile'), require('ol/source/OSM'), require('ol/layer'), require('ol/loadingstrategy'), require('ol/source/Cluster'), require('ol/Map'), require('ol/View'), require('ol/Overlay'), require('ol/style/Style'), require('ol/style'), require('ol/proj/epsg4326')) :
-    typeof define === 'function' && define.amd ? define('maps-components/src/map', ['exports', '@angular/core', '@angular/common', 'ol', 'ol/geom', 'ol/format', 'ol/extent', 'ol/geom/Polygon', 'ol/control', 'ol/proj', '@artstesh/postboy', 'ol/interaction', 'ol/interaction/Draw', 'ol/sphere', 'rxjs', 'rxjs/operators', '@artstesh/collections', 'ol/source', 'ol/layer/Tile', 'ol/source/OSM', 'ol/layer', 'ol/loadingstrategy', 'ol/source/Cluster', 'ol/Map', 'ol/View', 'ol/Overlay', 'ol/style/Style', 'ol/style', 'ol/proj/epsg4326'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["maps-components"] = global["maps-components"] || {}, global["maps-components"].src = global["maps-components"].src || {}, global["maps-components"].src.map = {}), global.ng.core, global.ng.common, global.ol, global.geom, global.format, global.extent, global.Polygon, global.control, global.proj, global.postboy, global.interaction, global.Draw, global.Sphere, global.rxjs, global.rxjs.operators, global.collections, global.source, global.TileLayer, global.OSM, global.layer, global.loadingstrategy, global.Cluster, global.Map, global.View, global.Overlay, global.Style, global.style, global.epsg4326));
-})(this, (function (exports, i0, i6, ol, geom, format, extent, Polygon, control, proj, postboy, interaction, Draw, Sphere, rxjs, operators, collections, source, TileLayer, OSM, layer, loadingstrategy, Cluster, Map, View, Overlay, Style, style, epsg4326) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('ol'), require('ol/geom'), require('ol/format'), require('ol/extent'), require('ol/geom/Polygon'), require('ol/control'), require('ol/proj'), require('@artstesh/postboy'), require('ol/interaction'), require('ol/interaction/Draw'), require('ol/sphere'), require('rxjs'), require('rxjs/operators'), require('@artstesh/collections'), require('ol/source'), require('ol/layer/Tile'), require('ol/source/OSM'), require('ol/layer'), require('ol/loadingstrategy'), require('ol/source/Cluster'), require('ol/source/ImageStatic'), require('ol/layer/Image'), require('ol/source/Raster'), require('ol/Map'), require('ol/View'), require('ol/Overlay'), require('ol/style/Style'), require('ol/style'), require('ol/proj/epsg4326')) :
+    typeof define === 'function' && define.amd ? define('maps-components/src/map', ['exports', '@angular/core', '@angular/common', 'ol', 'ol/geom', 'ol/format', 'ol/extent', 'ol/geom/Polygon', 'ol/control', 'ol/proj', '@artstesh/postboy', 'ol/interaction', 'ol/interaction/Draw', 'ol/sphere', 'rxjs', 'rxjs/operators', '@artstesh/collections', 'ol/source', 'ol/layer/Tile', 'ol/source/OSM', 'ol/layer', 'ol/loadingstrategy', 'ol/source/Cluster', 'ol/source/ImageStatic', 'ol/layer/Image', 'ol/source/Raster', 'ol/Map', 'ol/View', 'ol/Overlay', 'ol/style/Style', 'ol/style', 'ol/proj/epsg4326'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["maps-components"] = global["maps-components"] || {}, global["maps-components"].src = global["maps-components"].src || {}, global["maps-components"].src.map = {}), global.ng.core, global.ng.common, global.ol, global.geom, global.format, global.extent, global.Polygon, global.control, global.proj, global.postboy, global.interaction, global.Draw, global.Sphere, global.rxjs, global.rxjs.operators, global.collections, global.source, global.TileLayer, global.OSM, global.layer, global.loadingstrategy, global.Cluster, global.Static, global.ImageLayer, global.RasterSource, global.Map, global.View, global.Overlay, global.Style, global.style, global.epsg4326));
+})(this, (function (exports, i0, i6, ol, geom, format, extent, Polygon, control, proj, postboy, interaction, Draw, Sphere, rxjs, operators, collections, source, TileLayer, OSM, layer, loadingstrategy, Cluster, Static, ImageLayer, RasterSource, Map, View, Overlay, Style, style, epsg4326) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -31,6 +31,9 @@
     var TileLayer__default = /*#__PURE__*/_interopDefaultLegacy(TileLayer);
     var OSM__default = /*#__PURE__*/_interopDefaultLegacy(OSM);
     var Cluster__default = /*#__PURE__*/_interopDefaultLegacy(Cluster);
+    var Static__default = /*#__PURE__*/_interopDefaultLegacy(Static);
+    var ImageLayer__default = /*#__PURE__*/_interopDefaultLegacy(ImageLayer);
+    var RasterSource__default = /*#__PURE__*/_interopDefaultLegacy(RasterSource);
     var Map__default = /*#__PURE__*/_interopDefaultLegacy(Map);
     var View__default = /*#__PURE__*/_interopDefaultLegacy(View);
     var Overlay__default = /*#__PURE__*/_interopDefaultLegacy(Overlay);
@@ -1480,6 +1483,50 @@
         return ZoomControlFactory;
     }());
 
+    var AddImageLayerCommand = /** @class */ (function (_super) {
+        __extends(AddImageLayerCommand, _super);
+        function AddImageLayerCommand(layer) {
+            var _this = _super.call(this) || this;
+            _this.layer = layer;
+            return _this;
+        }
+        return AddImageLayerCommand;
+    }(postboy.PostboyGenericMessage));
+    AddImageLayerCommand.ID = '70f9b86f-8bc2-4f28-ae79-a13fc0b1ee5d';
+
+    var RemoveImageLayerCommand = /** @class */ (function (_super) {
+        __extends(RemoveImageLayerCommand, _super);
+        function RemoveImageLayerCommand(layer) {
+            var _this = _super.call(this) || this;
+            _this.layer = layer;
+            return _this;
+        }
+        return RemoveImageLayerCommand;
+    }(postboy.PostboyGenericMessage));
+    RemoveImageLayerCommand.ID = 'c8e7efdb-17ff-4cf9-89be-e688b8de3b95';
+
+    var AddRasterTileCommand = /** @class */ (function (_super) {
+        __extends(AddRasterTileCommand, _super);
+        function AddRasterTileCommand(layer) {
+            var _this = _super.call(this) || this;
+            _this.layer = layer;
+            return _this;
+        }
+        return AddRasterTileCommand;
+    }(postboy.PostboyGenericMessage));
+    AddRasterTileCommand.ID = 'd33447fe-eec0-4205-9b5d-0d79ddc74ad7';
+
+    var RemoveRasterTileCommand = /** @class */ (function (_super) {
+        __extends(RemoveRasterTileCommand, _super);
+        function RemoveRasterTileCommand(layer) {
+            var _this = _super.call(this) || this;
+            _this.layer = layer;
+            return _this;
+        }
+        return RemoveRasterTileCommand;
+    }(postboy.PostboyGenericMessage));
+    RemoveRasterTileCommand.ID = 'd1c4bf6a-e2f2-4385-a7a2-cecb525f8939';
+
     var MapPostboyService = /** @class */ (function (_super) {
         __extends(MapPostboyService, _super);
         function MapPostboyService() {
@@ -1510,30 +1557,50 @@
             this.observeRemoveLayer();
             this.observePlaceFeatures();
             this.observeAddTile();
-            this.observeRemoveTile();
             this.observeLayerQuery();
             this.observeFeaturesInArea();
             this.observeFeaturesInPoint();
+            this.observeImageLayer();
+        };
+        MapManagementService.prototype.observeLayerQuery = function () {
+            var _this = this;
+            this.postboy.sub(GetLayerQuery).subscribe(function (ev) { return ev.finish(_this.layers.take(ev.name)); });
         };
-        MapManagementService.prototype.observeRemoveTile = function () {
+        MapManagementService.prototype.observeAddTile = function () {
             var _this = this;
+            this.postboy.sub(AddTileCommand).subscribe(function (c) {
+                if (!_this.map)
+                    return;
+                _this.map.addLayer(c.layer);
+            });
             this.postboy.sub(RemoveTileCommand).subscribe(function (c) {
                 if (!_this.map)
                     return;
                 _this.map.removeLayer(c.layer);
             });
+            this.postboy.sub(AddRasterTileCommand).subscribe(function (c) {
+                if (!_this.map)
+                    return;
+                _this.map.addLayer(c.layer);
+            });
+            this.postboy.sub(RemoveRasterTileCommand).subscribe(function (c) {
+                if (!_this.map)
+                    return;
+                _this.map.removeLayer(c.layer);
+            });
         };
-        MapManagementService.prototype.observeLayerQuery = function () {
-            var _this = this;
-            this.postboy.sub(GetLayerQuery).subscribe(function (ev) { return ev.finish(_this.layers.take(ev.name)); });
-        };
-        MapManagementService.prototype.observeAddTile = function () {
+        MapManagementService.prototype.observeImageLayer = function () {
             var _this = this;
-            this.postboy.sub(AddTileCommand).subscribe(function (c) {
+            this.postboy.sub(AddImageLayerCommand).subscribe(function (c) {
                 if (!_this.map)
                     return;
                 _this.map.addLayer(c.layer);
             });
+            this.postboy.sub(RemoveImageLayerCommand).subscribe(function (c) {
+                if (!_this.map)
+                    return;
+                _this.map.removeLayer(c.layer);
+            });
         };
         MapManagementService.prototype.observeMapRender = function () {
             var _this = this;
@@ -2016,6 +2083,10 @@
             this.recordSubject(AddLayerCommand);
             this.recordSubject(RemoveLayerCommand);
             this.recordSubject(AddTileCommand);
+            this.recordSubject(AddRasterTileCommand);
+            this.recordSubject(RemoveRasterTileCommand);
+            this.recordSubject(RemoveImageLayerCommand);
+            this.recordSubject(AddImageLayerCommand);
             this.recordSubject(RemoveTileCommand);
             this.recordSubject(MapClickEvent);
             this.recordSubject(CloseTooltipCommand);
@@ -2882,6 +2953,496 @@
                     type: i0.Input
                 }] } });
 
+    var ImageLayerSettings = /** @class */ (function () {
+        function ImageLayerSettings() {
+            /**
+             * Represents the tiles URL.
+             * @typedef {string} url
+             *
+             * @example
+             * 'https://example.ex/{z}/{x}/{y}.png'
+             */
+            this.url = '';
+            /**
+             * Use interpolated values when resampling.
+             * By default, linear interpolation is used when resampling.
+             * Set to false to use the nearest neighbor instead.
+             */
+            this.interpolate = undefined;
+            /**
+             * The projection of the coordinate system.
+             *
+             * @type {string}
+             * @default 'EPSG:3857'
+             */
+            this.projection = 'EPSG:3857';
+            this.extent = [0, 0, 0, 0];
+            /**
+             * Additional headers that should be added to each tile request
+             *
+             * @type {Record<string, string>}
+             * @default An empty array
+             */
+            this.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.
+         */
+        ImageLayerSettings.copy = function (model) {
+            var 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.
+         */
+        ImageLayerSettings.prototype.setUrl = function (url) {
+            return ImageLayerSettings.copy(Object.assign(Object.assign({}, this), { url: 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.
+         */
+        ImageLayerSettings.prototype.setInterpolate = function (interpolate) {
+            return ImageLayerSettings.copy(Object.assign(Object.assign({}, this), { interpolate: interpolate }));
+        };
+        ImageLayerSettings.prototype.setExtent = function (extent) {
+            return ImageLayerSettings.copy(Object.assign(Object.assign({}, this), { extent: 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.
+         */
+        ImageLayerSettings.prototype.setRequestHeaders = function (requestHeaders) {
+            return ImageLayerSettings.copy(Object.assign(Object.assign({}, this), { requestHeaders: 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.
+         */
+        ImageLayerSettings.prototype.setMaxZoom = function (maxZoom) {
+            return ImageLayerSettings.copy(Object.assign(Object.assign({}, this), { maxZoom: 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.
+         */
+        ImageLayerSettings.prototype.setMinZoom = function (minZoom) {
+            return ImageLayerSettings.copy(Object.assign(Object.assign({}, this), { minZoom: 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.
+         */
+        ImageLayerSettings.prototype.setOpacity = function (opacity) {
+            return ImageLayerSettings.copy(Object.assign(Object.assign({}, this), { opacity: 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.
+         */
+        ImageLayerSettings.prototype.setProjection = function (projection) {
+            return ImageLayerSettings.copy(Object.assign(Object.assign({}, this), { projection: 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.
+         */
+        ImageLayerSettings.prototype.isSame = function (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;
+        };
+        return ImageLayerSettings;
+    }());
+
+    var ImageLayerFactory = /** @class */ (function () {
+        function ImageLayerFactory() {
+        }
+        ImageLayerFactory.prototype.build = function (settings) {
+            var source = new Static__default["default"]({
+                url: settings.url,
+                interpolate: settings.interpolate,
+                crossOrigin: 'Anonymous',
+                projection: proj.get(settings.projection),
+                imageExtent: settings.extent,
+            });
+            return new ImageLayer__default["default"]({ source: source });
+        };
+        return ImageLayerFactory;
+    }());
+    ImageLayerFactory.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ImageLayerFactory, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    ImageLayerFactory.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ImageLayerFactory, providedIn: 'root' });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ImageLayerFactory, decorators: [{
+                type: i0.Injectable,
+                args: [{
+                        providedIn: 'root',
+                    }]
+            }] });
+
+    var ImageLayerComponent = /** @class */ (function (_super) {
+        __extends(ImageLayerComponent, _super);
+        function ImageLayerComponent(postboy, factory) {
+            var _this = _super.call(this) || this;
+            _this.postboy = postboy;
+            _this.factory = factory;
+            _this._settings = new ImageLayerSettings();
+            _this.onDestroy = function () { return _this.removeLayer(); };
+            return _this;
+        }
+        Object.defineProperty(ImageLayerComponent.prototype, "settings", {
+            set: function (value) {
+                if (!value || this._settings.isSame(value))
+                    return;
+                this._settings = value;
+                this.initLayer();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ImageLayerComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.postboy
+                .sub(MapRenderedEvent)
+                .pipe(operators.filter(function (m) { return !!m; }), operators.first())
+                .subscribe(function (m) { return _this.initLayer(); });
+        };
+        ImageLayerComponent.prototype.initLayer = function () {
+            this.removeLayer();
+            this.layer = this.factory.build(this._settings);
+            this.postboy.fire(new AddImageLayerCommand(this.layer));
+        };
+        ImageLayerComponent.prototype.removeLayer = function () {
+            if (this.layer)
+                this.postboy.fire(new RemoveImageLayerCommand(this.layer));
+        };
+        return ImageLayerComponent;
+    }(DestructibleComponent));
+    ImageLayerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ImageLayerComponent, deps: [{ token: MapPostboyService }, { token: ImageLayerFactory }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ImageLayerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ImageLayerComponent, selector: "art-image-layer", inputs: { settings: "settings" }, usesInheritance: true, ngImport: i0__namespace, template: '', isInline: true, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ImageLayerComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'art-image-layer',
+                        template: '',
+                        styleUrls: [],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () { return [{ type: MapPostboyService }, { type: ImageLayerFactory }]; }, propDecorators: { settings: [{
+                    type: i0.Input
+                }] } });
+
+    var RasterTileLayerSettings = /** @class */ (function () {
+        function RasterTileLayerSettings() {
+            /**
+             * The maximum zoom level for a map view.
+             *
+             * @type {number}
+             * @default 19
+             */
+            this.maxZoom = 19;
+            /**
+             * The minimum zoom level allowed.
+             *
+             * @type {number}
+             */
+            this.minZoom = 0;
+            /**
+             * The opacity of an element.
+             *
+             * @type {number}
+             * @default 0.6
+             */
+            this.opacity = 0.6;
+            /**
+             * Represents the tiles URL.
+             * @typedef {string} url
+             *
+             * @example
+             * 'https://example.ex/{z}/{x}/{y}.png'
+             */
+            this.url = '';
+            /**
+             * The projection of the coordinate system.
+             *
+             * @type {string}
+             * @default 'EPSG:3857'
+             */
+            this.projection = 'EPSG:3857';
+            /**
+             * Additional headers that should be added to each tile request
+             *
+             * @type {Record<string, string>}
+             * @default An empty array
+             */
+            this.requestHeaders = null;
+            this.operation = function (d) { var _a; return (_a = d[0]) !== null && _a !== void 0 ? _a : []; };
+        }
+        /**
+         * 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.
+         */
+        RasterTileLayerSettings.copy = function (model) {
+            var 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.
+         */
+        RasterTileLayerSettings.prototype.setUrl = function (url) {
+            return RasterTileLayerSettings.copy(Object.assign(Object.assign({}, this), { url: 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.
+         */
+        RasterTileLayerSettings.prototype.setOperation = function (operation) {
+            return RasterTileLayerSettings.copy(Object.assign(Object.assign({}, this), { operation: 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.
+         */
+        RasterTileLayerSettings.prototype.setRequestHeaders = function (requestHeaders) {
+            return RasterTileLayerSettings.copy(Object.assign(Object.assign({}, this), { requestHeaders: 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.
+         */
+        RasterTileLayerSettings.prototype.setMaxZoom = function (maxZoom) {
+            return RasterTileLayerSettings.copy(Object.assign(Object.assign({}, this), { maxZoom: 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.
+         */
+        RasterTileLayerSettings.prototype.setMinZoom = function (minZoom) {
+            return RasterTileLayerSettings.copy(Object.assign(Object.assign({}, this), { minZoom: 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.
+         */
+        RasterTileLayerSettings.prototype.setOpacity = function (opacity) {
+            return RasterTileLayerSettings.copy(Object.assign(Object.assign({}, this), { opacity: 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.
+         */
+        RasterTileLayerSettings.prototype.setProjection = function (projection) {
+            return RasterTileLayerSettings.copy(Object.assign(Object.assign({}, this), { projection: 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.
+         */
+        RasterTileLayerSettings.prototype.isSame = function (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;
+        };
+        return RasterTileLayerSettings;
+    }());
+
+    var RasterTileLayerFactory = /** @class */ (function () {
+        function RasterTileLayerFactory() {
+        }
+        RasterTileLayerFactory.prototype.build = function (settings) {
+            var _this = this;
+            var source$1 = new source.XYZ({
+                tileSize: 256,
+                maxZoom: settings.maxZoom || 14,
+                minZoom: settings.minZoom || 1,
+                projection: proj.get(settings.projection),
+                tileUrlFunction: this.getTileFunc(settings),
+                crossOrigin: 'Anonymous',
+                tileLoadFunction: !!settings.requestHeaders
+                    ? function (tile, src) { return _this.tileLoader(tile, src, settings.requestHeaders); }
+                    : undefined,
+            });
+            var raster = new RasterSource__default["default"]({
+                sources: [source$1],
+                operationType: 'image',
+                operation: settings.operation,
+            });
+            return new ImageLayer__default["default"]({ source: raster, opacity: settings.opacity });
+        };
+        RasterTileLayerFactory.prototype.getTileFunc = function (settings) {
+            var _this = this;
+            return function (tileCoord) {
+                var zoom = tileCoord[0];
+                var x = tileCoord[1];
+                var y = tileCoord[2];
+                var normalizedCoord = _this.getNormalizedCoord({ x: x, y: y }, zoom);
+                var bound = 1 << zoom;
+                return settings.url
+                    .replace('{x}', String((normalizedCoord === null || normalizedCoord === void 0 ? void 0 : normalizedCoord.x) || x))
+                    .replace('{z}', String(zoom))
+                    .replace('{y}', String(bound - ((normalizedCoord === null || normalizedCoord === void 0 ? void 0 : normalizedCoord.y) || y) - 1));
+            };
+        };
+        RasterTileLayerFactory.prototype.tileLoader = function (tile, src, headers) {
+            var client = new XMLHttpRequest();
+            client.open('GET', src);
+            client.responseType = 'arraybuffer';
+            Object.keys(headers).forEach(function (k) { return client.setRequestHeader(k, headers[k]); });
+            client.onload = function () {
+                if (this.response !== undefined) {
+                    var arrayBufferView = new Uint8Array(this.response);
+                    var blob = new Blob([arrayBufferView], { type: 'image/png' });
+                    var urlCreator = window.URL || window.webkitURL;
+                    tile.getImage().src = urlCreator.createObjectURL(blob);
+                }
+            };
+            client.send();
+        };
+        RasterTileLayerFactory.prototype.getNormalizedCoord = function (coord, zoom) {
+            var y = coord.y;
+            var x = coord.x;
+            var 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 };
+        };
+        return RasterTileLayerFactory;
+    }());
+    RasterTileLayerFactory.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RasterTileLayerFactory, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    RasterTileLayerFactory.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RasterTileLayerFactory, providedIn: 'root' });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RasterTileLayerFactory, decorators: [{
+                type: i0.Injectable,
+                args: [{
+                        providedIn: 'root',
+                    }]
+            }] });
+
+    var RasterTileLayerComponent = /** @class */ (function (_super) {
+        __extends(RasterTileLayerComponent, _super);
+        function RasterTileLayerComponent(postboy, factory) {
+            var _this = _super.call(this) || this;
+            _this.postboy = postboy;
+            _this.factory = factory;
+            _this._settings = new RasterTileLayerSettings();
+            _this.onDestroy = function () { return _this.removeLayer(); };
+            return _this;
+        }
+        Object.defineProperty(RasterTileLayerComponent.prototype, "settings", {
+            set: function (value) {
+                if (!value || this._settings.isSame(value))
+                    return;
+                this._settings = value;
+                this.initLayer();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        RasterTileLayerComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.postboy
+                .sub(MapRenderedEvent)
+                .pipe(operators.filter(function (m) { return !!m; }), operators.first())
+                .subscribe(function (m) { return _this.initLayer(); });
+        };
+        RasterTileLayerComponent.prototype.initLayer = function () {
+            this.removeLayer();
+            this.layer = this.factory.build(this._settings);
+            this.postboy.fire(new AddRasterTileCommand(this.layer));
+        };
+        RasterTileLayerComponent.prototype.removeLayer = function () {
+            if (this.layer)
+                this.postboy.fire(new RemoveRasterTileCommand(this.layer));
+        };
+        return RasterTileLayerComponent;
+    }(DestructibleComponent));
+    RasterTileLayerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RasterTileLayerComponent, deps: [{ token: MapPostboyService }, { token: RasterTileLayerFactory }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    RasterTileLayerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RasterTileLayerComponent, selector: "art-raster-tile-layer", inputs: { settings: "settings" }, usesInheritance: true, ngImport: i0__namespace, template: '', isInline: true, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RasterTileLayerComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'art-raster-tile-layer',
+                        template: '',
+                        styleUrls: [],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () { return [{ type: MapPostboyService }, { type: RasterTileLayerFactory }]; }, propDecorators: { settings: [{
+                    type: i0.Input
+                }] } });
+
     var MapPlateFactory = /** @class */ (function () {
         function MapPlateFactory() {
         }
@@ -3436,14 +3997,18 @@
             TooltipComponent,
             PolygonsComponent,
             ClusterLayerComponent,
-            MapControlZoomComponent], imports: [i6.CommonModule], exports: [MapPlateComponent,
+            MapControlZoomComponent,
+            ImageLayerComponent,
+            RasterTileLayerComponent], imports: [i6.CommonModule], exports: [MapPlateComponent,
             FeatureLayerComponent,
             MarkersComponent,
             TileLayerComponent,
             TooltipComponent,
             PolygonsComponent,
             ClusterLayerComponent,
-            MapControlZoomComponent] });
+            MapControlZoomComponent,
+            ImageLayerComponent,
+            RasterTileLayerComponent] });
     MapModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapModule, imports: [[i6.CommonModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapModule, decorators: [{
                 type: i0.NgModule,
@@ -3460,6 +4025,8 @@
                             PolygonsComponent,
                             ClusterLayerComponent,
                             MapControlZoomComponent,
+                            ImageLayerComponent,
+                            RasterTileLayerComponent,
                         ],
                         exports: [
                             MapPlateComponent,
@@ -3470,6 +4037,8 @@
                             PolygonsComponent,
                             ClusterLayerComponent,
                             MapControlZoomComponent,
+                            ImageLayerComponent,
+                            RasterTileLayerComponent,
                         ],
                     }]
             }] });
@@ -3683,6 +4252,10 @@
      * Generated bundle index. Do not edit.
      */
 
+    Object.defineProperty(exports, 'Feature', {
+        enumerable: true,
+        get: function () { return ol.Feature; }
+    });
     Object.defineProperty(exports, 'Style', {
         enumerable: true,
         get: function () { return style.Style; }
@@ -3704,6 +4277,8 @@
     exports.GetFeaturesInAreaQuery = GetFeaturesInAreaQuery;
     exports.GetFeaturesInPointQuery = GetFeaturesInPointQuery;
     exports.GetMapPositionExecutor = GetMapPositionExecutor;
+    exports.ImageLayerComponent = ImageLayerComponent;
+    exports.ImageLayerSettings = ImageLayerSettings;
     exports.MapClickEvent = MapClickEvent;
     exports.MapConstants = MapConstants;
     exports.MapControl = MapControl;
@@ -3727,6 +4302,8 @@
     exports.PolygonSelfIntersectionExecutor = PolygonSelfIntersectionExecutor;
     exports.PolygonStyleHelper = PolygonStyleHelper;
     exports.PolygonsComponent = PolygonsComponent;
+    exports.RasterTileLayerComponent = RasterTileLayerComponent;
+    exports.RasterTileLayerSettings = RasterTileLayerSettings;
     exports.RemoveControlCommand = RemoveControlCommand;
     exports.SetMapCenterCommand = SetMapCenterCommand;
     exports.StartDrawingCommand = StartDrawingCommand;