@vcmap/core 5.0.3 → 5.1.0-rc.2

package/src/layer/layerImplementation.ts

@@ -19,10 +19,13 @@ class LayerImplementation<M extends VcsMap> extends VcsObject {
 
   private _initialized = false;
 
+  headers?: Record<string, string>;
+
   constructor(map: M, options: LayerImplementationOptions) {
     super(options);
     this._map = map;
     this.url = options.url;
+    this.headers = options.headers;
   }
 
   get map(): M {

package/src/layer/oblique/vectorObliqueImpl.ts

@@ -182,7 +182,7 @@ class VectorObliqueImpl
     }
   }
 
-  private addFeature(originalFeature: Feature): Promise<void> {
+  private async addFeature(originalFeature: Feature): Promise<void> {
     if (!this.active) {
       this.fetchedFeaturesForImageName = null;
     }
@@ -196,7 +196,7 @@ class VectorObliqueImpl
         return Promise.resolve();
       }
 
-      if (this.obliqueSource.getFeatureById(id)) {
+      if (this.obliqueSource.getFeatureById(id) || this._updatingOblique[id]) {
         return Promise.resolve();
       }
       const obliqueFeature = new Feature({});
@@ -207,11 +207,11 @@ class VectorObliqueImpl
 
       this._setFeatureListeners(originalFeature, obliqueFeature);
 
-      return this._convertToOblique(originalFeature, obliqueFeature).then(
-        () => {
-          this.obliqueSource.addFeature(obliqueFeature);
-        },
-      );
+      await this._convertToOblique(originalFeature, obliqueFeature);
+      if (this.source.hasFeature(originalFeature)) {
+        // if not in source, feature has been removed in between.
+        this.obliqueSource.addFeature(obliqueFeature);
+      }
     }
     return Promise.resolve();
   }
@@ -308,8 +308,9 @@ class VectorObliqueImpl
     const vectorGeometry = originalFeature.getGeometry() as Geometry;
     const imageGeometry = obliqueFeature.getGeometry() as Geometry;
     this._updatingOblique[id] = true;
+    let promise: Promise<unknown>;
     if (!vectorGeometry[alreadyTransformedToImage]) {
-      await mercatorGeometryToImageGeometry(
+      promise = mercatorGeometryToImageGeometry(
         vectorGeometry,
         imageGeometry,
         this.map.currentImage as ObliqueImage,
@@ -318,7 +319,10 @@ class VectorObliqueImpl
       obliqueFeature
         .getGeometry()!
         .setCoordinates(vectorGeometry.getCoordinates());
+      // we MUST wait for a promise, otherwise this is sync and you can add a feature twice
+      promise = Promise.resolve();
     }
+    await promise;
     this._updatingOblique[id] = null;
   }
 
@@ -429,11 +433,13 @@ class VectorObliqueImpl
   }
 
   private removeFeature(feature: Feature): void {
-    const feat = this.obliqueSource.getFeatureById(
-      feature.getId() as number | string,
-    );
+    const id = feature.getId() as number | string;
+    const feat = this.obliqueSource.getFeatureById(id);
+    if (this._updatingOblique[id] != null) {
+      clearTimeout(this._updatingOblique[id] as number);
+      this._updatingOblique[id] = null;
+    }
     if (feat) {
-      const id = feat.getId() as string;
       const listeners = this._featureListeners[id];
       if (listeners) {
         unByKey(Object.values(listeners));

package/src/layer/openlayers/loadFunctionHelpers.ts

@@ -0,0 +1,24 @@
+import type { LoadFunction } from 'ol/Tile.js';
+import type { ImageTile } from 'ol';
+import TileState from 'ol/TileState.js';
+import { getInitForUrl, requestObjectUrl } from '../../util/fetch.js';
+
+// eslint-disable-next-line import/prefer-default-export
+export function getTileLoadFunction(
+  headers: Record<string, string>,
+): LoadFunction {
+  return function tileLoadFunction(imageTile, src): void {
+    const image = (imageTile as ImageTile).getImage() as HTMLImageElement;
+    const init = getInitForUrl(src, headers);
+    requestObjectUrl(src, init)
+      .then((blobUrl) => {
+        image.src = blobUrl;
+        image.onload = (): void => {
+          URL.revokeObjectURL(blobUrl);
+        };
+      })
+      .catch(() => {
+        imageTile.setState(TileState.ERROR);
+      });
+  };
+}

package/src/layer/openlayers/singleImageOpenlayersImpl.ts

@@ -1,4 +1,5 @@
 import ImageLayer from 'ol/layer/Image.js';
+import { TrustedServers } from '@vcmap-cesium/engine';
 import ImageStatic, {
   type Options as ImageStaticOptions,
 } from 'ol/source/ImageStatic.js';
@@ -7,6 +8,7 @@ import { wgs84Projection } from '../../util/projection.js';
 import { isSameOrigin } from '../../util/urlHelpers.js';
 import type { SingleImageImplementationOptions } from '../singleImageLayer.js';
 import type OpenlayersMap from '../../map/openlayersMap.js';
+import { getInitForUrl, requestObjectUrl } from '../../util/fetch.js';
 
 /**
  * represents a specific OpenLayers SingleImageLayer Layer class.
@@ -33,10 +35,32 @@ class SingleImageOpenlayersImpl extends RasterLayerOpenlayersImpl {
       projection: 'EPSG:4326',
       imageExtent: this.extent.getCoordinatesInProjection(wgs84Projection),
     };
-    if (!isSameOrigin(this.url as string)) {
+    if (TrustedServers.contains(options.url)) {
+      options.crossOrigin = 'use-credentials';
+    } else if (!isSameOrigin(this.url as string)) {
       options.crossOrigin = 'anonymous';
     }
 
+    if (this.headers) {
+      options.imageLoadFunction = (imageWrapper, src): void => {
+        const init = getInitForUrl(src, this.headers);
+        requestObjectUrl(src, init)
+          .then((blobUrl) => {
+            const image = imageWrapper.getImage() as HTMLImageElement;
+            image.src = blobUrl;
+            image.onload = (): void => {
+              URL.revokeObjectURL(blobUrl);
+            };
+          })
+          .catch(() => {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-call,no-underscore-dangle
+            imageWrapper.handleImageError_();
+          });
+      };
+    }
+
     return new ImageLayer({
       source: new ImageStatic(options),
       opacity: this.opacity,

package/src/layer/openlayers/tmsOpenlayersImpl.ts

@@ -1,3 +1,4 @@
+import { TrustedServers } from '@vcmap-cesium/engine';
 import XYZ, { type Options as XYZOptions } from 'ol/source/XYZ.js';
 import Tile from 'ol/layer/Tile.js';
 import { type Options as TileOptions } from 'ol/layer/BaseTile.js';
@@ -8,6 +9,7 @@ import { TilingScheme } from '../rasterLayer.js';
 import { isSameOrigin } from '../../util/urlHelpers.js';
 import type { TMSImplementationOptions } from '../tmsLayer.js';
 import type OpenlayersMap from '../../map/openlayersMap.js';
+import { getTileLoadFunction } from './loadFunctionHelpers.js';
 
 /**
  * TmsLayer implementation for {@link OpenlayersMap}.
@@ -43,12 +45,17 @@ class TmsOpenlayersImpl extends RasterLayerOpenlayersImpl {
       maxZoom: this.maxLevel,
       wrapX: false,
     };
-    if (!isSameOrigin(this.url as string)) {
+    if (TrustedServers.contains(this.url as string)) {
+      sourceOptions.crossOrigin = 'use-credentials';
+    } else if (!isSameOrigin(this.url as string)) {
       sourceOptions.crossOrigin = 'anonymous';
     }
     if (this.tilingSchema === TilingScheme.GEOGRAPHIC) {
       sourceOptions.projection = 'EPSG:4326';
     }
+    if (this.headers) {
+      sourceOptions.tileLoadFunction = getTileLoadFunction(this.headers);
+    }
 
     const tileOptions: TileOptions<XYZ> = {
       source: new XYZ(sourceOptions),

package/src/layer/openlayers/vectorTileOpenlayersImpl.ts

@@ -67,6 +67,7 @@ class VectorTileOpenlayersImpl
           tile.tileCoord[1],
           tile.tileCoord[2],
           tile.tileCoord[0],
+          this.headers,
         );
         if (features.length > 0) {
           tile.setFeatures(features);

package/src/layer/openlayers/wmsOpenlayersImpl.ts

@@ -1,10 +1,13 @@
 import Tile from 'ol/layer/Tile.js';
 import type { Size } from 'ol/size.js';
 import type TileWMS from 'ol/source/TileWMS.js';
+import ImageWMS from 'ol/source/ImageWMS.js';
+import ImageLayer from 'ol/layer/Image.js';
 import RasterLayerOpenlayersImpl from './rasterLayerOpenlayersImpl.js';
-import { getWMSSource } from '../wmsHelpers.js';
+import { getImageWMSSource, getWMSSource } from '../wmsHelpers.js';
 import type { WMSImplementationOptions } from '../wmsLayer.js';
 import type OpenlayersMap from '../../map/openlayersMap.js';
+import { mercatorProjection } from '../../util/projection.js';
 
 /**
  * represents a specific Cesium WmsOpenlayersImpl Layer class.
@@ -20,14 +23,31 @@ class WmsOpenlayersImpl extends RasterLayerOpenlayersImpl {
 
   tileSize: Size;
 
+  singleImage2d: boolean;
+
   constructor(map: OpenlayersMap, options: WMSImplementationOptions) {
     super(map, options);
     this.parameters = options.parameters;
     this.version = options.version;
     this.tileSize = options.tileSize;
+    this.singleImage2d = options.singleImage2d;
   }
 
-  getOLLayer(): Tile<TileWMS> {
+  getOLLayer(): Tile<TileWMS> | ImageLayer<ImageWMS> {
+    if (this.singleImage2d) {
+      return new ImageLayer({
+        extent: this.extent.getCoordinatesInProjection(mercatorProjection),
+        visible: false,
+        source: getImageWMSSource({
+          url: this.url as string,
+          parameters: this.parameters,
+          tilingSchema: this.tilingSchema,
+          version: this.version,
+          headers: this.headers,
+        }),
+        opacity: this.opacity,
+      });
+    }
     return new Tile({
       visible: false,
       source: getWMSSource({
@@ -39,6 +59,7 @@ class WmsOpenlayersImpl extends RasterLayerOpenlayersImpl {
         minLevel: this.minLevel,
         maxLevel: this.maxLevel,
         tilingSchema: this.tilingSchema,
+        headers: this.headers,
       }),
       opacity: this.opacity,
     });

package/src/layer/openlayers/wmtsOpenlayersImpl.ts

@@ -1,3 +1,4 @@
+import { TrustedServers } from '@vcmap-cesium/engine';
 import { getTopLeft, getWidth } from 'ol/extent.js';
 import WMTSTileGrid, {
   type Options as WMTSTileGridOptions,
@@ -11,6 +12,7 @@ import { TilingScheme } from '../rasterLayer.js';
 import { isSameOrigin } from '../../util/urlHelpers.js';
 import type { WMTSImplementationOptions } from '../wmtsLayer.js';
 import type OpenlayersMap from '../../map/openlayersMap.js';
+import { getTileLoadFunction } from './loadFunctionHelpers.js';
 
 /**
  * WmtsLayer implementation for {@link OpenlayersMap}.
@@ -106,13 +108,18 @@ class WmtsOpenlayersImpl extends RasterLayerOpenlayersImpl {
       url: this.url,
     };
 
-    if (!isSameOrigin(this.url as string)) {
+    if (TrustedServers.contains(this.url as string)) {
+      wmtsOptions.crossOrigin = 'use-credentials';
+    } else if (!isSameOrigin(this.url as string)) {
       wmtsOptions.crossOrigin = 'anonymous';
     }
 
     if (this.tilingSchema === TilingScheme.GEOGRAPHIC) {
       wmtsOptions.projection = 'EPSG:4326';
     }
+    if (this.headers) {
+      wmtsOptions.tileLoadFunction = getTileLoadFunction(this.headers);
+    }
 
     Object.assign(wmtsOptions, this.openlayersOptions);
     return new Tile({

package/src/layer/pointCloudLayer.ts

@@ -1,4 +1,4 @@
-import { checkMaybe } from '@vcsuite/check';
+import { check, maybe, oneOf } from '@vcsuite/check';
 // eslint-disable-next-line import/no-named-default
 import type { default as OLStyle, StyleFunction } from 'ol/style/Style.js';
 import CesiumTilesetLayer, {
@@ -80,7 +80,7 @@ class PointCloudLayer extends CesiumTilesetLayer {
   }
 
   set pointSize(size: string | number | undefined) {
-    checkMaybe(size, [Number, String]);
+    check(size, maybe(oneOf(Number, String)));
     this._pointSize = size;
     (this.style as DeclarativeStyleItem).pointSize = size?.toString();
   }

package/src/layer/terrainHelpers.ts

@@ -7,6 +7,7 @@ import {
 import type { Coordinate } from 'ol/coordinate.js';
 import { getTransform } from 'ol/proj.js';
 import Projection, { wgs84Projection } from '../util/projection.js';
+import { getResourceOrUrl } from './cesium/resourceHelper.js';
 
 export type TerrainProviderOptions = {
   requestVertexNormals?: boolean;
@@ -15,16 +16,16 @@ export type TerrainProviderOptions = {
 
 const terrainProviders: Record<string, CesiumTerrainProvider> = {};
 
-/**
- * @param  url
- * @param  options
- */
 export async function getTerrainProviderForUrl(
   url: string,
   options: TerrainProviderOptions,
+  headers?: Record<string, string>,
 ): Promise<CesiumTerrainProvider> {
   if (!terrainProviders[url]) {
-    terrainProviders[url] = await CesiumTerrainProvider.fromUrl(url, options);
+    terrainProviders[url] = await CesiumTerrainProvider.fromUrl(
+      getResourceOrUrl(url, headers),
+      options,
+    );
     return terrainProviders[url];
   }
   let terrainProvider = terrainProviders[url];
@@ -34,12 +35,24 @@ export async function getTerrainProviderForUrl(
     (options.requestWaterMask !== undefined &&
       terrainProvider.requestWaterMask !== options.requestWaterMask)
   ) {
-    terrainProviders[url] = await CesiumTerrainProvider.fromUrl(url, options);
+    terrainProviders[url] = await CesiumTerrainProvider.fromUrl(
+      getResourceOrUrl(url, headers),
+      options,
+    );
     terrainProvider = terrainProviders[url];
   }
   return terrainProvider;
 }
 
+/**
+ * cleans the terrainProvider Cache, used for testing
+ */
+export function cleanCachedTerrainProviders(): void {
+  Object.keys(terrainProviders).forEach((key) => {
+    delete terrainProviders[key];
+  });
+}
+
 /**
  * changes input coordinate Array in place, new height can also be accessed by coordinates[x][2]
  * @param  terrainProvider

package/src/layer/terrainLayer.ts

@@ -78,10 +78,14 @@ class TerrainLayer extends Layer<TerrainCesiumImpl> {
   async getHeightForWGS84Coordinates(
     coords: Coordinate[],
   ): Promise<Coordinate[]> {
-    const terrainProvider = await getTerrainProviderForUrl(this.url, {
-      requestVertexNormals: this.requestVertexNormals,
-      requestWaterMask: this.requestWaterMask,
-    });
+    const terrainProvider = await getTerrainProviderForUrl(
+      this.url,
+      {
+        requestVertexNormals: this.requestVertexNormals,
+        requestWaterMask: this.requestWaterMask,
+      },
+      this.headers,
+    );
     return getHeightFromTerrainProvider(
       terrainProvider,
       coords,

package/src/layer/tileProvider/mvtTileProvider.ts

@@ -7,7 +7,7 @@ import TileProvider, {
   TileProviderOptions,
 } from './tileProvider.js';
 import { getURL } from './urlTemplateTileProvider.js';
-import { requestArrayBuffer } from '../../util/fetch.js';
+import { getInitForUrl, requestArrayBuffer } from '../../util/fetch.js';
 import { tileProviderClassRegistry } from '../../classRegistry.js';
 
 export type MVTTileProviderOptions = TileProviderOptions & {
@@ -68,12 +68,18 @@ class MVTTileProvider extends TileProvider {
     }
   }
 
-  async loader(x: number, y: number, z: number): Promise<Feature[]> {
+  async loader(
+    x: number,
+    y: number,
+    z: number,
+    headers?: Record<string, string>,
+  ): Promise<Feature[]> {
     const rectangle = this.tilingScheme.tileXYToRectangle(x, y, z);
     const url = getURL(this.url, x, y, z, rectangle, this.locale);
     const extent = rectangleToExtent(rectangle);
     const center = getCenter(extent);
-    const data = await requestArrayBuffer(url);
+    const init = getInitForUrl(this.url, headers);
+    const data = await requestArrayBuffer(url, init);
     const features = this._MVTFormat.readFeatures(data) as Feature[];
     const sx = (extent[2] - extent[0]) / 4096;
     const sy = -((extent[3] - extent[1]) / 4096);

package/src/layer/tileProvider/staticGeojsonTileProvider.ts

@@ -2,7 +2,7 @@ import type { GeoJSONObject } from 'ol/format/GeoJSON.js';
 import type { Feature } from 'ol/index.js';
 import { parseGeoJSON } from '../geojsonHelpers.js';
 import TileProvider, { TileProviderOptions } from './tileProvider.js';
-import { requestJson } from '../../util/fetch.js';
+import { getInitForUrl, requestJson } from '../../util/fetch.js';
 import { tileProviderClassRegistry } from '../../classRegistry.js';
 
 export type StaticGeoJSONTileProviderOptions = TileProviderOptions & {
@@ -36,8 +36,14 @@ class StaticGeoJSONTileProvider extends TileProvider {
   }
 
   // eslint-disable-next-line no-unused-vars
-  async loader(_x: number, _y: number, _z: number): Promise<Feature[]> {
-    const data = await requestJson<GeoJSONObject>(this.url);
+  async loader(
+    _x: number,
+    _y: number,
+    _z: number,
+    headers?: Record<string, string>,
+  ): Promise<Feature[]> {
+    const init = getInitForUrl(this.url, headers);
+    const data = await requestJson<GeoJSONObject>(this.url, init);
     const { features } = parseGeoJSON(data, { dynamicStyle: true });
     return features;
   }

package/src/layer/tileProvider/tileProvider.ts

@@ -363,6 +363,7 @@ class TileProvider extends VcsObject {
   private async _getRtreeForBaseTile(
     baseLevel: number,
     tileCenter: Cartographic,
+    headers?: Record<string, string>,
   ): Promise<TileProviderRtree | null> {
     const baseTile = this.tilingScheme.positionToTileXY(tileCenter, baseLevel);
     const baseTileCacheKey = this.getCacheKey(
@@ -372,7 +373,12 @@ class TileProvider extends VcsObject {
     );
     if (this.cache.has(baseLevel)) {
       if (!this.cache.get(baseLevel)!.containsKey(baseTileCacheKey)) {
-        const featuresPromise = this.loader(baseTile.x, baseTile.y, baseLevel);
+        const featuresPromise = this.loader(
+          baseTile.x,
+          baseTile.y,
+          baseLevel,
+          headers,
+        );
         // eslint-disable-next-line no-void
         void this._addTilePromiseToCache(
           featuresPromise,
@@ -388,12 +394,14 @@ class TileProvider extends VcsObject {
   /**
    * returns the features intersecting this coordinate. Depending on the resolution a buffer around the coordinate is requested.
    * The Buffer has the size of the resolution.
-   * @param  coordinate in mercator
-   * @param  resolution in m per pixel
+   * @param coordinate in mercator
+   * @param resolution in m per pixel
+   * @param headers optional request headers to be sent with the server request
    */
   async getFeaturesByCoordinate(
     coordinate: Coordinate,
     resolution: number,
+    headers?: Record<string, string>,
   ): Promise<Feature[]> {
     const extent = createOrUpdateFromCoordinate(coordinate);
     buffer(extent, resolution, extent);
@@ -406,7 +414,11 @@ class TileProvider extends VcsObject {
       resolution,
       cartographic.latitude,
     );
-    const rtree = await this._getRtreeForBaseTile(baseLevel, cartographic);
+    const rtree = await this._getRtreeForBaseTile(
+      baseLevel,
+      cartographic,
+      headers,
+    );
     if (rtree) {
       const features = rtree
         .search({
@@ -423,20 +435,26 @@ class TileProvider extends VcsObject {
 
   /**
    * returns features for the requested Tile.
-   * @param  x
-   * @param  y
-   * @param  level - if the level is not a base level, will use the closest match
+   * @param x
+   * @param y
+   * @param level - if the level is not a base level, will use the closest match
+   * @param headers optional request headers to be sent with the server request
    */
   async getFeaturesForTile(
     x: number,
     y: number,
     level: number,
+    headers?: Record<string, string>,
   ): Promise<Feature[]> {
     const rectangle = this.tilingScheme.tileXYToRectangle(x, y, level);
     const tileCenter = Rectangle.center(rectangle);
     const baseLevel = this.getBaseLevel(level);
     if (baseLevel != null) {
-      const rtree = await this._getRtreeForBaseTile(baseLevel, tileCenter);
+      const rtree = await this._getRtreeForBaseTile(
+        baseLevel,
+        tileCenter,
+        headers,
+      );
       if (rtree) {
         if (level === baseLevel) {
           return rtree.all().map((item) => item.value);
@@ -462,21 +480,29 @@ class TileProvider extends VcsObject {
       const childNorth = x * 2;
       const childWest = y * 2;
       return [
-        ...(await this.getFeaturesForTile(childNorth, childWest, childLevel)),
+        ...(await this.getFeaturesForTile(
+          childNorth,
+          childWest,
+          childLevel,
+          headers,
+        )),
         ...(await this.getFeaturesForTile(
           childNorth + 1,
           childWest,
           childLevel,
+          headers,
         )),
         ...(await this.getFeaturesForTile(
           childNorth + 1,
           childWest + 1,
           childLevel,
+          headers,
         )),
         ...(await this.getFeaturesForTile(
           childNorth,
           childWest + 1,
           childLevel,
+          headers,
         )),
       ];
     }
@@ -485,12 +511,14 @@ class TileProvider extends VcsObject {
 
   /**
    * Retrieves all features which intersect the given extent. Will load all intersecting tiles.
-   * @param  extent
-   * @param  level - Optional level to request. Will use highest level if omitted. If the provided level is not a base level, will use the closest match.
+   * @param extent
+   * @param level - Optional level to request. Will use highest level if omitted. If the provided level is not a base level, will use the closest match.
+   * @param headers Optional request headers to be sent with the server request
    */
   async getFeaturesForExtent(
     extent: Extent,
     level?: number,
+    headers?: Record<string, string>,
   ): Promise<Feature[]> {
     let usedLevel = level != null ? level : this.baseLevels[0];
     usedLevel = this.getBaseLevel(usedLevel) as number;
@@ -512,7 +540,9 @@ class TileProvider extends VcsObject {
     }
 
     const features = await Promise.all(
-      tileCoordinates.map(([x, y]) => this.getFeaturesForTile(x, y, usedLevel)),
+      tileCoordinates.map(([x, y]) =>
+        this.getFeaturesForTile(x, y, usedLevel, headers),
+      ),
     );
     const mercatorExtent =
       extent.getCoordinatesInProjection(mercatorProjection);
@@ -559,7 +589,12 @@ class TileProvider extends VcsObject {
    *   });
    */
   // eslint-disable-next-line class-methods-use-this,no-unused-vars
-  loader(_x: number, _y: number, _z: number): Promise<Feature[]> {
+  loader(
+    _x: number,
+    _y: number,
+    _z: number,
+    _headers?: Record<string, string>,
+  ): Promise<Feature[]> {
     return Promise.resolve([]);
   }
 
@@ -589,6 +624,7 @@ class TileProvider extends VcsObject {
     if (defaultOptions.allowTileAggregation !== this.allowTileAggregation) {
       config.allowTileAggregation = this.allowTileAggregation;
     }
+
     return config;
   }
 

package/src/layer/tileProvider/urlTemplateTileProvider.ts

@@ -3,7 +3,7 @@ import { Math as CesiumMath, Rectangle } from '@vcmap-cesium/engine';
 import type { Feature } from 'ol/index.js';
 import { parseGeoJSON } from '../geojsonHelpers.js';
 import TileProvider, { TileProviderOptions } from './tileProvider.js';
-import { requestJson } from '../../util/fetch.js';
+import { getInitForUrl, requestJson } from '../../util/fetch.js';
 import { tileProviderClassRegistry } from '../../classRegistry.js';
 
 export type URLTemplateTileProviderOptions = TileProviderOptions & {
@@ -94,10 +94,17 @@ class URLTemplateTileProvider extends TileProvider {
     }
   }
 
-  async loader(x: number, y: number, z: number): Promise<Feature[]> {
+  async loader(
+    x: number,
+    y: number,
+    z: number,
+    headers?: Record<string, string>,
+  ): Promise<Feature[]> {
     const rectangle = this.tilingScheme.tileXYToRectangle(x, y, z);
     const url = getURL(this.url, x, y, z, rectangle, this.locale);
-    const data = await requestJson<GeoJSONObject>(url);
+
+    const init = getInitForUrl(this.url, headers);
+    const data = await requestJson<GeoJSONObject>(url, init);
     const { features } = parseGeoJSON(data, { dynamicStyle: true });
     return features;
   }