@vcmap/core 6.1.11 → 6.2.0-rc.1

package/src/layer/openlayers/layerOpenlayersImpl.ts

@@ -2,11 +2,11 @@ import { SplitDirection } from '@vcmap-cesium/engine';
 import { unByKey } from 'ol/Observable.js';
 import type { EventsKey } from 'ol/events.js';
 import type OLLayer from 'ol/layer/Layer.js';
-import RenderEvent from 'ol/render/Event.js';
+import type RenderEvent from 'ol/render/Event.js';
 import { vcsLayerName } from '../layerSymbols.js';
 import LayerImplementation from '../layerImplementation.js';
 import type OpenlayersMap from '../../map/openlayersMap.js';
-import { LayerImplementationOptions } from '../layer.js';
+import type { LayerImplementationOptions } from '../layer.js';
 
 export type LayerOpenlayersImplementationOptions =
   LayerImplementationOptions & {
@@ -98,7 +98,6 @@ class LayerOpenlayersImpl extends LayerImplementation<OpenlayersMap> {
   }
 
   private _splitPreRender(event: RenderEvent): void {
-    // eslint-disable-next-line prefer-destructuring
     const context = event.context as CanvasRenderingContext2D;
     const width = context.canvas.width * this.map.splitPosition;
     context.save();

package/src/layer/openlayers/loadFunctionHelpers.ts

@@ -3,7 +3,6 @@ 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 {

package/src/layer/openlayers/tileDebugOpenlayersImpl.ts

@@ -1,7 +1,7 @@
 import Tile from 'ol/layer/Tile.js';
 import TileDebug from 'ol/source/TileDebug.js';
 import LayerOpenlayersImpl from './layerOpenlayersImpl.js';
-import { VectorTileImplementation } from '../vectorTileLayer.js';
+import type { VectorTileImplementation } from '../vectorTileLayer.js';
 import type StyleItem from '../../style/styleItem.js';
 
 /**
@@ -22,10 +22,10 @@ class TileDebugOpenlayersImpl
     });
   }
 
-  // eslint-disable-next-line class-methods-use-this,no-unused-vars
+  // eslint-disable-next-line class-methods-use-this,@typescript-eslint/no-unused-vars
   updateStyle(_styleItem: StyleItem, _silent?: boolean): void {}
 
-  // eslint-disable-next-line class-methods-use-this,no-unused-vars
+  // eslint-disable-next-line class-methods-use-this,@typescript-eslint/no-unused-vars
   updateTiles(_args: string[]): void {}
 }
 

package/src/layer/openlayers/vectorOpenlayersImpl.ts

@@ -46,7 +46,7 @@ class VectorOpenlayersImpl
     this.globalHider = options.globalHider as GlobalHider;
   }
 
-  // eslint-disable-next-line no-unused-vars
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   updateStyle(style: StyleItem, _silent?: boolean): void {
     this.style = style;
     if (this.initialized) {

package/src/layer/openlayers/vectorTileOpenlayersImpl.ts

@@ -3,7 +3,7 @@ import VectorTileSource from 'ol/source/VectorTile.js';
 import TileState from 'ol/TileState.js';
 import type { Size } from 'ol/size.js';
 import type VectorTile from 'ol/VectorTile.js';
-import { Feature } from 'ol';
+import type { Feature } from 'ol';
 import LayerOpenlayersImpl from './layerOpenlayersImpl.js';
 import { mercatorProjection } from '../../util/projection.js';
 import type {
@@ -72,7 +72,7 @@ class VectorTileOpenlayersImpl
               tile.setState(TileState.EMPTY);
             }
           })
-          .catch((err) => {
+          .catch((err: unknown) => {
             this.getLogger().error((err as Error).message);
           });
       },
@@ -108,7 +108,7 @@ class VectorTileOpenlayersImpl
     }
   }
 
-  // eslint-disable-next-line no-unused-vars
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   updateStyle(_style: StyleItem, _silent?: boolean): void {
     if (this.initialized) {
       this.olLayer?.changed();

package/src/layer/openlayers/wmsOpenlayersImpl.ts

@@ -1,7 +1,7 @@
 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 type ImageWMS from 'ol/source/ImageWMS.js';
 import ImageLayer from 'ol/layer/Image.js';
 import RasterLayerOpenlayersImpl from './rasterLayerOpenlayersImpl.js';
 import { getImageWMSSource, getWMSSource } from '../wmsHelpers.js';

package/src/layer/panorama/panoramaDatasetPanoramaImpl.ts

@@ -0,0 +1,49 @@
+import VectorTilePanoramaImpl from './vectorTilePanoramaImpl.js';
+import type { VectorTileImplementationOptions } from '../vectorTileLayer.js';
+import type PanoramaMap from '../../map/panoramaMap.js';
+import { panoramaFeature } from '../vectorSymbols.js';
+
+export type PanoramaDatasetPanoramaImplOptions =
+  VectorTileImplementationOptions & {
+    hideInPanorama?: boolean;
+  };
+
+export default class PanoramaDatasetPanoramaImpl extends VectorTilePanoramaImpl {
+  private _hideInPanorama = false;
+
+  constructor(map: PanoramaMap, options: PanoramaDatasetPanoramaImplOptions) {
+    super(map, options);
+
+    this._hideInPanorama = options.hideInPanorama ?? false;
+
+    this.source.on('addfeature', ({ feature }) => {
+      const panoramaProps = feature![panoramaFeature]!;
+      if (
+        panoramaProps.dataset.tileProvider === options.tileProvider &&
+        panoramaProps.name === this._currentImage?.name
+      ) {
+        setTimeout(() => {
+          this.source.removeFeature(feature!);
+        }, 0);
+      }
+    });
+  }
+
+  get hideInPanorama(): boolean {
+    return this._hideInPanorama;
+  }
+
+  set hideInPanorama(value: boolean) {
+    if (this._hideInPanorama !== value) {
+      this._hideInPanorama = value;
+      if (this._primitiveCollection) {
+        this._primitiveCollection.show = !value;
+      }
+    }
+  }
+
+  override async activate(): Promise<void> {
+    await super.activate();
+    this._primitiveCollection.show = !this.hideInPanorama;
+  }
+}

package/src/layer/panorama/vectorTilePanoramaImpl.ts

@@ -0,0 +1,163 @@
+import { PrimitiveCollection, SplitDirection } from '@vcmap-cesium/engine';
+import VectorSource from 'ol/source/Vector.js';
+import type StyleItem from '../../style/styleItem.js';
+import LayerImplementation from '../layerImplementation.js';
+import type {
+  VectorTileImplementation,
+  VectorTileImplementationOptions,
+} from '../vectorTileLayer.js';
+import { vcsLayerName } from '../layerSymbols.js';
+import type PanoramaMap from '../../map/panoramaMap.js';
+import type { PanoramaImage } from '../../panorama/panoramaImage.js';
+import type TileProvider from '../tileProvider/tileProvider.js';
+import VectorContext from '../cesium/vectorContext.js';
+import type { SourceVectorContextSync } from '../cesium/sourceVectorContextSync.js';
+import { createSourceVectorContextSync } from '../cesium/sourceVectorContextSync.js';
+import type VectorProperties from '../vectorProperties.js';
+import { cartesianToMercator } from '../../util/math.js';
+import { mercatorProjection } from '../../util/projection.js';
+import Extent from '../../util/extent.js';
+
+export default class VectorTilePanoramaImpl
+  extends LayerImplementation<PanoramaMap>
+  implements VectorTileImplementation
+{
+  static get className(): string {
+    return 'VectorTilePanoramaImpl';
+  }
+
+  protected _primitiveCollection = new PrimitiveCollection();
+
+  private _imageChangedLister: () => void;
+
+  private _tileProvider: TileProvider;
+
+  readonly source = new VectorSource();
+
+  private _style: StyleItem;
+
+  private _vectorProperties: VectorProperties;
+
+  private _sourceVectorContextSync: SourceVectorContextSync | undefined;
+
+  private _context: VectorContext | null = null;
+
+  protected _currentImage: PanoramaImage | undefined;
+
+  constructor(map: PanoramaMap, options: VectorTileImplementationOptions) {
+    super(map, options);
+
+    this._primitiveCollection[vcsLayerName] = this.name;
+    this._primitiveCollection.show = false;
+    this._tileProvider = options.tileProvider;
+    this._style = options.style;
+    this._vectorProperties = options.vectorProperties;
+
+    this._imageChangedLister = map.currentImageChanged.addEventListener(
+      (image) => {
+        this._setImage(image);
+      },
+    );
+  }
+
+  private _setImage(image?: PanoramaImage): void {
+    if (image === this._currentImage) {
+      return;
+    }
+
+    if (this.active) {
+      this.source.clear();
+
+      if (image) {
+        const position = cartesianToMercator(image.position);
+        const maxDistance = image.maxDepth ?? 50;
+        const extent = [
+          position[0] - maxDistance,
+          position[1] - maxDistance,
+          position[0] + maxDistance,
+          position[1] + maxDistance,
+        ];
+        this._currentImage = image;
+        this._tileProvider
+          .getFeaturesForExtent(
+            new Extent({
+              coordinates: extent,
+              projection: mercatorProjection.toJSON(),
+            }),
+          )
+          .then((features) => {
+            if (this._currentImage === image) {
+              this.source.addFeatures(features);
+            }
+          })
+          .catch(() => {
+            this.getLogger().warning('failed to load tiles');
+          });
+      }
+    }
+  }
+
+  async initialize(): Promise<void> {
+    if (!this.initialized) {
+      this._context = new VectorContext(
+        this.map,
+        this._primitiveCollection,
+        SplitDirection.NONE,
+      );
+      this.map.addPrimitiveCollection(this._primitiveCollection);
+      this._sourceVectorContextSync = createSourceVectorContextSync(
+        this.source,
+        this._context,
+        this.map.getCesiumWidget().scene,
+        this._style.style,
+        this._vectorProperties,
+      );
+    }
+    await super.initialize();
+  }
+
+  async activate(): Promise<void> {
+    await super.activate();
+    this._primitiveCollection.show = true;
+    this._sourceVectorContextSync?.activate();
+    this._setImage(this.map.currentPanoramaImage);
+  }
+
+  deactivate(): void {
+    this._primitiveCollection.show = false;
+    this._sourceVectorContextSync?.deactivate();
+    super.deactivate();
+  }
+
+  updateStyle(style: StyleItem, silent?: boolean): void {
+    this._style = style;
+    this._sourceVectorContextSync?.setStyle(style.style, silent);
+  }
+
+  updateTiles(_tiles: string[], featureVisibility: boolean): void {
+    if (!featureVisibility && this._currentImage) {
+      const currentImage = this._currentImage;
+      this._setImage();
+      this._setImage(currentImage);
+    }
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  updateSplitDirection(): void {}
+
+  destroy(): void {
+    if (!this.isDestroyed) {
+      if (this.map.initialized) {
+        this.map.removePrimitiveCollection(this._primitiveCollection);
+      } else {
+        this._primitiveCollection.destroy();
+      }
+      this._sourceVectorContextSync?.destroy();
+      this._imageChangedLister();
+      this.source.clear(true);
+      this.source.dispose();
+    }
+
+    super.destroy();
+  }
+}

package/src/layer/panoramaDatasetLayer.ts

@@ -0,0 +1,283 @@
+import { parseInteger, parseNumber } from '@vcsuite/parsers';
+import type { Coordinate } from 'ol/coordinate.js';
+import { buffer, createOrUpdateFromCoordinate } from 'ol/extent.js';
+import { type Point } from 'ol/geom.js';
+import VectorTileLayer, {
+  type VectorTileImpls,
+  type VectorTileOptions,
+} from './vectorTileLayer.js';
+import PanoramaDatasetPanoramaImpl from './panorama/panoramaDatasetPanoramaImpl.js';
+import type VcsMap from '../map/vcsMap.js';
+import PanoramaMap from '../map/panoramaMap.js';
+import VectorProperties, { PrimitiveOptionsType } from './vectorProperties.js';
+import { maxZIndexMin50 } from '../util/layerCollection.js';
+import { layerClassRegistry } from '../classRegistry.js';
+import FlatGeobufTileProvider from './tileProvider/flatGeobufTileProvider.js';
+import { mercatorProjection, wgs84Projection } from '../util/projection.js';
+import { panoramaFeature } from './vectorSymbols.js';
+import { PanoramaImageCache } from '../panorama/panoramaImageCache.js';
+import {
+  createPanoramaImageFromURL,
+  type PanoramaImage,
+} from '../panorama/panoramaImage.js';
+import Extent from '../util/extent.js';
+import { cartesian2DDistanceSquared } from '../util/math.js';
+import { getStyleOrDefaultStyle } from '../style/styleFactory.js';
+
+export type PanoramaDatasetOptions = Omit<
+  VectorTileOptions,
+  'url' | 'tileProvider'
+> & {
+  url: string;
+  baseLevel?: number;
+  cameraOffset?: number;
+};
+
+export type PanoramaDatasetFeatureProperties = {
+  name: string;
+  time: string;
+  dataset: PanoramaDatasetLayer;
+};
+
+export default class PanoramaDatasetLayer extends VectorTileLayer<PanoramaDatasetPanoramaImpl> {
+  static get className(): string {
+    return 'PanoramaDatasetLayer';
+  }
+
+  static getDefaultOptions(): PanoramaDatasetOptions {
+    return {
+      ...VectorTileLayer.getDefaultOptions(),
+      url: '',
+      baseLevel: 15,
+      activeOnStartup: false,
+      cameraOffset: 0,
+      minLevel: 15,
+      maxLevel: 22,
+      zIndex: maxZIndexMin50,
+    };
+  }
+
+  declare tileProvider: FlatGeobufTileProvider;
+
+  private _hideInPanorama = false;
+
+  private _panoramaVectorProperties = new VectorProperties({});
+
+  private _cache = new PanoramaImageCache();
+
+  private _dataExtent?: Extent;
+
+  readonly baseUrl: string;
+
+  readonly baseLevel: number;
+
+  cameraOffset: number;
+
+  constructor(options: PanoramaDatasetOptions) {
+    const defaultOptions = PanoramaDatasetLayer.getDefaultOptions();
+
+    const baseLevel = parseInteger(options.baseLevel, defaultOptions.baseLevel);
+
+    const tileProvider = new FlatGeobufTileProvider({
+      idProperty: 'name',
+      projection: wgs84Projection.toJSON(),
+      levels: [
+        {
+          url: options.url,
+          level: baseLevel,
+        },
+      ],
+    });
+
+    super({
+      ...defaultOptions,
+      ...options,
+      tileProvider,
+    });
+
+    tileProvider.tileLoadedEvent.addEventListener(({ rtree }) => {
+      rtree.all().forEach(({ value: feature }) => {
+        const { name, time } =
+          feature.getProperties() as Partial<PanoramaDatasetFeatureProperties>;
+
+        if (name && time) {
+          feature[panoramaFeature] = {
+            name,
+            time,
+            dataset: this,
+          };
+        }
+      });
+    });
+
+    this.baseUrl = this.url.split('/').slice(0, -1).join('/');
+    this.baseLevel = baseLevel;
+
+    this.cameraOffset = parseNumber(
+      options.cameraOffset,
+      defaultOptions.cameraOffset,
+    );
+
+    this._panoramaVectorProperties = new VectorProperties({
+      altitudeMode: 'absolute',
+      primitiveOptions: {
+        type: PrimitiveOptionsType.CYLINDER,
+        geometryOptions: {
+          topRadius: 1,
+          bottomRadius: 1,
+          length: 0.01,
+        },
+        offset: [0, 0, this.cameraOffset],
+      },
+    });
+
+    this._supportedMaps.push(PanoramaMap.className);
+  }
+
+  override async initialize(): Promise<void> {
+    if (!this.initialized) {
+      this._dataExtent = await this.tileProvider.getLevelExtent(this.baseLevel);
+    }
+    await super.initialize();
+  }
+
+  get hideInPanorama(): boolean {
+    return this._hideInPanorama;
+  }
+
+  set hideInPanorama(value: boolean) {
+    if (this._hideInPanorama !== value) {
+      this._hideInPanorama = value;
+      this.getImplementations().forEach((impl) => {
+        if (impl instanceof PanoramaDatasetPanoramaImpl) {
+          impl.hideInPanorama = value;
+        }
+      });
+    }
+  }
+
+  override createImplementationsForMap(
+    map: VcsMap,
+  ): (PanoramaDatasetPanoramaImpl | VectorTileImpls)[] {
+    if (map instanceof PanoramaMap) {
+      return [
+        new PanoramaDatasetPanoramaImpl(map, {
+          ...this.getImplementationOptions(),
+          vectorProperties: this._panoramaVectorProperties,
+          hideInPanorama: this.hideInPanorama,
+        }),
+      ];
+    }
+    return super.createImplementationsForMap(map);
+  }
+
+  /**
+   * Creates a panorama image with the given name, if it belongs to this dataset.
+   * Will cache the image for later use.
+   * @param name
+   * @returns
+   */
+  createPanoramaImage(name: string): Promise<PanoramaImage> {
+    const imageUrl = `${this.baseUrl}/${name}_rgb.tif`;
+    if (this._cache.containsKey(imageUrl)) {
+      return this._cache.get(imageUrl);
+    }
+    const imagePromise = createPanoramaImageFromURL(imageUrl, this);
+    this._cache.set(imageUrl, imagePromise);
+    this._cache.expireCache();
+
+    return imagePromise;
+  }
+
+  override getZoomToExtent(): Extent | null {
+    const metaExtent = super.getZoomToExtent();
+    if (metaExtent) {
+      return metaExtent;
+    }
+    return this._dataExtent ?? null;
+  }
+
+  /**
+   * Returns the closes image name to the coordinate within the given distance &
+   * the distance squared to the coordinate.
+   * @param coordinate - in web mercator
+   * @param maxDistance - in meters
+   * @returns - the closest image name and the distance squared to the coordinate
+   */
+  async getClosestImage(
+    coordinate: Coordinate,
+    maxDistance = 200,
+  ): Promise<{ imageName: string; distanceSqrd: number } | undefined> {
+    const extent = createOrUpdateFromCoordinate(coordinate);
+    buffer(extent, maxDistance, extent);
+    const features = await this.tileProvider.getFeaturesForExtent(
+      new Extent({
+        coordinates: extent,
+        projection: mercatorProjection.toJSON(),
+      }),
+      this.baseLevel,
+    );
+    let minDistanceSqrd = Infinity;
+    let closestImageName: string | undefined;
+    features.forEach((feature) => {
+      const imagePosition = (feature.getGeometry() as Point).getCoordinates();
+      const distanceSqrd = cartesian2DDistanceSquared(
+        imagePosition,
+        coordinate,
+      );
+
+      if (distanceSqrd < minDistanceSqrd) {
+        minDistanceSqrd = distanceSqrd;
+        closestImageName = feature.get('name') as string;
+      }
+    });
+
+    if (closestImageName) {
+      return {
+        imageName: closestImageName,
+        distanceSqrd: minDistanceSqrd,
+      };
+    }
+
+    return undefined;
+  }
+
+  override toJSON(): PanoramaDatasetOptions {
+    const config = super.toJSON() as Partial<PanoramaDatasetOptions> &
+      VectorTileOptions;
+    delete config.tileProvider; // tileProvider is not serializable
+    config.url = this.url;
+
+    const defaultOptions = PanoramaDatasetLayer.getDefaultOptions();
+    if (this.cameraOffset !== defaultOptions.cameraOffset) {
+      config.cameraOffset = this.cameraOffset;
+    }
+    if (this.baseLevel !== defaultOptions.baseLevel) {
+      config.baseLevel = this.baseLevel;
+    }
+
+    if (config.maxLevel === defaultOptions.maxLevel) {
+      delete config.maxLevel;
+    }
+
+    if (config.minLevel === defaultOptions.minLevel) {
+      delete config.minLevel;
+    }
+
+    if (config.zIndex === defaultOptions.zIndex) {
+      delete config.zIndex;
+    }
+
+    const thisDefaultStyle = getStyleOrDefaultStyle(defaultOptions.style);
+    if (this.style.equals(thisDefaultStyle)) {
+      delete config.style;
+    }
+
+    return config as PanoramaDatasetOptions;
+  }
+}
+
+layerClassRegistry.registerClass(
+  PanoramaDatasetLayer.className,
+  PanoramaDatasetLayer,
+);

package/src/layer/pointCloudLayer.ts

@@ -1,21 +1,18 @@
 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, {
-  CesiumTilesetOptions,
-} from './cesiumTilesetLayer.js';
-import DeclarativeStyleItem, {
-  DeclarativeStyleItemOptions,
-  defaultDeclarativeStyle,
-} from '../style/declarativeStyleItem.js';
-import VectorStyleItem, {
-  VectorStyleItemOptions,
-} from '../style/vectorStyleItem.js';
+import type { CesiumTilesetOptions } from './cesiumTilesetLayer.js';
+import CesiumTilesetLayer from './cesiumTilesetLayer.js';
+import type { DeclarativeStyleItemOptions } from '../style/declarativeStyleItem.js';
+import type DeclarativeStyleItem from '../style/declarativeStyleItem.js';
+import { defaultDeclarativeStyle } from '../style/declarativeStyleItem.js';
+import type { VectorStyleItemOptions } from '../style/vectorStyleItem.js';
+import VectorStyleItem from '../style/vectorStyleItem.js';
 import CesiumMap from '../map/cesiumMap.js';
 import CesiumTilesetCesiumImpl from './cesium/cesiumTilesetCesiumImpl.js';
 import { layerClassRegistry } from '../classRegistry.js';
-import StyleItem from '../style/styleItem.js';
-import VcsMap from '../map/vcsMap.js';
+import type StyleItem from '../style/styleItem.js';
+import type VcsMap from '../map/vcsMap.js';
 
 export type PointCloudOptions = CesiumTilesetOptions & {
   pointSize?: number | string;

package/src/layer/rasterLayer.ts

@@ -1,9 +1,9 @@
+import type { ImageryLayer } from '@vcmap-cesium/engine';
 import {
   SplitDirection,
   WebMercatorTilingScheme,
   GeographicTilingScheme,
   Cartographic,
-  ImageryLayer,
 } from '@vcmap-cesium/engine';
 import {
   getBottomLeft,
@@ -18,16 +18,17 @@ import {
   parseEnumValue,
 } from '@vcsuite/parsers';
 import { wgs84Projection } from '../util/projection.js';
-import Layer, {
+import type {
   LayerImplementationOptions,
   LayerOptions,
   SplitLayer,
 } from './layer.js';
+import Layer from './layer.js';
 import VcsEvent from '../vcsEvent.js';
 import Extent from '../util/extent.js';
 import { layerClassRegistry } from '../classRegistry.js';
-import LayerImplementation from './layerImplementation.js';
-import VcsMap from '../map/vcsMap.js';
+import type LayerImplementation from './layerImplementation.js';
+import type VcsMap from '../map/vcsMap.js';
 
 export type RasterLayerOptions = LayerOptions & {
   /**
@@ -244,7 +245,7 @@ class RasterLayer<
   /**
    * raised if the split direction changes, is passed the split direction as its only argument
    */
-  splitDirectionChanged: VcsEvent<SplitDirection> = new VcsEvent();
+  splitDirectionChanged = new VcsEvent<SplitDirection>();
 
   /**
    * @param  options

package/src/layer/singleImageLayer.ts

@@ -1,8 +1,9 @@
 import { check } from '@vcsuite/check';
-import RasterLayer, {
+import type {
   RasterLayerImplementationOptions,
   RasterLayerOptions,
 } from './rasterLayer.js';
+import RasterLayer from './rasterLayer.js';
 import SingleImageCesiumImpl from './cesium/singleImageCesiumImpl.js';
 import SingleImageOpenlayersImpl from './openlayers/singleImageOpenlayersImpl.js';
 import CesiumMap from '../map/cesiumMap.js';
@@ -10,7 +11,7 @@ import OpenlayersMap from '../map/openlayersMap.js';
 import Extent from '../util/extent.js';
 import { layerClassRegistry } from '../classRegistry.js';
 import { wgs84Projection } from '../util/projection.js';
-import VcsMap from '../map/vcsMap.js';
+import type VcsMap from '../map/vcsMap.js';
 
 export type SingleImageOptions = RasterLayerOptions & {
   credit?: string;