@vcmap/core 6.0.0-rc.9 → 6.0.1

package/src/layer/cesium/vcsTile/vcsTileHelpers.ts

@@ -0,0 +1,134 @@
+import {
+  HeightReference,
+  Math as CesiumMath,
+  PrimitiveCollection,
+  QuadtreeTile,
+  Rectangle,
+  SplitDirection,
+  TileBoundingRegion,
+  TilingScheme,
+} from '@vcmap-cesium/engine';
+import { StyleLike } from 'ol/style/Style.js';
+import { Extent as OLExtent } from 'ol/extent.js';
+import type CesiumMap from '../../../map/cesiumMap.js';
+import Projection from '../../../util/projection.js';
+import TileProvider from '../../tileProvider/tileProvider.js';
+import VectorProperties from '../../vectorProperties.js';
+
+export enum VcsTileState {
+  LOADING,
+  PROCESSING,
+  READY,
+  FAILED,
+}
+
+export enum VcsTileType {
+  VECTOR,
+  CHILD,
+  NO_DATA,
+  DEBUG,
+}
+
+export type VcsTileOptions = {
+  map: CesiumMap;
+  primitiveCollection: PrimitiveCollection;
+  style: StyleLike;
+  tileProvider: TileProvider;
+  name: string;
+  vectorProperties: VectorProperties;
+  splitDirection: SplitDirection;
+};
+
+export interface VcsTile {
+  state: VcsTileState;
+  type: VcsTileType;
+  tileBoundingRegion: TileBoundingRegion;
+  show: boolean;
+  freeResources?: () => void;
+}
+
+/**
+ * returns the extent of the tile in wgs84 degrees
+ * @param tile
+ * @param tilingScheme
+ */
+export function getTileWgs84Extent(
+  tile: QuadtreeTile,
+  tilingScheme: TilingScheme,
+): OLExtent {
+  const tileRect = tilingScheme.tileXYToRectangle(tile.x, tile.y, tile.level);
+
+  return [
+    CesiumMath.toDegrees(tileRect.west),
+    CesiumMath.toDegrees(tileRect.south),
+    CesiumMath.toDegrees(tileRect.east),
+    CesiumMath.toDegrees(tileRect.north),
+  ];
+}
+
+/**
+ * returns the extent of the tile in web mercator
+ * @param tile
+ * @param tilingScheme
+ */
+export function getTileWebMercatorExtent(
+  tile: QuadtreeTile,
+  tilingScheme: TilingScheme,
+): OLExtent {
+  const wgs84Extent = getTileWgs84Extent(tile, tilingScheme);
+  const min = Projection.wgs84ToMercator([wgs84Extent[0], wgs84Extent[1]]);
+  const max = Projection.wgs84ToMercator([wgs84Extent[2], wgs84Extent[3]]);
+
+  return [min[0], min[1], max[0], max[1]];
+}
+
+export function getTileBoundingRegion(
+  tile: QuadtreeTile<VcsTile>,
+  map: CesiumMap,
+): TileBoundingRegion {
+  const height =
+    map
+      .getScene()
+      ?.getHeight(
+        Rectangle.center(tile.rectangle),
+        HeightReference.CLAMP_TO_GROUND,
+      ) ?? 0;
+
+  return new TileBoundingRegion({
+    rectangle: tile.rectangle,
+    maximumHeight: height,
+    minimumHeight: height,
+  });
+}
+
+export function getDataTiles(
+  minLevel: number,
+  maxLevel: number,
+  tileProvider: TileProvider,
+): {
+  dataLevels: Set<number>;
+  dataRange: [number, number];
+} {
+  const dataLevels = new Set<number>();
+  for (let i = minLevel; i <= maxLevel; i++) {
+    const baseLevel = tileProvider.getBaseLevel(i);
+    if (baseLevel != null) {
+      const toAdd = baseLevel < minLevel ? minLevel : baseLevel;
+      dataLevels.add(toAdd);
+    }
+  }
+
+  if (dataLevels.size === 0) {
+    throw new Error('No base levels for this tile data set');
+  }
+
+  const lastDataLevel = [...dataLevels].at(-1)!;
+  return {
+    dataLevels,
+    dataRange: [minLevel, lastDataLevel > minLevel ? lastDataLevel : minLevel],
+  };
+}
+
+export function getTileHash(tile: QuadtreeTile): string {
+  return `${tile.level}/${tile.x}/${tile.y}`;
+}

package/src/layer/cesium/vcsTile/vcsVectorTile.ts

@@ -0,0 +1,149 @@
+import {
+  PrimitiveCollection,
+  QuadtreeTile,
+  TileBoundingRegion,
+} from '@vcmap-cesium/engine';
+import { getLogger } from '@vcsuite/logger';
+import { EventsKey } from 'ol/events.js';
+import { unByKey } from 'ol/Observable.js';
+import { containsCoordinate, getCenter } from 'ol/extent.js';
+import { StyleLike } from 'ol/style/Style.js';
+import VectorContext from '../vectorContext.js';
+import { vcsLayerName } from '../../layerSymbols.js';
+import {
+  getTileBoundingRegion,
+  getTileWebMercatorExtent,
+  VcsTile,
+  VcsTileOptions,
+  VcsTileState,
+  VcsTileType,
+} from './vcsTileHelpers.js';
+import CesiumMap from '../../../map/cesiumMap.js';
+import { TileProvider } from '../../../../index.js';
+import VectorProperties from '../../vectorProperties.js';
+
+export default class VcsVectorTile implements VcsTile {
+  state = VcsTileState.LOADING;
+
+  type = VcsTileType.VECTOR;
+
+  tileBoundingRegion: TileBoundingRegion;
+
+  private _tile: QuadtreeTile<VcsTile>;
+
+  private _vectorContext: VectorContext;
+
+  private _rootCollection = new PrimitiveCollection();
+
+  private _featureListeners: EventsKey[] = [];
+
+  private _map: CesiumMap;
+
+  private _tileProvider: TileProvider;
+
+  private _style: StyleLike;
+
+  private _vectorProperties: VectorProperties;
+
+  private _layerPrimitiveCollection: PrimitiveCollection;
+
+  private _isDestroyed: boolean;
+
+  constructor(tile: QuadtreeTile<VcsTile>, options: VcsTileOptions) {
+    this._tile = tile;
+    this._map = options.map;
+    this._tileProvider = options.tileProvider;
+    this._style = options.style;
+    this._vectorProperties = options.vectorProperties;
+    this._layerPrimitiveCollection = options.primitiveCollection;
+
+    this._vectorContext = new VectorContext(
+      options.map,
+      this._rootCollection,
+      options.splitDirection,
+    );
+    this._rootCollection[vcsLayerName] = options.name;
+    this._rootCollection.show = false;
+    options.primitiveCollection.add(this._rootCollection);
+
+    this.tileBoundingRegion = getTileBoundingRegion(tile, options.map);
+    this._load().catch(() => {
+      this.state = VcsTileState.FAILED;
+    });
+    this._isDestroyed = false;
+  }
+
+  private async _load(): Promise<void> {
+    this.state = VcsTileState.LOADING;
+    const scene = this._map.getScene()!;
+
+    const features = await this._tileProvider.getFeaturesForTile(
+      this._tile.x,
+      this._tile.y,
+      this._tile.level,
+    );
+    if (this._isDestroyed) {
+      return;
+    }
+    const tileWebmercator = getTileWebMercatorExtent(
+      this._tile,
+      this._tileProvider.tilingScheme,
+    );
+
+    this.state = VcsTileState.PROCESSING;
+    await Promise.all(
+      features.map(async (f) => {
+        if (this._isDestroyed) {
+          return;
+        }
+        const featureExtent = f.getGeometry()?.getExtent();
+        if (
+          featureExtent &&
+          containsCoordinate(tileWebmercator, getCenter(featureExtent))
+        ) {
+          this._featureListeners.push(
+            f.on('change', () => {
+              this._vectorContext
+                .addFeature(f, this._style, this._vectorProperties, scene)
+                .catch(() => {
+                  getLogger('VcsVectorTile').error(
+                    'failed to add changed feature',
+                  );
+                });
+            }),
+          );
+          await this._vectorContext.addFeature(
+            f,
+            this._style,
+            this._vectorProperties,
+            scene,
+          );
+        }
+      }),
+    );
+    if (this._isDestroyed) {
+      return;
+    }
+    this.state = VcsTileState.READY;
+  }
+
+  get show(): boolean {
+    return this._rootCollection.show;
+  }
+
+  set show(show: boolean) {
+    this._rootCollection.show = show;
+  }
+
+  freeResources(): void {
+    this.destroy();
+  }
+
+  destroy(): void {
+    unByKey(this._featureListeners);
+    this._isDestroyed = true;
+    this._vectorContext.destroy();
+    this._layerPrimitiveCollection.remove(this._rootCollection);
+    this._tile.data = undefined;
+  }
+}

package/src/layer/cesium/vectorCesiumImpl.ts

@@ -91,7 +91,7 @@ class VectorCesiumImpl
 
     this._olListeners.push(
       this.source.on('changefeature', (event) => {
-        this._featureChanged(event.feature as Feature).catch(() => {
+        this._featureChanged(event.feature as Feature).catch((_e) => {
           this.getLogger().error('failed to convert feature');
         });
       }),

package/src/layer/cesium/vectorTileCesiumImpl.ts

@@ -0,0 +1,91 @@
+import {
+  PrimitiveCollection,
+  QuadtreePrimitive,
+  SplitDirection,
+} from '@vcmap-cesium/engine';
+import StyleItem from '../../style/styleItem.js';
+import LayerImplementation from '../layerImplementation.js';
+import type CesiumMap from '../../map/cesiumMap.js';
+import {
+  VectorTileImplementation,
+  VectorTileImplementationOptions,
+} from '../vectorTileLayer.js';
+import { vcsLayerName } from '../layerSymbols.js';
+import VcsQuadtreeTileProvider from './vcsTile/vcsQuadtreeTileProvider.js';
+
+export default class VectorTileCesiumImpl
+  extends LayerImplementation<CesiumMap>
+  implements VectorTileImplementation
+{
+  static get className(): string {
+    return 'VectorTileCesiumImpl';
+  }
+
+  private _quadtreeProvider: VcsQuadtreeTileProvider;
+
+  private _quadtreePrimitive: QuadtreePrimitive;
+
+  private _primitiveCollection = new PrimitiveCollection();
+
+  constructor(map: CesiumMap, options: VectorTileImplementationOptions) {
+    super(map, options);
+    this._quadtreeProvider = new VcsQuadtreeTileProvider(
+      map,
+      this._primitiveCollection,
+      options,
+    );
+    this._quadtreePrimitive = new QuadtreePrimitive({
+      tileProvider: this._quadtreeProvider,
+    });
+    this._primitiveCollection.add(this._quadtreePrimitive);
+    this._primitiveCollection[vcsLayerName] = this.name;
+    this._primitiveCollection.show = false;
+  }
+
+  updateTiles(_tiles: string[], featureVisibility: boolean): void {
+    if (!featureVisibility) {
+      this._quadtreePrimitive.invalidateAllTiles(); // XXX this we can do bette
+    }
+  }
+
+  async initialize(): Promise<void> {
+    if (!this.initialized) {
+      this.map.addPrimitiveCollection(this._primitiveCollection);
+    }
+    await super.initialize();
+  }
+
+  async activate(): Promise<void> {
+    this._primitiveCollection.show = true;
+    return super.activate();
+  }
+
+  deactivate(): void {
+    this._primitiveCollection.show = false;
+    super.deactivate();
+  }
+
+  updateStyle(style: StyleItem, _silent?: boolean): void {
+    this._quadtreeProvider.updateStyle(style);
+    this._quadtreePrimitive.invalidateAllTiles();
+  }
+
+  updateSplitDirection(direction: SplitDirection): void {
+    this._quadtreeProvider.updateSplitDirection(direction);
+    this._quadtreePrimitive.invalidateAllTiles();
+  }
+
+  destroy(): void {
+    if (!this.isDestroyed) {
+      this._quadtreeProvider.destroy();
+      this._quadtreePrimitive.invalidateAllTiles();
+      if (this.map.initialized) {
+        this.map.removePrimitiveCollection(this._primitiveCollection);
+      } else {
+        this._primitiveCollection.destroy();
+      }
+    }
+
+    super.destroy();
+  }
+}

package/src/layer/cesium/wmsCesiumImpl.ts

@@ -65,10 +65,7 @@ class WmsCesiumImpl extends RasterLayerCesiumImpl {
     }
 
     const imageryProvider = new WebMapServiceImageryProvider(options);
-    const layerOptions = {
-      alpha: this.opacity,
-      splitDirection: this.splitDirection,
-    };
+    const layerOptions = this.getCesiumLayerOptions();
     return Promise.resolve(
       new CesiumImageryLayer(imageryProvider, layerOptions),
     );

package/src/layer/cesium/wmtsCesiumImpl.ts

@@ -83,10 +83,7 @@ class WmtsCesiumImpl extends RasterLayerCesiumImpl {
     options.tileMatrixLabels = this.matrixIds;
 
     const imageryProvider = new WebMapTileServiceImageryProvider(options);
-    const layerOptions = {
-      alpha: this.opacity,
-      splitDirection: this.splitDirection,
-    };
+    const layerOptions = this.getCesiumLayerOptions();
     return Promise.resolve(
       new CesiumImageryLayer(imageryProvider, layerOptions),
     );

package/src/layer/layer.ts

@@ -106,6 +106,11 @@ class Layer<
 
   private _initialized: boolean;
 
+  /**
+   * if provided, the layer will only be shown in the given MapNames.
+   * An empty array will show the layer in all configured maps.
+   * Changes require calling layer.redraw() to take effect.
+   */
   mapNames: string[];
 
   /**

package/src/layer/openStreetMapLayer.ts

@@ -1,4 +1,4 @@
-import { SplitDirection } from '@vcmap-cesium/engine';
+import { ImageryLayer, SplitDirection } from '@vcmap-cesium/engine';
 
 import { parseInteger, parseNumberRange } from '@vcsuite/parsers';
 import Layer, { type LayerOptions, SplitLayer } from './layer.js';
@@ -29,6 +29,22 @@ export type OpenStreetMapOptions = LayerOptions & {
    * @default 19
    */
   maxLevel?: number;
+
+  /**
+   * configures the visible level in the rendered map. Maps to Openlayers `minZoom` and Cesium `minimiumTerrainLevel`
+   */
+  minRenderingLevel?: number;
+
+  /**
+   * configures the visible level in the rendered map. Maps to Openlayers `maxZoom` and Cesium `maximumTerrainLevel`
+   */
+  maxRenderingLevel?: number;
+
+  /**
+   * can be used to forward options to the cesium ImageryLayer
+   * @see https://cesium.com/learn/cesiumjs/ref-doc/ImageryLayer.html#.ConstructorOptions
+   */
+  imageryLayerOptions?: ImageryLayer.ConstructorOptions;
 };
 
 /**
@@ -48,6 +64,8 @@ class OpenStreetMapLayer
       splitDirection: undefined,
       opacity: 1,
       maxLevel: 19,
+      minRenderingLevel: undefined,
+      maxRenderingLevel: undefined,
     };
   }
 
@@ -61,10 +79,30 @@ class OpenStreetMapLayer
   splitDirectionChanged: VcsEvent<SplitDirection> = new VcsEvent();
 
   /**
-   * The maximum level to load. Changing requires a redraw to take effect.
+   * The maximum level to load.
+   * Changes requires calling layer.redraw() to take effect.
    */
   maxLevel: number;
 
+  /**
+   * defines the visible level in the rendered map, maps to Openlayers `minZoom` and Cesium `minimiumTerrainLevel`.
+   * Changes requires calling layer.redraw() to take effect.
+   */
+  minRenderingLevel: number | undefined;
+
+  /**
+   * defines the visible level in the rendered map, maps to Openlayers `minZoom` and Cesium `minimiumTerrainLevel`.
+   * Changes requires calling layer.redraw() to take effect.
+   */
+  maxRenderingLevel: number | undefined;
+
+  /**
+   * can be used to forward options to the cesium ImageryLayer
+   * @see https://cesium.com/learn/cesiumjs/ref-doc/ImageryLayer.html#.ConstructorOptions
+   * Changes requires calling layer.redraw() to take effect.
+   */
+  imageryLayerOptions: ImageryLayer.ConstructorOptions | undefined;
+
   protected _supportedMaps = [CesiumMap.className, OpenlayersMap.className];
 
   constructor(options: OpenStreetMapOptions) {
@@ -86,6 +124,15 @@ class OpenStreetMapLayer
       1.0,
     );
     this.maxLevel = parseInteger(options.maxLevel, defaultOptions.maxLevel);
+    this.minRenderingLevel = parseInteger(
+      options.minRenderingLevel,
+      defaultOptions.minRenderingLevel,
+    );
+    this.maxRenderingLevel = parseInteger(
+      options.maxRenderingLevel,
+      defaultOptions.maxRenderingLevel,
+    );
+    this.imageryLayerOptions = structuredClone(options.imageryLayerOptions);
   }
 
   get splitDirection(): SplitDirection {
@@ -126,7 +173,10 @@ class OpenStreetMapLayer
       splitDirection: this.splitDirection,
       minLevel: 0,
       maxLevel: this.maxLevel,
+      minRenderingLevel: this.minRenderingLevel,
+      maxRenderingLevel: this.maxRenderingLevel,
       tilingSchema: TilingScheme.GEOGRAPHIC,
+      imageryLayerOptions: this.imageryLayerOptions,
     };
   }
 
@@ -164,11 +214,23 @@ class OpenStreetMapLayer
       config.maxLevel = this.maxLevel;
     }
 
+    if (this.minRenderingLevel !== defaultOptions.minRenderingLevel) {
+      config.minRenderingLevel = this.minRenderingLevel;
+    }
+
+    if (this.maxRenderingLevel !== defaultOptions.maxRenderingLevel) {
+      config.maxRenderingLevel = this.maxRenderingLevel;
+    }
+
     if (this._splitDirection !== SplitDirection.NONE) {
       config.splitDirection =
         this._splitDirection === SplitDirection.RIGHT ? 'right' : 'left';
     }
 
+    if (this.imageryLayerOptions !== defaultOptions.imageryLayerOptions) {
+      config.imageryLayerOptions = structuredClone(this.imageryLayerOptions);
+    }
+
     return config;
   }
 

package/src/layer/openlayers/openStreetMapOpenlayersImpl.ts

@@ -16,6 +16,8 @@ class OpenStreetMapOpenlayersImpl extends RasterLayerOpenlayersImpl {
       source: new OSM({
         maxZoom: this.maxLevel,
       }),
+      minZoom: this.minRenderingLevel,
+      maxZoom: this.maxRenderingLevel,
     });
   }
 }

package/src/layer/openlayers/rasterLayerOpenlayersImpl.ts

@@ -19,6 +19,10 @@ class RasterLayerOpenlayersImpl
 
   maxLevel: number;
 
+  minRenderingLevel: number | undefined;
+
+  maxRenderingLevel: number | undefined;
+
   tilingSchema: TilingScheme;
 
   extent: Extent;
@@ -29,6 +33,8 @@ class RasterLayerOpenlayersImpl
     super(map, options);
     this.minLevel = options.minLevel;
     this.maxLevel = options.maxLevel;
+    this.minRenderingLevel = options.minRenderingLevel;
+    this.maxRenderingLevel = options.maxRenderingLevel;
     this.tilingSchema = options.tilingSchema;
     this.extent = options.extent as Extent;
     this.opacity = options.opacity;

package/src/layer/openlayers/singleImageOpenlayersImpl.ts

@@ -64,6 +64,8 @@ class SingleImageOpenlayersImpl extends RasterLayerOpenlayersImpl {
     return new ImageLayer({
       source: new ImageStatic(options),
       opacity: this.opacity,
+      minZoom: this.minRenderingLevel,
+      maxZoom: this.maxRenderingLevel,
     });
   }
 }

package/src/layer/openlayers/tmsOpenlayersImpl.ts

@@ -60,6 +60,8 @@ class TmsOpenlayersImpl extends RasterLayerOpenlayersImpl {
     const tileOptions: TileOptions<XYZ> = {
       source: new XYZ(sourceOptions),
       opacity: this.opacity,
+      minZoom: this.minRenderingLevel,
+      maxZoom: this.maxRenderingLevel,
     };
     if (this.extent && this.extent.isValid()) {
       tileOptions.extent =

package/src/layer/openlayers/vectorTileOpenlayersImpl.ts

@@ -32,13 +32,6 @@ class VectorTileOpenlayersImpl
 
   tileSize: Size;
 
-  /**
-   * tiles to update on next TileRedraw
-   */
-  private _tilesToUpdate: Set<string> = new Set();
-
-  private _reloadTimeout: number | undefined = undefined;
-
   minLevel: number | undefined;
 
   maxLevel: number | undefined;
@@ -107,45 +100,18 @@ class VectorTileOpenlayersImpl
   }
 
   /**
-   * rerenders the specified tiles
-   * rendering happens async
+   * refreshes the openlayers Layer, which will redraw the scene, seems to magically work
    */
   updateTiles(tileIds: string[]): void {
     if (tileIds.length > 0) {
-      tileIds.forEach((tileId) => {
-        this._tilesToUpdate.add(tileId);
-      });
-      if (this.source) {
-        if (!this._reloadTimeout) {
-          this._reloadTimeout = window.setTimeout(() => {
-            this._tilesToUpdate.forEach((tileId) => {
-              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-              // @ts-ignore
-              const tCache = this.source.tileCache;
-              if (tCache.containsKey(tileId)) {
-                // change of key of tile (will trigger a reload)
-                const tile = tCache.get(tileId) as VectorTile<Feature>;
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
-                tile.key = false;
-              }
-            });
-            this.source!.changed();
-            this._tilesToUpdate.clear();
-            this._reloadTimeout = undefined;
-          }, 0);
-        }
-      }
+      this.olLayer?.changed();
     }
   }
 
   // eslint-disable-next-line no-unused-vars
   updateStyle(_style: StyleItem, _silent?: boolean): void {
     if (this.initialized) {
-      window.clearTimeout(this._reloadTimeout);
-      this._reloadTimeout = undefined;
-      this._tilesToUpdate.clear();
-      this.source!.refresh();
+      this.olLayer?.changed();
     }
   }
 

package/src/layer/openlayers/wmsOpenlayersImpl.ts

@@ -46,6 +46,8 @@ class WmsOpenlayersImpl extends RasterLayerOpenlayersImpl {
           headers: this.headers,
         }),
         opacity: this.opacity,
+        minZoom: this.minRenderingLevel,
+        maxZoom: this.maxRenderingLevel,
       });
     }
     return new Tile({
@@ -62,6 +64,8 @@ class WmsOpenlayersImpl extends RasterLayerOpenlayersImpl {
         headers: this.headers,
       }),
       opacity: this.opacity,
+      minZoom: this.minRenderingLevel,
+      maxZoom: this.maxRenderingLevel,
     });
   }
 }

package/src/layer/openlayers/wmtsOpenlayersImpl.ts

@@ -124,6 +124,8 @@ class WmtsOpenlayersImpl extends RasterLayerOpenlayersImpl {
     Object.assign(wmtsOptions, this.openlayersOptions);
     return new Tile({
       opacity: this.opacity,
+      minZoom: this.minRenderingLevel,
+      maxZoom: this.maxRenderingLevel,
       source: new WMTSSource(wmtsOptions),
     });
   }