@vcmap/core 6.1.11 → 6.2.0-rc.2

package/src/layer/featureStoreFeatureVisibility.ts

@@ -1,4 +1,5 @@
-import FeatureVisibility, { HighlightStyleType } from './featureVisibility.js';
+import type { HighlightStyleType } from './featureVisibility.js';
+import FeatureVisibility from './featureVisibility.js';
 import type FeatureStoreLayerChanges from './featureStoreLayerChanges.js';
 
 export default class FeatureStoreFeatureVisibility extends FeatureVisibility {

package/src/layer/featureStoreLayer.ts

@@ -3,13 +3,15 @@ import type { Feature as GeojsonFeature, FeatureCollection } from 'geojson';
 import { SplitDirection } from '@vcmap-cesium/engine';
 import VectorSource from 'ol/source/Vector.js';
 import { createEmpty, extend as extendExtent } from 'ol/extent.js';
-import Style, { StyleFunction } from 'ol/style/Style.js';
+import type { StyleFunction } from 'ol/style/Style.js';
+import type Style from 'ol/style/Style.js';
 import type { GeoJSONObject } from 'ol/format/GeoJSON.js';
 
-import VectorLayer, {
+import type {
   VectorImplementationOptions,
   VectorOptions,
 } from './vectorLayer.js';
+import VectorLayer from './vectorLayer.js';
 import { featureStoreStateSymbol } from './featureStoreLayerState.js';
 import { parseGeoJSON } from './geojsonHelpers.js';
 import { mercatorProjection } from '../util/projection.js';
@@ -30,10 +32,8 @@ import CesiumTilesetCesiumImpl, {
 import CesiumMap from '../map/cesiumMap.js';
 import OpenlayersMap from '../map/openlayersMap.js';
 import ObliqueMap from '../map/obliqueMap.js';
-import VectorProperties, {
-  VcsMeta,
-  vcsMetaVersion,
-} from './vectorProperties.js';
+import type { VcsMeta } from './vectorProperties.js';
+import VectorProperties, { vcsMetaVersion } from './vectorProperties.js';
 import VectorOpenlayersImpl from './openlayers/vectorOpenlayersImpl.js';
 import DeclarativeStyleItem from '../style/declarativeStyleItem.js';
 import VectorObliqueImpl from './oblique/vectorObliqueImpl.js';
@@ -42,9 +42,9 @@ import { isMobile } from '../util/isMobile.js';
 import { layerClassRegistry } from '../classRegistry.js';
 import { requestJson } from '../util/fetch.js';
 import { vcsLayerName } from './layerSymbols.js';
-import StyleItem from '../style/styleItem.js';
-import VcsMap from '../map/vcsMap.js';
-import VectorCesiumImpl from './cesium/vectorCesiumImpl.js';
+import type StyleItem from '../style/styleItem.js';
+import type VcsMap from '../map/vcsMap.js';
+import type VectorCesiumImpl from './cesium/vectorCesiumImpl.js';
 import FeatureStoreFeatureVisibility from './featureStoreFeatureVisibility.js';
 
 export type FeatureStoreStaticRepresentation = {
@@ -460,7 +460,7 @@ class FeatureStoreLayer extends VectorLayer {
               }
             });
           })
-          .catch((err) => {
+          .catch((err: unknown) => {
             this.getLogger().error(
               `failed to set two dims editing: ${String(err)}`,
             );
@@ -480,9 +480,13 @@ class FeatureStoreLayer extends VectorLayer {
       ? extent.getCoordinatesInProjection(mercatorProjection)
       : createEmpty();
     if (this.staticRepresentation.threeDim) {
-      const threeDImpl = this.getImplementations().find((impl) => {
-        return impl instanceof CesiumTilesetCesiumImpl && impl.cesium3DTileset;
-      }) as CesiumTilesetCesiumImpl;
+      const threeDImpl = this.getImplementations().find(
+        (impl): impl is CesiumTilesetCesiumImpl => {
+          return !!(
+            impl instanceof CesiumTilesetCesiumImpl && impl.cesium3DTileset
+          );
+        },
+      );
 
       if (threeDImpl?.cesium3DTileset) {
         const threeDimExtent = getExtentFromTileset(threeDImpl.cesium3DTileset);
@@ -549,7 +553,7 @@ class FeatureStoreLayer extends VectorLayer {
           this.addFeatures(features);
           return features[0];
         })
-        .catch((err) => {
+        .catch((err: unknown) => {
           this.getLogger().error((err as Error).message);
         }) as Promise<Feature>;
     }

package/src/layer/featureStoreLayerChanges.ts

@@ -1,6 +1,6 @@
 import { unByKey } from 'ol/Observable.js';
 import Feature from 'ol/Feature.js';
-import { EventsKey } from 'ol/events.js';
+import type { EventsKey } from 'ol/events.js';
 import type { VectorSourceEvent } from 'ol/source/Vector.js';
 import type {
   Feature as GeojsonFeature,
@@ -120,13 +120,13 @@ class FeatureStoreLayerChanges extends VcsObject {
     removefeature: null,
   };
 
-  private _addedFeatures: Set<Feature> = new Set();
+  private _addedFeatures = new Set<Feature>();
 
-  private _editedFeatures: Set<Feature> = new Set();
+  private _editedFeatures = new Set<Feature>();
 
-  private _removedFeatures: Set<Feature> = new Set();
+  private _removedFeatures = new Set<Feature>();
 
-  private _convertedFeatures: Set<Feature> = new Set();
+  private _convertedFeatures = new Set<Feature>();
 
   changed = new VcsEvent<void>();
 
@@ -265,7 +265,7 @@ class FeatureStoreLayerChanges extends VcsObject {
       .then(() => {
         this._resetValues();
       })
-      .catch((err) => {
+      .catch((err: unknown) => {
         this.getLogger().error(String(err));
         this._resetValues();
       });
@@ -291,7 +291,7 @@ class FeatureStoreLayerChanges extends VcsObject {
         this.layer.removeFeaturesById(idArray);
         this.layer.addFeatures(features);
       })
-      .catch((err) => {
+      .catch((err: unknown) => {
         this.getLogger().error(
           'failed to reset feature, giving up',
           String(err),

package/src/layer/featureVisibility.ts

@@ -6,7 +6,8 @@ import {
 } from '@vcmap-cesium/engine';
 import { is } from '@vcsuite/check';
 import Feature from 'ol/Feature.js';
-import Style, { StyleFunction } from 'ol/style/Style.js';
+import type { StyleFunction } from 'ol/style/Style.js';
+import Style from 'ol/style/Style.js';
 
 import VectorStyleItem, { fromCesiumColor } from '../style/vectorStyleItem.js';
 import VcsEvent from '../vcsEvent.js';
@@ -231,7 +232,7 @@ class FeatureVisibility {
    * An event raised when the hidden or highlighted ids change. Is called with
    * {@link FeatureVisibilityEvent} as its only argument
    */
-  changed: VcsEvent<FeatureVisibilityEvent> = new VcsEvent();
+  changed = new VcsEvent<FeatureVisibilityEvent>();
 
   /**
    * highlights a number of features by ID (import("@vcmap-cesium/engine").Cesium3DTileFeature|ol/Feature) with the given color.

package/src/layer/flatGeobufHelpers.ts

@@ -1,11 +1,10 @@
-import Feature from 'ol/Feature.js';
+import type Feature from 'ol/Feature.js';
 import { fromFeature } from 'flatgeobuf/lib/mjs/ol/feature.js';
+import { NODE_ITEM_BYTE_LEN } from 'flatgeobuf/lib/mjs/packedrtree.js';
 import { HttpReader } from 'flatgeobuf/lib/mjs/http-reader.js';
-import Projection, {
-  mercatorProjection,
-  parseEPSGCode,
-} from '../util/projection.js';
-import Extent from '../util/extent.js';
+import type Projection from '../util/projection.js';
+import { mercatorProjection, parseEPSGCode } from '../util/projection.js';
+import type Extent from '../util/extent.js';
 import { alreadyTransformedToMercator } from './vectorSymbols.js';
 
 export async function getValidReader(
@@ -56,3 +55,44 @@ export async function getOlFeatures(
 
   return features;
 }
+
+/**
+ * Values in data projection!
+ */
+export type PackedRTreeNode = {
+  minX: number;
+  minY: number;
+  maxX: number;
+  maxY: number;
+  offset: number;
+};
+
+function readNode(dataView: DataView, offset: number): PackedRTreeNode {
+  const minX = dataView.getFloat64(offset, true);
+  const minY = dataView.getFloat64(offset + 8, true);
+  const maxX = dataView.getFloat64(offset + 16, true);
+  const maxY = dataView.getFloat64(offset + 24, true);
+  const nodeOffset = dataView.getUint32(offset + 32, true);
+
+  return { minX, minY, maxX, maxY, offset: nodeOffset };
+}
+
+/**
+ * Extracts the root node from the packed hilbert tree. The data is in data projection.
+ * @param reader
+ */
+export async function getRootNode(
+  reader: HttpReader,
+): Promise<PackedRTreeNode> {
+  const lengthBeforeTree = reader.lengthBeforeTree();
+
+  // @ts-expect-error: not actually private
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
+  const buffer = (await reader.headerClient.getRange(
+    lengthBeforeTree,
+    NODE_ITEM_BYTE_LEN,
+    0,
+    'index',
+  )) as ArrayBuffer;
+  return readNode(new DataView(buffer), 0);
+}

package/src/layer/flatGeobufLayer.ts

@@ -1,4 +1,5 @@
-import VectorLayer, { VectorOptions } from './vectorLayer.js';
+import type { VectorOptions } from './vectorLayer.js';
+import VectorLayer from './vectorLayer.js';
 import { wgs84Projection } from '../util/projection.js';
 import { layerClassRegistry } from '../classRegistry.js';
 import Extent from '../util/extent.js';

package/src/layer/geojsonHelpers.ts

@@ -19,16 +19,17 @@ import Projection, {
   mercatorProjection,
   wgs84Projection,
 } from '../util/projection.js';
+import type { VectorStyleItemOptions } from '../style/vectorStyleItem.js';
 import VectorStyleItem, {
   defaultVectorStyle,
-  VectorStyleItemOptions,
   vectorStyleSymbol,
 } from '../style/vectorStyleItem.js';
 import { parseColor } from '../style/styleHelpers.js';
 import { featureStoreStateSymbol } from './featureStoreLayerState.js';
 import { embedIconsInStyle } from '../style/writeStyle.js';
 import DeclarativeStyleItem from '../style/declarativeStyleItem.js';
-import { VcsMeta, vcsMetaVersion } from './vectorProperties.js';
+import type { VcsMeta } from './vectorProperties.js';
+import { vcsMetaVersion } from './vectorProperties.js';
 import Extent3D from '../util/featureconverter/extent3D.js';
 import {
   circleFromCenterRadius,
@@ -159,6 +160,8 @@ function readGeometry(
   options: GeoJSONinternalReadOptions,
 ): Feature {
   const geometry = getFormat().readGeometry(geometryObj, options.formatOptions);
+  // fairly ugly code, but legacy
+  // eslint-disable-next-line @typescript-eslint/no-base-to-string
   if (String(options.formatOptions?.featureProjection) === 'EPSG:3857') {
     geometry[alreadyTransformedToMercator] = true;
   }
@@ -254,11 +257,12 @@ function readFeature(
     const coordinates = geometry.getCoordinates();
     geometry = circleFromCenterRadius(coordinates, radius);
   }
+  // eslint-disable-next-line @typescript-eslint/no-base-to-string
   if (String(options.formatOptions?.featureProjection) === 'EPSG:3857') {
     geometry[alreadyTransformedToMercator] = true;
   }
 
-  featureObj.vcsMeta = featureObj.vcsMeta || ({} as VcsMeta);
+  featureObj.vcsMeta = featureObj.vcsMeta || { version: vcsMetaVersion };
   const { properties } = featureObj;
   if (
     properties &&
@@ -339,11 +343,10 @@ export function parseGeoJSON(
   }
 
   if (geoJSON.type === 'FeatureCollection') {
-    geoJSON.vcsMeta =
-      geoJSON.vcsMeta ||
-      ({
-        embeddedIcons: geoJSON.vcsEmbeddedIcons,
-      } as VcsMeta);
+    geoJSON.vcsMeta = geoJSON.vcsMeta || {
+      version: vcsMetaVersion,
+      embeddedIcons: geoJSON.vcsEmbeddedIcons,
+    };
 
     let style;
     if (geoJSON.vcsMeta.embeddedIcons) {

package/src/layer/geojsonLayer.ts

@@ -1,6 +1,7 @@
 import type { GeoJSONFeature } from 'ol/format/GeoJSON.js';
-import { FeatureCollection } from 'geojson';
-import VectorLayer, { VectorOptions } from './vectorLayer.js';
+import type { FeatureCollection } from 'geojson';
+import type { VectorOptions } from './vectorLayer.js';
+import VectorLayer from './vectorLayer.js';
 import { parseGeoJSON, writeGeoJSONFeature } from './geojsonHelpers.js';
 import Projection, { wgs84Projection } from '../util/projection.js';
 import { layerClassRegistry } from '../classRegistry.js';
@@ -88,12 +89,14 @@ class GeoJSONLayer extends VectorLayer {
     if (this.url) {
       const init = getInitForUrl(this.url, this.headers);
       this._dataFetchedPromise = requestJson(this.url, init)
-        .then((data) => this._parseGeojsonData(data as FeatureCollection))
-        .catch((err) => {
+        .then((data) => {
+          this._parseGeojsonData(data as FeatureCollection);
+        })
+        .catch((err: unknown) => {
           this.getLogger().warning(
             `Could not send request for loading layer content (${String(err)})`,
           );
-          return Promise.reject(err);
+          return Promise.reject(err as Error);
         });
     } else {
       this._dataFetchedPromise = Promise.resolve();

package/src/layer/globalHider.ts

@@ -1,12 +1,14 @@
 import { check } from '@vcsuite/check';
+import type {
+  HighlightableFeature,
+  FeatureVisibilityEvent,
+} from './featureVisibility.js';
 import {
   globalHidden,
   hideFeature,
   cacheOriginalStyle,
   showFeature,
   FeatureVisibilityAction,
-  HighlightableFeature,
-  FeatureVisibilityEvent,
 } from './featureVisibility.js';
 import VcsEvent from '../vcsEvent.js';
 
@@ -28,7 +30,7 @@ class GlobalHider {
    * An event raised when the hidden ids change. Is called with
    * {@link FeatureVisibilityEvent} as its only argument
    */
-  changed: VcsEvent<FeatureVisibilityEvent> = new VcsEvent();
+  changed = new VcsEvent<FeatureVisibilityEvent>();
 
   /**
    * Add a tick to the hide count, hidding the features if they are not already hidden

package/src/layer/layer.ts

@@ -1,15 +1,17 @@
+import type { SplitDirection } from '@vcmap-cesium/engine';
 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 type { VcsObjectOptions } from '../vcsObject.js';
+import VcsObject from '../vcsObject.js';
 import Extent, { type ExtentOptions } from '../util/extent.js';
 import LayerState from './layerState.js';
 import VcsEvent from '../vcsEvent.js';
 import { layerClassRegistry } from '../classRegistry.js';
 import GlobalHider from './globalHider.js';
-import VcsMap from '../map/vcsMap.js';
-import LayerImplementation from './layerImplementation.js';
-import AbstractFeatureProvider from '../featureProvider/abstractFeatureProvider.js';
+import type VcsMap from '../map/vcsMap.js';
+import type LayerImplementation from './layerImplementation.js';
+import type AbstractFeatureProvider from '../featureProvider/abstractFeatureProvider.js';
 
 export type CopyrightOptions = {
   provider?: string;
@@ -277,7 +279,7 @@ class Layer<
     if (this._url !== url) {
       const currentValue = this._url;
       this._url = url;
-      this.reload().catch((err) => {
+      this.reload().catch((err: unknown) => {
         this.getLogger().error('failed to reload after URL setting');
         this.getLogger().error(String(err));
         this._url = currentValue;
@@ -390,7 +392,7 @@ class Layer<
         typeof this._url === 'object' &&
         this._url[this._locale]
       ) {
-        this.reload().catch((err) => {
+        this.reload().catch((err: unknown) => {
           this.getLogger().error('failed to reload after setting locale');
           this.getLogger().error(String(err));
         });
@@ -403,7 +405,7 @@ class Layer<
    * @param  _map Map
    * @returns return the specific implementation
    */
-  // eslint-disable-next-line class-methods-use-this,no-unused-vars
+  // eslint-disable-next-line class-methods-use-this,@typescript-eslint/no-unused-vars
   createImplementationsForMap(_map: VcsMap): I[] {
     return [];
   }
@@ -413,7 +415,7 @@ class Layer<
    * @param  map initialized Map
    * @returns  return the specific implementation
    */
-  getImplementationsForMap<T extends VcsMap>(map: T): I[] {
+  getImplementationsForMap(map: VcsMap): I[] {
     if (!this._implementations.has(map)) {
       if (this.isSupported(map)) {
         this._implementations.set(map, this.createImplementationsForMap(map));
@@ -611,9 +613,9 @@ class Layer<
     }
 
     if (this._state === LayerState.INACTIVE) {
-      this._loadingPromise = this._activate().catch((err) => {
+      this._loadingPromise = this._activate().catch((err: unknown) => {
         this._state = LayerState.INACTIVE;
-        return Promise.reject(err);
+        return Promise.reject(err as Error);
       });
       return this._loadingPromise;
     }
@@ -725,10 +727,8 @@ class Layer<
 }
 
 export interface SplitLayer {
-  splitDirection: import('@vcmap-cesium/engine').SplitDirection;
-  splitDirectionChanged: VcsEvent<
-    import('@vcmap-cesium/engine').SplitDirection
-  >;
+  splitDirection: SplitDirection;
+  splitDirectionChanged: VcsEvent<SplitDirection>;
 }
 
 layerClassRegistry.registerClass(Layer.className, Layer);

package/src/layer/oblique/obliqueHelpers.ts

@@ -96,6 +96,7 @@ export async function mercatorGeometryToImageGeometry(
     inputSourceGeometry instanceof Circle
       ? fromCircle(inputSourceGeometry)
       : inputSourceGeometry;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const coordinates = sourceGeometry.getCoordinates() as any[];
   const flattenCoordinates = getFlatCoordinateReferences(
     sourceGeometry,
@@ -150,6 +151,7 @@ export function imageGeometryToMercatorGeometry(
   destinationGeometry: Geometry,
   image: ObliqueImage,
 ): Promise<Geometry> {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const coordinates = sourceGeometry.getCoordinates() as any[];
   const flattenCoordinates = getFlatCoordinateReferences(
     sourceGeometry,

package/src/layer/oblique/sourceObliqueSync.ts

@@ -2,10 +2,10 @@ import { getLogger } from '@vcsuite/logger';
 import VectorSource from 'ol/source/Vector.js';
 import { unByKey } from 'ol/Observable.js';
 import { Feature } from 'ol';
-import { Extent as OLExtent } from 'ol/extent.js';
+import type { Extent as OLExtent } from 'ol/extent.js';
 import type { Geometry } from 'ol/geom.js';
 import type { EventsKey } from 'ol/events.js';
-import ObliqueMap from '../../map/obliqueMap.js';
+import type ObliqueMap from '../../map/obliqueMap.js';
 import {
   actuallyIsCircle,
   alreadyTransformedToImage,
@@ -196,7 +196,7 @@ export function createSourceObliqueSync(
     }
     if (originalFeature.getGeometry()?.[alreadyTransformedToImage]) {
       convertToOblique(originalFeature, obliqueFeature)
-        .catch((_e) => {
+        .catch(() => {
           getLogger('SourceObliqueSync').warning(
             `Failed to convert feature with id ${id} to oblique`,
           );
@@ -207,7 +207,7 @@ export function createSourceObliqueSync(
     } else {
       updatingOblique[id] = setTimeout(() => {
         convertToOblique(originalFeature, obliqueFeature)
-          .catch((_e) => {
+          .catch(() => {
             getLogger('SourceObliqueSync').warning(
               `Failed to convert feature with id ${id} to oblique`,
             );
@@ -243,7 +243,7 @@ export function createSourceObliqueSync(
         originalGeometry,
         map.collection!.getImageByName(imageName as string) as ObliqueImage,
       )
-        .catch((_e) => {
+        .catch(() => {
           getLogger('SourceObliqueSync').warning(
             `Failed to update feature with id ${id} mercator geometry`,
           );
@@ -315,7 +315,7 @@ export function createSourceObliqueSync(
       source.on('addfeature', (event) => {
         const f = event.feature as Feature;
         if (featureInExtent(f, currentExtent)) {
-          addFeature(f).catch((_e) => {
+          addFeature(f).catch(() => {
             getLogger('SourceObliqueSync').warning(
               `Failed to add feature with id ${f.getId()!} to oblique source`,
             );
@@ -332,7 +332,7 @@ export function createSourceObliqueSync(
           !featureListeners.has(newFeatureId) &&
           featureInExtent(f, currentExtent)
         ) {
-          addFeature(f).catch((_e) => {
+          addFeature(f).catch(() => {
             getLogger('SourceObliqueSync').warning(
               `Failed to add feature with id ${newFeatureId} to oblique source`,
             );
@@ -355,7 +355,7 @@ export function createSourceObliqueSync(
         .getExtentOfCurrentImage()
         .getCoordinatesInProjection(mercatorProjection);
       source.forEachFeatureInExtent(currentExtent, (feature) => {
-        addFeature(feature).catch((_e) => {
+        addFeature(feature).catch(() => {
           getLogger('SourceObliqueSync').warning(
             `Failed to add feature with id ${feature.getId()!} to oblique source`,
           );
@@ -363,7 +363,7 @@ export function createSourceObliqueSync(
       });
       source.forEachFeature((feature) => {
         if (feature.getGeometry()?.[alreadyTransformedToImage]) {
-          addFeature(feature).catch((_e) => {
+          addFeature(feature).catch(() => {
             getLogger('SourceObliqueSync').warning(
               `Failed to add feature with id ${feature.getId()!} to oblique source`,
             );

package/src/layer/oblique/vectorObliqueImpl.ts

@@ -1,18 +1,16 @@
-import VectorSource from 'ol/source/Vector.js';
+import type VectorSource from 'ol/source/Vector.js';
 import OLVectorLayer from 'ol/layer/Vector.js';
 import type { SplitDirection } from '@vcmap-cesium/engine';
 import LayerObliqueImpl from './layerObliqueImpl.js';
 import { synchronizeFeatureVisibilityWithSource } from '../vectorHelpers.js';
-import { FeatureLayerImplementation } from '../featureLayer.js';
+import type { FeatureLayerImplementation } from '../featureLayer.js';
 import type { VectorImplementationOptions } from '../vectorLayer.js';
 import type ObliqueMap from '../../map/obliqueMap.js';
 import type GlobalHider from '../globalHider.js';
 import type StyleItem from '../../style/styleItem.js';
 import type FeatureVisibility from '../featureVisibility.js';
-import {
-  createSourceObliqueSync,
-  SourceObliqueSync,
-} from './sourceObliqueSync.js';
+import type { SourceObliqueSync } from './sourceObliqueSync.js';
+import { createSourceObliqueSync } from './sourceObliqueSync.js';
 
 /**
  * represents a specific vector layer for oblique.
@@ -60,7 +58,7 @@ class VectorObliqueImpl
     });
   }
 
-  // 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 && this.olLayer) {
@@ -68,7 +66,7 @@ class VectorObliqueImpl
     }
   }
 
-  // eslint-disable-next-line class-methods-use-this,no-unused-vars
+  // eslint-disable-next-line class-methods-use-this,@typescript-eslint/no-unused-vars
   updateSplitDirection(_splitDirection: SplitDirection): void {}
 
   async activate(): Promise<void> {

package/src/layer/openStreetMapLayer.ts

@@ -1,18 +1,17 @@
-import { ImageryLayer, SplitDirection } from '@vcmap-cesium/engine';
+import type { ImageryLayer } from '@vcmap-cesium/engine';
+import { SplitDirection } from '@vcmap-cesium/engine';
 
 import { parseInteger, parseNumberRange } from '@vcsuite/parsers';
-import Layer, { type LayerOptions, SplitLayer } from './layer.js';
+import Layer, { type SplitLayer, type LayerOptions } from './layer.js';
 import OpenlayersMap from '../map/openlayersMap.js';
 import CesiumMap from '../map/cesiumMap.js';
 import OpenStreetMapOpenlayersImpl from './openlayers/openStreetMapOpenlayersImpl.js';
 import OpenStreetMapCesiumImpl from './cesium/openStreetMapCesiumImpl.js';
 import VcsEvent from '../vcsEvent.js';
 import { layerClassRegistry } from '../classRegistry.js';
-import {
-  RasterLayerImplementationOptions,
-  TilingScheme,
-} from './rasterLayer.js';
-import VcsMap from '../map/vcsMap.js';
+import type { RasterLayerImplementationOptions } from './rasterLayer.js';
+import { TilingScheme } from './rasterLayer.js';
+import type VcsMap from '../map/vcsMap.js';
 
 export type OpenStreetMapOptions = LayerOptions & {
   /**
@@ -76,7 +75,7 @@ class OpenStreetMapLayer
   /**
    * raised if the split direction changes, is passed the split direction as its only argument
    */
-  splitDirectionChanged: VcsEvent<SplitDirection> = new VcsEvent();
+  splitDirectionChanged = new VcsEvent<SplitDirection>();
 
   /**
    * The maximum level to load.

package/src/layer/openlayers/cogOpenlayersImpl.ts

@@ -0,0 +1,75 @@
+import type GeoTIFFSource from 'ol/source/GeoTIFF.js';
+import WebGLTile from 'ol/layer/WebGLTile.js';
+import { getRenderPixel } from 'ol/render.js';
+import type RenderEvent from 'ol/render/Event.js';
+import { SplitDirection } from '@vcmap-cesium/engine';
+import RasterLayerOpenlayersImpl from './rasterLayerOpenlayersImpl.js';
+import type { COGLayerImplementationOptions } from '../cogLayer.js';
+import type OpenlayersMap from '../../map/openlayersMap.js';
+
+const vcsCleared = Symbol('vcsCleared');
+
+declare global {
+  interface WebGL2RenderingContext {
+    [vcsCleared]: number;
+  }
+}
+
+/**
+ * COGLayer implementation for {@link OpenlayersMap}.
+ */
+class COGOpenlayersImpl extends RasterLayerOpenlayersImpl {
+  static get className(): string {
+    return 'COGOpenlayersImpl';
+  }
+
+  private _source: GeoTIFFSource;
+
+  constructor(map: OpenlayersMap, options: COGLayerImplementationOptions) {
+    super(map, options);
+    this._source = options.source;
+  }
+
+  getOLLayer(): WebGLTile {
+    return new WebGLTile({
+      source: this._source,
+      opacity: this.opacity,
+      minZoom: this.minRenderingLevel,
+      maxZoom: this.maxRenderingLevel,
+    });
+  }
+
+  protected override _splitPreRender(event: RenderEvent): void {
+    const gl = event.context as WebGL2RenderingContext;
+    if (gl[vcsCleared] !== event.frameState?.time) {
+      gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+    }
+    gl.enable(gl.SCISSOR_TEST);
+
+    const mapSize = this.map.olMap?.getSize();
+    if (!mapSize) {
+      throw new Error('Map size is not available for scissor test');
+    }
+
+    const bottomLeft = getRenderPixel(event, [0, mapSize[1]]);
+    const topRight = getRenderPixel(event, [mapSize[0], 0]);
+
+    const width = Math.round(
+      (topRight[0] - bottomLeft[0]) * this.map.splitPosition,
+    );
+    const height = topRight[1] - bottomLeft[1];
+    if (this.splitDirection === SplitDirection.LEFT) {
+      gl.scissor(bottomLeft[0], bottomLeft[1], width, height);
+    } else {
+      gl.scissor(bottomLeft[0] + width, bottomLeft[1], topRight[0], height);
+    }
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  protected override _splitPostReder(event: RenderEvent): void {
+    const gl = event.context as WebGL2RenderingContext;
+    gl.disable(gl.SCISSOR_TEST);
+  }
+}
+
+export default COGOpenlayersImpl;