@vcmap/core 6.0.0-rc.8 → 6.0.0

package/src/layer/cesium/vectorContext.ts

@@ -31,6 +31,36 @@ export function setReferenceForPicking(
   primitive.olFeature = feature;
 }
 
+function getIndexOfPrimitive(
+  item: PrimitiveType,
+  collection: PrimitiveCollection,
+): number {
+  const { length } = collection;
+  for (let i = 0; i < length; i++) {
+    const p = collection.get(i) as PrimitiveType;
+    if (p === item) {
+      return i;
+    }
+  }
+  return -1;
+}
+
+function addPrimitiveAtIndex(
+  type: 'scaled' | 'primitive',
+  item: PrimitiveType,
+  collection: PrimitiveCollection,
+  indices: ConvertedIndices,
+): PrimitiveType {
+  let index = indices[type];
+  if (index != null) {
+    if (index > collection.length) {
+      index = undefined;
+    }
+  }
+
+  return collection.add(item, index) as PrimitiveType;
+}
+
 /**
  * Sets splitDirection on primitives. Currently only Model primitives support splitting.
  */
@@ -106,6 +136,10 @@ export interface CesiumVectorContext {
   clear(): void;
 }
 
+type ConvertedItemIndex = { type: 'primitive' | 'scaled'; index: number };
+
+type ConvertedIndices = { primitive?: number; scaled?: number };
+
 export default class VectorContext implements CesiumVectorContext {
   primitives = new PrimitiveCollection();
 
@@ -115,9 +149,13 @@ export default class VectorContext implements CesiumVectorContext {
 
   labels: LabelCollection;
 
-  private _featureItems = new Map<Feature, (() => void)[]>();
+  private _featureItems = new Map<
+    Feature,
+    (() => ConvertedItemIndex | void)[]
+  >();
 
-  private _convertingFeatures: Map<Feature, () => void> = new Map();
+  private _convertingFeatures: Map<Feature, (replace: boolean) => void> =
+    new Map();
 
   splitDirection: SplitDirection;
 
@@ -157,26 +195,63 @@ export default class VectorContext implements CesiumVectorContext {
     feature: Feature,
     allowPicking: boolean,
     items: ConvertedItem[],
+    indices: ConvertedIndices,
   ): void {
     const removeItems = items
       .map((item) => {
         let instance: PrimitiveType | Label | Billboard | undefined;
-        let removeItem: (() => void) | undefined;
+        let removeItem: (() => ConvertedItemIndex | void) | undefined;
         if (item.type === 'primitive') {
           if (item.autoScale) {
-            instance = this.scaledPrimitives.add(item.item) as PrimitiveType;
+            instance = addPrimitiveAtIndex(
+              'scaled',
+              item.item,
+              this.scaledPrimitives,
+              indices,
+            );
+
             if (instance) {
-              removeItem = (): void => {
-                this._scaledDirty.value =
-                  this.scaledPrimitives.remove(instance);
+              removeItem = (): ConvertedItemIndex | undefined => {
+                const currentIndex = getIndexOfPrimitive(
+                  instance as PrimitiveType,
+                  this.scaledPrimitives,
+                );
+                if (currentIndex > -1) {
+                  this._scaledDirty.value =
+                    this.scaledPrimitives.remove(instance);
+
+                  return {
+                    type: 'scaled',
+                    index: currentIndex,
+                  };
+                }
+                return undefined;
               };
               this._scaledDirty.value = true;
             }
           } else {
-            instance = this.primitives.add(item.item) as PrimitiveType;
+            instance = addPrimitiveAtIndex(
+              'primitive',
+              item.item,
+              this.primitives,
+              indices,
+            );
+
             if (instance) {
-              removeItem = (): void => {
-                this.primitives.remove(instance);
+              removeItem = (): ConvertedItemIndex | undefined => {
+                const currentIndex = getIndexOfPrimitive(
+                  instance as PrimitiveType,
+                  this.primitives,
+                );
+
+                if (currentIndex > -1) {
+                  this.primitives.remove(instance);
+                  return {
+                    type: 'primitive',
+                    index: currentIndex,
+                  };
+                }
+                return undefined;
               };
             }
           }
@@ -211,7 +286,7 @@ export default class VectorContext implements CesiumVectorContext {
         }
         return removeItem;
       })
-      .filter((i): i is () => void => i != null);
+      .filter((i) => i != null);
 
     this._featureItems.set(feature, removeItems);
   }
@@ -222,10 +297,15 @@ export default class VectorContext implements CesiumVectorContext {
     vectorProperties: VectorProperties,
     scene: Scene,
   ): Promise<void> {
-    this._convertingFeatures.get(feature)?.();
+    this._convertingFeatures.get(feature)?.(true);
     let deleted = false;
-    this._convertingFeatures.set(feature, () => {
-      deleted = true;
+    let replaced = false;
+    this._convertingFeatures.set(feature, (isReplacement?: boolean) => {
+      if (isReplacement) {
+        replaced = true;
+      } else {
+        deleted = true;
+      }
     });
 
     const convertedItems = await convert(
@@ -235,7 +315,32 @@ export default class VectorContext implements CesiumVectorContext {
       scene,
     );
 
-    this._featureItems.get(feature)?.forEach((removeItem) => removeItem());
+    if (replaced) {
+      convertedItems.forEach((item) => {
+        if (item.type === 'primitive') {
+          item.item.destroy();
+        }
+      });
+      return;
+    }
+
+    const convertedIndices: ConvertedIndices =
+      this._featureItems
+        .get(feature)
+        ?.map((removeItem) => removeItem())
+        ?.filter((i) => i != null)
+        ?.reduce((items, current) => {
+          const minIndex = items[current.type];
+          if (minIndex != null) {
+            items[current.type] =
+              current.index != null && current.index < minIndex
+                ? current.index
+                : items[current.type];
+          } else {
+            items[current.type] = current.index;
+          }
+          return items;
+        }, {} as ConvertedIndices) ?? {};
     this._featureItems.delete(feature);
 
     if (deleted) {
@@ -249,12 +354,13 @@ export default class VectorContext implements CesiumVectorContext {
         feature,
         vectorProperties.getAllowPicking(feature),
         convertedItems,
+        convertedIndices,
       );
     }
   }
 
   removeFeature(feature: Feature): void {
-    this._convertingFeatures.get(feature)?.();
+    this._convertingFeatures.get(feature)?.(false);
     this._convertingFeatures.delete(feature);
     this._featureItems.get(feature)?.forEach((removeItem) => removeItem());
     this._featureItems.delete(feature);
@@ -275,7 +381,7 @@ export default class VectorContext implements CesiumVectorContext {
     this.labels.removeAll();
     this._featureItems.clear();
     this._convertingFeatures.forEach((destroy) => {
-      destroy();
+      destroy(true);
     });
     this._convertingFeatures.clear();
   }
@@ -294,7 +400,7 @@ export default class VectorContext implements CesiumVectorContext {
     // @ts-ignore
     this._rootCollection = null;
     this._convertingFeatures.forEach((destroy) => {
-      destroy();
+      destroy(true);
     });
     this._convertingFeatures.clear();
     this._featureItems.clear();

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),
     });
   }

package/src/layer/pointCloudLayer.ts

@@ -6,6 +6,7 @@ import CesiumTilesetLayer, {
 } from './cesiumTilesetLayer.js';
 import DeclarativeStyleItem, {
   DeclarativeStyleItemOptions,
+  defaultDeclarativeStyle,
 } from '../style/declarativeStyleItem.js';
 import VectorStyleItem, {
   VectorStyleItemOptions,
@@ -20,8 +21,6 @@ export type PointCloudOptions = CesiumTilesetOptions & {
   pointSize?: number | string;
 };
 
-export const defaultPointCloudStyle = new DeclarativeStyleItem({});
-
 /**
  * represents a specific PointCloudLayer layer for cesium.
  * <h3>Config Parameter</h3>
@@ -71,7 +70,7 @@ class PointCloudLayer extends CesiumTilesetLayer {
   ): StyleItem {
     return super.getStyleOrDefaultStyle(
       styleOptions,
-      defaultStyle || defaultPointCloudStyle,
+      defaultStyle || defaultDeclarativeStyle,
     );
   }