@vcmap/core 5.0.3 → 5.1.0-rc.2

package/src/layer/cesium/terrainCesiumImpl.ts

@@ -29,11 +29,12 @@ class TerrainCesiumImpl extends LayerImplementation<CesiumMap> {
   async initialize(): Promise<void> {
     if (!this.initialized) {
       this.terrainProvider = await getTerrainProviderForUrl(
-        this.url as string,
+        this.url!,
         {
           requestVertexNormals: this.requestVertexNormals,
           requestWaterMask: this.requestWaterMask,
         },
+        this.headers,
       );
       this.terrainProvider[vcsLayerName] = this.name;
     }

package/src/layer/cesium/tmsCesiumImpl.ts

@@ -9,6 +9,7 @@ import { wgs84Projection } from '../../util/projection.js';
 import { TilingScheme } from '../rasterLayer.js';
 import type CesiumMap from '../../map/cesiumMap.js';
 import type { TMSImplementationOptions } from '../tmsLayer.js';
+import { getResourceOrUrl } from './resourceHelper.js';
 
 /**
  * TmsLayer implementation for {@link CesiumMap}.
@@ -48,7 +49,7 @@ class TmsCesiumImpl extends RasterLayerCesiumImpl {
       options.tilingScheme = new GeographicTilingScheme();
     }
     const imageryProvider = await TileMapServiceImageryProvider.fromUrl(
-      this.url!,
+      getResourceOrUrl(this.url!, this.headers),
       options,
     );
     const layerOptions = {

package/src/layer/cesium/vectorRasterTileCesiumImpl.ts

@@ -47,6 +47,7 @@ class VectorRasterTileCesiumImpl extends RasterLayerCesiumImpl {
     this.imageryProvider = new VectorTileImageryProvider({
       tileProvider: this.tileProvider,
       tileSize: this.tileSize,
+      headers: this.headers,
     });
 
     const layerOptions: CesiumImageryLayer.ConstructorOptions = {

package/src/layer/cesium/vectorTileImageryProvider.ts

@@ -96,6 +96,7 @@ export function getCanvasFromFeatures(
 export type VectorTileImageryProviderOptions = {
   tileProvider: TileProvider;
   tileSize: Size;
+  headers?: Record<string, string>;
 };
 
 /**
@@ -110,6 +111,8 @@ class VectorTileImageryProvider {
 
   private _errorEvent = new CesiumEvent();
 
+  headers?: Record<string, string>;
+
   emptyCanvas: HTMLCanvasElement;
 
   minLevel = 0;
@@ -127,6 +130,7 @@ class VectorTileImageryProvider {
     this.emptyCanvas = document.createElement('canvas');
     this.emptyCanvas.width = this.tileWidth;
     this.emptyCanvas.height = this.tileHeight;
+    this.headers = options.headers;
   }
 
   // eslint-disable-next-line class-methods-use-this
@@ -204,7 +208,12 @@ class VectorTileImageryProvider {
     y: number,
     level: number,
   ): Promise<HTMLImageElement | HTMLCanvasElement> {
-    const features = await this.tileProvider.getFeaturesForTile(x, y, level);
+    const features = await this.tileProvider.getFeaturesForTile(
+      x,
+      y,
+      level,
+      this.headers,
+    );
     if (features.length === 0) {
       return this.emptyCanvas;
     }

package/src/layer/cesium/wmsCesiumImpl.ts

@@ -10,6 +10,7 @@ import RasterLayerCesiumImpl from './rasterLayerCesiumImpl.js';
 import { wgs84Projection } from '../../util/projection.js';
 import type { WMSImplementationOptions } from '../wmsLayer.js';
 import type CesiumMap from '../../map/cesiumMap.js';
+import { getResourceOrUrl } from './resourceHelper.js';
 
 /**
  * represents a specific Cesium WmsCesiumImpl Layer class.
@@ -39,7 +40,7 @@ class WmsCesiumImpl extends RasterLayerCesiumImpl {
       parameters.height = String(this.tileSize[1] * 2);
     }
     const options: WebMapServiceImageryProvider.ConstructorOptions = {
-      url: this.url as string,
+      url: getResourceOrUrl(this.url!, this.headers),
       layers: parameters.LAYERS,
       minimumLevel: this.minLevel,
       maximumLevel: this.maxLevel,

package/src/layer/cesium/wmtsCesiumImpl.ts

@@ -9,6 +9,7 @@ import { wgs84Projection } from '../../util/projection.js';
 import { getTilingScheme } from '../rasterLayer.js';
 import type { WMTSImplementationOptions } from '../wmtsLayer.js';
 import type CesiumMap from '../../map/cesiumMap.js';
+import { getResourceOrUrl } from './resourceHelper.js';
 
 /**
  * represents a specific WmtsLayer Implementation for {@link CesiumMap}.
@@ -50,13 +51,14 @@ class WmtsCesiumImpl extends RasterLayerCesiumImpl {
   getCesiumLayer(): Promise<CesiumImageryLayer> {
     const currentUrl = this.url as string;
     // This is a bug in Cesium, they cant cope with {Layer} placeholder..
-    const url =
+    const url: string =
       currentUrl.indexOf('{Layer}') !== -1
         ? currentUrl.replace('{Layer}', this.layer)
         : currentUrl;
+
     const extent = this.extent!.getCoordinatesInProjection(wgs84Projection);
     const options: WebMapTileServiceImageryProvider.ConstructorOptions = {
-      url,
+      url: getResourceOrUrl(url, this.headers),
       layer: this.layer,
       style: this.style,
       format: this.format,

package/src/layer/cesiumTilesetLayer.ts

@@ -1,6 +1,10 @@
-import { type Cesium3DTileset, Matrix4 } from '@vcmap-cesium/engine';
+import {
+  type Cesium3DTileset,
+  type CustomShader,
+  Matrix4,
+} from '@vcmap-cesium/engine';
 
-import { checkMaybe } from '@vcsuite/check';
+import { check, maybe } from '@vcsuite/check';
 import { parseInteger } from '@vcsuite/parsers';
 import type { Coordinate } from 'ol/coordinate.js';
 import VectorStyleItem, {
@@ -50,6 +54,7 @@ export type CesiumTilesetImplementationOptions =
     tilesetProperties?: CesiumTilesetTilesetProperties[];
     modelMatrix?: Matrix4;
     offset?: Coordinate;
+    customShader?: CustomShader;
   };
 
 /**
@@ -86,13 +91,12 @@ class CesiumTilesetLayer extends FeatureLayer<CesiumTilesetCesiumImpl> {
 
   protected _supportedMaps = [CesiumMap.className];
 
+  private _customShader: CustomShader | undefined = undefined;
+
   constructor(options: CesiumTilesetOptions) {
     super(options);
     this._supportedMaps = [CesiumMap.className];
     const defaultOptions = CesiumTilesetLayer.getDefaultOptions();
-    if (this.url && !/\.json$/.test(this.url)) {
-      this.url = `${this.url.replace(/\/$/, '')}/tileset.json`;
-    }
 
     this.highlightStyle = null;
     if (options.highlightStyle) {
@@ -136,7 +140,7 @@ class CesiumTilesetLayer extends FeatureLayer<CesiumTilesetCesiumImpl> {
   }
 
   set modelMatrix(modelMatrix: Matrix4 | undefined) {
-    checkMaybe(modelMatrix, Matrix4);
+    check(modelMatrix, maybe(Matrix4));
 
     this._modelMatrix = modelMatrix;
     this.getImplementations().forEach((impl) => {
@@ -154,7 +158,7 @@ class CesiumTilesetLayer extends FeatureLayer<CesiumTilesetCesiumImpl> {
   }
 
   set offset(offset: Coordinate | undefined) {
-    checkMaybe(offset, [Number]);
+    check(offset, maybe([Number]));
 
     this._offset = offset;
     this.getImplementations().forEach((impl) => {
@@ -162,12 +166,26 @@ class CesiumTilesetLayer extends FeatureLayer<CesiumTilesetCesiumImpl> {
     });
   }
 
+  get customShader(): CustomShader | undefined {
+    return this._customShader;
+  }
+
+  set customShader(shader: CustomShader | undefined) {
+    if (this._customShader !== shader) {
+      this._customShader = shader;
+      this.getImplementations().forEach((impl) => {
+        impl.updateCustomShader(shader);
+      });
+    }
+  }
+
   getImplementationOptions(): CesiumTilesetImplementationOptions {
     return {
       ...super.getImplementationOptions(),
       tilesetOptions: this.tilesetOptions,
       modelMatrix: this.modelMatrix,
       offset: this.offset,
+      customShader: this.customShader,
     };
   }
 

package/src/layer/czmlLayer.ts

@@ -4,6 +4,7 @@ import DataSourceLayer from './dataSourceLayer.js';
 import { vcsLayerName } from './layerSymbols.js';
 import { layerClassRegistry } from '../classRegistry.js';
 import type { LayerOptions } from './layer.js';
+import { getResourceOrUrl } from './cesium/resourceHelper.js';
 
 export type CzmlOptions = LayerOptions & {
   sourceUri?: string;
@@ -82,7 +83,7 @@ class CzmlLayer extends DataSourceLayer {
 
   private async _loadData(): Promise<void> {
     await this.dataSource.load(
-      this.url,
+      getResourceOrUrl(this.url, this.headers),
       this.sourceUri ? { sourceUri: this.sourceUri } : undefined,
     );
 

package/src/layer/featureLayer.ts

@@ -1,6 +1,6 @@
 import Style, { type StyleFunction } from 'ol/style/Style.js';
 
-import { check } from '@vcsuite/check';
+import { check, oneOf } from '@vcsuite/check';
 import { parseInteger } from '@vcsuite/parsers';
 import { SplitDirection } from '@vcmap-cesium/engine';
 import Layer, {
@@ -176,7 +176,7 @@ class FeatureLayer<
    * Sets the style based on a styleName on a layer
    */
   setStyle(style: Style | StyleFunction | StyleItem, silent?: boolean): void {
-    check(style, [Style, StyleItem, Function]);
+    check(style, oneOf(Style, StyleItem, Function));
 
     if (style instanceof StyleItem) {
       this._style = style;

package/src/layer/featureStoreLayer.ts

@@ -10,10 +10,7 @@ import VectorLayer, {
   VectorImplementationOptions,
   VectorOptions,
 } from './vectorLayer.js';
-import {
-  featureStoreStateSymbol,
-  FeatureStoreLayerState,
-} from './featureStoreLayerState.js';
+import { featureStoreStateSymbol } from './featureStoreLayerState.js';
 import { parseGeoJSON } from './geojsonHelpers.js';
 import { mercatorProjection } from '../util/projection.js';
 import FeatureStoreLayerChanges from './featureStoreLayerChanges.js';
@@ -206,7 +203,7 @@ class FeatureStoreLayer extends VectorLayer {
 
     this._removeVectorPropertiesChangeHandler =
       this.vectorProperties.propertyChanged.addEventListener(() => {
-        this.changeTracker.values.changed = true;
+        this.changeTracker.changed.raiseEvent();
       });
 
     this.injectedFetchDynamicFeatureFunc =
@@ -264,7 +261,9 @@ class FeatureStoreLayer extends VectorLayer {
     const { twoDim } = this.staticRepresentation;
     if (!this._twoDimLoaded) {
       this._twoDimLoaded = (async (): Promise<void> => {
-        const data = await requestJson<GeoJSONObject>(twoDim);
+        const data = await requestJson<GeoJSONObject>(twoDim, {
+          headers: this.headers,
+        });
         const { features } = parseGeoJSON(data, {
           targetProjection: mercatorProjection,
           dynamicStyle: true,
@@ -330,6 +329,7 @@ class FeatureStoreLayer extends VectorLayer {
           featureVisibility: this._staticFeatureVisibility,
           globalHider: this.globalHider,
           splitDirection: SplitDirection.NONE,
+          headers: this.headers,
         }),
       );
     } else if (this.staticRepresentation && this.staticRepresentation.twoDim) {
@@ -406,7 +406,7 @@ class FeatureStoreLayer extends VectorLayer {
     });
     if (changeTrackerActive) {
       this.changeTracker.track();
-      this.changeTracker.values.changed = true;
+      this.changeTracker.changed.raiseEvent();
     }
   }
 
@@ -551,7 +551,7 @@ class FeatureStoreLayer extends VectorLayer {
     this.hiddenStaticFeatureIds.add(featureId);
     const feature = new Feature();
     feature.setId(featureId);
-    feature[featureStoreStateSymbol] = FeatureStoreLayerState.STATIC;
+    feature[featureStoreStateSymbol] = 'static';
     this.changeTracker.removeFeature(feature);
   }
 

package/src/layer/featureStoreLayerChanges.ts

@@ -1,19 +1,23 @@
 import { unByKey } from 'ol/Observable.js';
 import Feature from 'ol/Feature.js';
 import { EventsKey } from 'ol/events.js';
-import { GeoJSONFeature } from 'ol/format/GeoJSON.js';
 import type { VectorSourceEvent } from 'ol/source/Vector.js';
-
+import type {
+  Feature as GeojsonFeature,
+  LineString,
+  MultiLineString,
+  MultiPoint,
+  MultiPolygon,
+  Point,
+  Polygon,
+} from 'geojson';
 import { check } from '@vcsuite/check';
-import {
-  FeatureStoreLayerState,
-  featureStoreStateSymbol,
-} from './featureStoreLayerState.js';
+import { featureStoreStateSymbol } from './featureStoreLayerState.js';
 import { parseGeoJSON, writeGeoJSONFeature } from './geojsonHelpers.js';
 import VcsObject from '../vcsObject.js';
-import { requestJson } from '../util/fetch.js';
 
 import type FeatureStoreLayer from './featureStoreLayer.js';
+import VcsEvent from '../vcsEvent.js';
 
 export type FeatureStoreTrackResults = {
   add: Feature[];
@@ -27,13 +31,25 @@ export type FeatureStoreChangesListeners = {
   removefeature: EventsKey | EventsKey[] | null;
 };
 
-export type FeatureStoreChangesValues = {
-  changed: boolean;
+export type FeatureStoreGeojsonGeometry =
+  | Point
+  | MultiPoint
+  | LineString
+  | MultiLineString
+  | Polygon
+  | MultiPolygon;
+
+export type FeatureStoreGeojsonFeature<
+  G extends FeatureStoreGeojsonGeometry = FeatureStoreGeojsonGeometry,
+  P extends Record<string, unknown> = Record<string, unknown>,
+> = Omit<GeojsonFeature<G, P>, 'id'> & {
+  _id?: string;
+  id?: string;
 };
 
 type CommitAction = {
-  action: string;
-  feature: GeoJSONFeature | { _id: string | number | undefined };
+  action: 'add' | 'edit' | 'remove';
+  feature: FeatureStoreGeojsonFeature | { _id: string };
   original: Feature;
   success(opt?: string): void;
 };
@@ -45,28 +61,32 @@ export function createCommitActions(
 ): CommitAction[] {
   const actions: CommitAction[] = [];
   added.forEach((f) => {
-    const feature = writeGeoJSONFeature(f, { writeStyle: true });
+    const feature = writeGeoJSONFeature(f, {
+      writeStyle: true,
+    }) as FeatureStoreGeojsonFeature;
     actions.push({
       action: 'add',
       feature,
       original: f,
       success(data) {
         f.setId(data);
-        f[featureStoreStateSymbol] = FeatureStoreLayerState.DYNAMIC;
+        f[featureStoreStateSymbol] = 'dynamic';
       },
     });
   });
 
   edited.forEach((f) => {
-    const feature = writeGeoJSONFeature(f, { writeStyle: true });
-    feature._id = f.getId();
+    const feature = writeGeoJSONFeature(f, {
+      writeStyle: true,
+    }) as FeatureStoreGeojsonFeature;
+    feature._id = f.getId() as string;
     actions.push({
       action: 'edit',
       original: f,
       feature,
       success() {
-        if (f[featureStoreStateSymbol] === FeatureStoreLayerState.STATIC) {
-          f[featureStoreStateSymbol] = FeatureStoreLayerState.EDITED;
+        if (f[featureStoreStateSymbol] === 'static') {
+          f[featureStoreStateSymbol] = 'edited';
         }
       },
     });
@@ -76,7 +96,7 @@ export function createCommitActions(
     actions.push({
       original: f,
       action: 'remove',
-      feature: { _id: f.getId() },
+      feature: { _id: f.getId() as string },
       success() {},
     });
   });
@@ -108,9 +128,7 @@ class FeatureStoreLayerChanges extends VcsObject {
 
   private _convertedFeatures: Set<Feature> = new Set();
 
-  values: FeatureStoreChangesValues = {
-    changed: false,
-  };
+  changed = new VcsEvent<void>();
 
   constructor(layer: FeatureStoreLayer) {
     super({});
@@ -166,12 +184,24 @@ class FeatureStoreLayerChanges extends VcsObject {
     };
   }
 
+  hasChanges(): boolean {
+    return (
+      this._addedFeatures.size !== 0 ||
+      this._editedFeatures.size !== 0 ||
+      this._removedFeatures.size !== 0
+    );
+  }
+
   /**
    * commits the changes to the provided url. url should contain accessTokens and point to a featureStore layers bulk operation endpoint
    */
   async commitChanges(
-    url: string,
-    headers: Record<string, string> = {},
+    postCallback: (
+      body: Pick<CommitAction, 'action' | 'feature'>[],
+    ) => Promise<{
+      failedActions: { index: number; error: string }[];
+      insertedIds: { _id: string }[];
+    }>,
   ): Promise<void> {
     const actions: (CommitAction | null)[] = createCommitActions(
       this._addedFeatures,
@@ -179,19 +209,9 @@ class FeatureStoreLayerChanges extends VcsObject {
       this._removedFeatures,
     );
     if (actions.length > 0) {
-      const data = await requestJson<{
-        failedActions: { index: number; error: string }[];
-        insertedIds: { _id: string }[];
-      }>(url.toString(), {
-        method: 'POST',
-        headers: {
-          ...headers,
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(
-          actions.map((a) => ({ action: a!.action, feature: a!.feature })),
-        ),
-      });
+      const data = await postCallback(
+        actions.map((a) => ({ action: a!.action, feature: a!.feature })),
+      );
 
       const failures = data.failedActions.map(({ index, error }) => {
         const action = actions[index] as CommitAction;
@@ -259,7 +279,7 @@ class FeatureStoreLayerChanges extends VcsObject {
       return Promise.resolve();
     }
 
-    if (feature[featureStoreStateSymbol] === FeatureStoreLayerState.STATIC) {
+    if (feature[featureStoreStateSymbol] === 'static') {
       this.layer.resetStaticFeature(featureId);
       return Promise.resolve();
     }
@@ -284,7 +304,6 @@ class FeatureStoreLayerChanges extends VcsObject {
     this._editedFeatures.clear();
     this._removedFeatures.clear();
     this._convertedFeatures.clear();
-    this.values.changed = false;
   }
 
   /**
@@ -316,12 +335,10 @@ class FeatureStoreLayerChanges extends VcsObject {
     if (feature) {
       if (!feature[featureStoreStateSymbol]) {
         this._addedFeatures.add(feature);
-        this.values.changed = true;
-      } else if (
-        feature[featureStoreStateSymbol] === FeatureStoreLayerState.STATIC
-      ) {
+        this.changed.raiseEvent();
+      } else if (feature[featureStoreStateSymbol] === 'static') {
         this._convertedFeatures.add(feature);
-        this.values.changed = true;
+        this.changed.raiseEvent();
       }
     }
   }
@@ -334,7 +351,7 @@ class FeatureStoreLayerChanges extends VcsObject {
       if (feature[featureStoreStateSymbol]) {
         this._convertedFeatures.delete(feature);
         this._editedFeatures.add(feature);
-        this.values.changed = true;
+        this.changed.raiseEvent();
       }
     }
   }
@@ -348,7 +365,7 @@ class FeatureStoreLayerChanges extends VcsObject {
         this._removedFeatures.add(feature);
         this._editedFeatures.delete(feature);
         this._convertedFeatures.delete(feature);
-        this.values.changed = true;
+        this.changed.raiseEvent();
       } else {
         this._addedFeatures.delete(feature);
       }
@@ -385,6 +402,7 @@ class FeatureStoreLayerChanges extends VcsObject {
   destroy(): void {
     this.unTrack();
     this._layer = undefined;
+    this.changed.destroy();
     super.destroy();
   }
 }

package/src/layer/featureStoreLayerState.ts

@@ -3,8 +3,9 @@ export const featureStoreStateSymbol = Symbol('vcsFeatureType');
 /**
  * Enumeration of feature store item states
  */
-export enum FeatureStoreLayerState {
-  DYNAMIC = 'dynamic',
-  STATIC = 'static',
-  EDITED = 'edited',
-}
+export type FeatureStoreLayerState =
+  | 'dynamic'
+  | 'static'
+  | 'edited'
+  | 'deleted'
+  | 'removed';

package/src/layer/geojsonLayer.ts

@@ -1,11 +1,10 @@
 import type { GeoJSONFeature } from 'ol/format/GeoJSON.js';
 import { FeatureCollection } from 'geojson';
-
 import VectorLayer, { VectorOptions } from './vectorLayer.js';
 import { parseGeoJSON, writeGeoJSONFeature } from './geojsonHelpers.js';
 import Projection, { wgs84Projection } from '../util/projection.js';
 import { layerClassRegistry } from '../classRegistry.js';
-import { requestJson } from '../util/fetch.js';
+import { getInitForUrl, requestJson } from '../util/fetch.js';
 
 export type GeoJSONOptions = VectorOptions & {
   features?: GeoJSONFeature[];
@@ -86,7 +85,8 @@ class GeoJSONLayer extends VectorLayer {
     }
 
     if (this.url) {
-      this._dataFetchedPromise = requestJson(this.url)
+      const init = getInitForUrl(this.url, this.headers);
+      this._dataFetchedPromise = requestJson(this.url, init)
         .then((data) => this._parseGeojsonData(data as FeatureCollection))
         .catch((err) => {
           this.getLogger().warning(

package/src/layer/layer.ts

@@ -1,4 +1,5 @@
-import { check, checkMaybe } from '@vcsuite/check';
+import deepEqual from 'fast-deep-equal';
+import { check, maybe, oneOf, optional, recordOf } from '@vcsuite/check';
 import { parseBoolean, parseInteger } from '@vcsuite/parsers';
 import VcsObject, { VcsObjectOptions } from '../vcsObject.js';
 import Extent, { type ExtentOptions } from '../util/extent.js';
@@ -50,11 +51,17 @@ export type LayerOptions = VcsObjectOptions & {
    * to other sources of data.
    */
   datasourceId?: string;
+
+  /**
+   * Optional Request Headers which will be sent with each request.
+   */
+  headers?: Record<string, string>;
 };
 
 export type LayerImplementationOptions = {
   name: string;
   url: string;
+  headers?: Record<string, string>;
 };
 
 /**
@@ -82,6 +89,7 @@ class Layer<
       hiddenObjectIds: [],
       copyright: undefined,
       datasourceId: undefined,
+      headers: undefined,
     };
   }
 
@@ -145,6 +153,8 @@ class Layer<
 
   private _locale: string;
 
+  protected _headers?: Record<string, string>;
+
   /**
    * Optional Id to synchronize with the vcPublisher Datasources. This can also be used to track a connection
    * to other sources of data.
@@ -208,6 +218,8 @@ class Layer<
     this._locale = 'en';
 
     this.datasourceId = options.datasourceId || defaultOptions.datasourceId;
+
+    this._headers = structuredClone(options.headers);
   }
 
   /**
@@ -254,7 +266,7 @@ class Layer<
   }
 
   set url(url: string | Record<string, string>) {
-    check(url, [String, Object]);
+    check(url, oneOf(String, recordOf(String)));
 
     if (this._url !== url) {
       const currentValue = this._url;
@@ -285,7 +297,7 @@ class Layer<
   }
 
   setGlobalHider(globalHider?: GlobalHider): void {
-    checkMaybe(globalHider, GlobalHider);
+    check(globalHider, maybe(GlobalHider));
 
     if (globalHider && this.active) {
       globalHider.hideObjects(this.hiddenObjectIds);
@@ -308,7 +320,7 @@ class Layer<
   }
 
   set exclusiveGroups(groups: (string | symbol)[]) {
-    check(groups, [[String, Symbol]]);
+    check(groups, [oneOf(String, Symbol)]);
 
     if (
       groups.length !== this._exclusiveGroups.length ||
@@ -332,6 +344,26 @@ class Layer<
     }
   }
 
+  /**
+   * directly manipulating the headers Object will not trigger a reload. Reload the data via layer.reload() manually.
+   */
+  get headers(): Record<string, string> | undefined {
+    return this._headers;
+  }
+
+  /**
+   *
+   * @param headers
+   */
+  set headers(headers: Record<string, string> | undefined) {
+    check(headers, optional(recordOf(String)));
+    if (!deepEqual(this._headers, headers)) {
+      this._headers = structuredClone(headers);
+      // eslint-disable-next-line no-void
+      void this.reload();
+    }
+  }
+
   /**
    * returns the currently set locale. Can be used to provide locale specific URLs.
    */
@@ -397,6 +429,7 @@ class Layer<
     return {
       name: this.name,
       url: this.url,
+      headers: this.headers,
     };
   }
 
@@ -652,6 +685,10 @@ class Layer<
       config.datasourceId = this.datasourceId;
     }
 
+    if (!deepEqual(this._headers, defaultOptions.headers)) {
+      config.headers = structuredClone(this._headers);
+    }
+
     return config;
   }