@vcmap/core 6.0.0-rc.9 → 6.0.1

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

package/src/layer/rasterLayer.ts

@@ -3,6 +3,7 @@ import {
   WebMercatorTilingScheme,
   GeographicTilingScheme,
   Cartographic,
+  ImageryLayer,
 } from '@vcmap-cesium/engine';
 import {
   getBottomLeft,
@@ -30,15 +31,26 @@ import VcsMap from '../map/vcsMap.js';
 
 export type RasterLayerOptions = LayerOptions & {
   /**
-   * minLevel to show (if not specified, calculated from extent)
+   * minLevel of the datasource (if not specified, calculated from extent)
    * @default 0
    */
   minLevel?: number;
   /**
-   * maxLevel to show
+   * maxlevel the datasource can provide the data.
    * @default 18
    */
   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;
+
   tilingSchema?: TilingScheme;
   /**
    * opacity between 0 and 1
@@ -49,15 +61,24 @@ export type RasterLayerOptions = LayerOptions & {
    * either 'left' or 'right', none if omitted
    */
   splitDirection?: string;
+
+  /**
+   * can be used to forward options to the cesium ImageryLayer
+   * @see https://cesium.com/learn/cesiumjs/ref-doc/ImageryLayer.html#.ConstructorOptions
+   */
+  imageryLayerOptions?: ImageryLayer.ConstructorOptions;
 };
 
 export type RasterLayerImplementationOptions = LayerImplementationOptions & {
   minLevel: number;
   maxLevel: number;
+  minRenderingLevel?: number;
+  maxRenderingLevel?: number;
   tilingSchema: TilingScheme;
   opacity: number;
   extent?: Extent;
   splitDirection: SplitDirection;
+  imageryLayerOptions?: ImageryLayer.ConstructorOptions;
 };
 
 export interface RasterLayerImplementation {
@@ -166,9 +187,12 @@ class RasterLayer<
       ...Layer.getDefaultOptions(),
       minLevel: 0,
       maxLevel: 18,
+      minRenderingLevel: undefined,
+      maxRenderingLevel: undefined,
       tilingSchema: TilingScheme.GEOGRAPHIC,
       opacity: 1,
       splitDirection: undefined,
+      imageryLayerOptions: undefined,
     };
   }
 
@@ -176,19 +200,47 @@ class RasterLayer<
 
   /**
    * The {@link TilingScheme} of this layer
+   * Changes require calling layer.redraw() to take effect.
    */
   tilingSchema: TilingScheme;
 
+  /**
+   * The maximum level to load.
+   * Changes require calling layer.redraw() to take effect.
+   */
   maxLevel: number;
 
   private _minLevel: number;
 
+  /**
+   * The minimum level to load.
+   * Changes require calling layer.redraw() to take effect.
+   */
   minLevel: 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;
+
   private _opacity: number;
 
   private _splitDirection: SplitDirection = SplitDirection.NONE;
 
+  /**
+   * 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;
+
   /**
    * raised if the split direction changes, is passed the split direction as its only argument
    */
@@ -216,6 +268,16 @@ class RasterLayer<
       this.maxLevel,
       this._minLevel,
     );
+
+    this.minRenderingLevel = parseInteger(
+      options.minRenderingLevel,
+      defaultOptions.minRenderingLevel,
+    );
+    this.maxRenderingLevel = parseInteger(
+      options.maxRenderingLevel,
+      defaultOptions.maxRenderingLevel,
+    );
+
     this._opacity = parseNumberRange(
       options.opacity,
       defaultOptions.opacity as number,
@@ -229,6 +291,8 @@ class RasterLayer<
           ? SplitDirection.LEFT
           : SplitDirection.RIGHT;
     }
+
+    this.imageryLayerOptions = structuredClone(options.imageryLayerOptions);
   }
 
   /**
@@ -270,9 +334,12 @@ class RasterLayer<
       ...super.getImplementationOptions(),
       minLevel: this.minLevel,
       maxLevel: this.maxLevel,
+      minRenderingLevel: this.minRenderingLevel,
+      maxRenderingLevel: this.maxRenderingLevel,
       tilingSchema: this.tilingSchema,
       opacity: this.opacity,
       splitDirection: this._splitDirection,
+      imageryLayerOptions: this.imageryLayerOptions,
     };
 
     if (this.extent?.isValid()) {
@@ -297,6 +364,14 @@ class RasterLayer<
       config.maxLevel = this.maxLevel;
     }
 
+    if (this.minRenderingLevel !== defaultOptions.minRenderingLevel) {
+      config.minRenderingLevel = this.minRenderingLevel;
+    }
+
+    if (this.maxRenderingLevel !== defaultOptions.maxRenderingLevel) {
+      config.maxRenderingLevel = this.maxRenderingLevel;
+    }
+
     if (this.tilingSchema !== defaultOptions.tilingSchema) {
       config.tilingSchema = this.tilingSchema;
     }
@@ -310,6 +385,10 @@ class RasterLayer<
         this._splitDirection === SplitDirection.RIGHT ? 'right' : 'left';
     }
 
+    if (this.imageryLayerOptions !== defaultOptions.imageryLayerOptions) {
+      config.imageryLayerOptions = structuredClone(this.imageryLayerOptions);
+    }
+
     return config;
   }
 

package/src/layer/tileProvider/mvtTileProvider.ts

@@ -15,10 +15,6 @@ export type MVTTileProviderOptions = TileProviderOptions & {
    * url to pbf tiled datasource {x}, {y}, {z} are placeholders for x, y, zoom
    */
   url: string;
-  /**
-   * if property exists will be used to set the ID of the feature
-   */
-  idProperty?: string;
 };
 
 /**
@@ -33,14 +29,11 @@ class MVTTileProvider extends TileProvider {
     return {
       ...TileProvider.getDefaultOptions(),
       url: '',
-      idProperty: undefined,
     };
   }
 
   url: string;
 
-  idProperty: string | undefined;
-
   private _MVTFormat = new MVT<Feature>({ featureClass: Feature });
 
   constructor(options: MVTTileProviderOptions) {
@@ -48,7 +41,6 @@ class MVTTileProvider extends TileProvider {
     super(options);
 
     this.url = options.url || defaultOptions.url;
-    this.idProperty = options.idProperty || defaultOptions.idProperty;
   }
 
   get locale(): string {
@@ -84,12 +76,6 @@ class MVTTileProvider extends TileProvider {
     const sx = (extent[2] - extent[0]) / 4096;
     const sy = -((extent[3] - extent[1]) / 4096);
     features.forEach((feature) => {
-      const idToUse = this.idProperty
-        ? (feature.get(this.idProperty) as string)
-        : null;
-      if (idToUse != null) {
-        feature.setId(String(idToUse));
-      }
       const geom = feature.getGeometry() as Geometry;
       const flatCoordinates = geom.getFlatCoordinates();
       const flatCoordinatesLength = flatCoordinates.length;
@@ -112,10 +98,6 @@ class MVTTileProvider extends TileProvider {
     if (this.url) {
       config.url = this.url;
     }
-
-    if (this.idProperty) {
-      config.idProperty = this.idProperty;
-    }
     return config as MVTTileProviderOptions;
   }
 }

package/src/layer/tileProvider/staticFeatureTileProvider.ts

@@ -0,0 +1,61 @@
+import { Feature } from 'ol';
+import TileProvider, { TileProviderOptions } from './tileProvider.js';
+
+export type StaticFeatureTileProviderOptions = Omit<
+  TileProviderOptions,
+  'baseLevels'
+> & {
+  features: Feature[];
+};
+
+export default class StaticFeatureTileProvider extends TileProvider {
+  static get className(): string {
+    return 'StaticFeatureTileProvider';
+  }
+
+  static getDefaultOptions(): StaticFeatureTileProviderOptions {
+    return {
+      ...TileProvider.getDefaultOptions(),
+      features: [],
+    };
+  }
+
+  private _features: Feature[];
+
+  constructor(options: StaticFeatureTileProviderOptions) {
+    const defaultOptions = StaticFeatureTileProvider.getDefaultOptions();
+    super({ ...options, baseLevels: [0] });
+    this._features = options.features || defaultOptions.features;
+  }
+
+  // eslint-disable-next-line no-unused-vars
+  loader(
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _x: number,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _y: number,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _z: number,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _headers?: Record<string, string>,
+  ): Promise<Feature[]> {
+    return Promise.resolve(this._features);
+  }
+
+  toJSON(): StaticFeatureTileProviderOptions {
+    const config: TileProviderOptions = super.toJSON();
+
+    delete config.baseLevels;
+    const staticFeatureConfig: StaticFeatureTileProviderOptions = {
+      ...structuredClone(config),
+      features: this._features,
+    };
+
+    return staticFeatureConfig;
+  }
+
+  destroy(): void {
+    this._features = [];
+    super.destroy();
+  }
+}

package/src/layer/tileProvider/tileProvider.ts

@@ -40,7 +40,8 @@ export type TileProviderRtree = RBush<TileProviderRTreeEntry>;
 /**
  * resolutions to levels
  */
-export const mercatorResolutionsToLevel = new Array(25);
+// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+export const mercatorResolutionsToLevel: Array<number> = new Array(25);
 for (let i = 0; i < mercatorResolutionsToLevel.length; i++) {
   mercatorResolutionsToLevel[i] = (20037508.3427892 * 2) / 256 / 2 ** (i + 1);
 }
@@ -85,6 +86,11 @@ export type TileProviderOptions = VcsObjectOptions & {
    * allows aggregation of tiles if requested minLevel is lower than provided baseLevels ( if true, allows for aggregating up to two levels (16 child tiles) into a tile)
    */
   allowTileAggregation?: boolean;
+
+  /**
+   * if property exists will be used to set the ID of the feature
+   */
+  idProperty?: string;
 };
 
 export type TileLoadedEvent = {
@@ -109,6 +115,7 @@ class TileProvider extends VcsObject {
       baseLevels: [15],
       trackFeaturesToTiles: true,
       allowTileAggregation: true,
+      idProperty: undefined,
     };
   }
 
@@ -147,6 +154,8 @@ class TileProvider extends VcsObject {
 
   private _locale = 'en';
 
+  private _idProperty: string | undefined;
+
   constructor(options: TileProviderOptions) {
     super(options);
     const defaultOptions = TileProvider.getDefaultOptions();
@@ -176,6 +185,8 @@ class TileProvider extends VcsObject {
       options.allowTileAggregation,
       defaultOptions.allowTileAggregation,
     );
+
+    this._idProperty = options.idProperty || defaultOptions.idProperty;
   }
 
   /**
@@ -185,6 +196,10 @@ class TileProvider extends VcsObject {
     return this._tileCacheSize;
   }
 
+  get idProperty(): string | undefined {
+    return this._idProperty;
+  }
+
   get locale(): string {
     return this._locale;
   }
@@ -258,6 +273,12 @@ class TileProvider extends VcsObject {
     const rtreePromise: Promise<TileProviderRtree> = featuresPromise
       .then((features) => {
         features.forEach((feature) => {
+          const idToUse = this.idProperty
+            ? (feature.get(this.idProperty) as string)
+            : null;
+          if (idToUse != null) {
+            feature.setId(String(idToUse));
+          }
           if (!feature.getId()) {
             feature.setId(uuidv4());
           }
@@ -584,7 +605,7 @@ class TileProvider extends VcsObject {
    * return fetch.get(url)
    *  .then(response => response.json())
    *  .then((data) => {
-   *     const { features } = GeoJSONparseGeoJSON(data.data, { dynamicStyle: true });
+   *     const { features } = parseGeoJSON(data.data, { dynamicStyle: true });
    *     return features;
    *   });
    */
@@ -625,6 +646,10 @@ class TileProvider extends VcsObject {
       config.allowTileAggregation = this.allowTileAggregation;
     }
 
+    if (this.idProperty) {
+      config.idProperty = this.idProperty;
+    }
+
     return config;
   }
 

package/src/layer/vectorLayer.ts

@@ -288,7 +288,7 @@ class VectorLayer
       | DeclarativeStyleItemOptions
       | VectorStyleItemOptions
       | StyleItem,
-    defaultStyle?: VectorStyleItem,
+    defaultStyle?: StyleItem,
   ): StyleItem {
     return super.getStyleOrDefaultStyle(
       styleOptions,

package/src/layer/vectorTileLayer.ts

@@ -1,8 +1,11 @@
 import Style, { type StyleFunction } from 'ol/style/Style.js';
 import type { Feature } from 'ol/index.js';
 import type { Size } from 'ol/size.js';
-
-import { parseBoolean, parseInteger } from '@vcsuite/parsers';
+import {
+  parseBoolean,
+  parseStringLiteral,
+  parseInteger,
+} from '@vcsuite/parsers';
 import CesiumMap from '../map/cesiumMap.js';
 import VectorRasterTileCesiumImpl from './cesium/vectorRasterTileCesiumImpl.js';
 import OpenlayersMap from '../map/openlayersMap.js';
@@ -45,6 +48,7 @@ import GlobalHider from './globalHider.js';
 import Extent from '../util/extent.js';
 import VcsMap from '../map/vcsMap.js';
 import StyleItem from '../style/styleItem.js';
+import VectorTileCesiumImpl from './cesium/vectorTileCesiumImpl.js';
 
 /**
  * synchronizes featureVisibility Symbols on the feature;
@@ -55,24 +59,38 @@ function synchronizeFeatureVisibility(
   feature: Feature,
 ): void {
   const featureId = feature.getId() as string | number;
+  let changed = false;
   if (featureVisibility.hiddenObjects[featureId]) {
     feature[hidden] = true;
+    changed = true;
   } else if (feature[hidden]) {
     delete feature[hidden];
+    changed = true;
   }
   if (featureVisibility.highlightedObjects[featureId]) {
     feature[highlighted] =
       featureVisibility.highlightedObjects[featureId].style;
+    changed = true;
   } else if (feature[highlighted]) {
     delete feature[highlighted];
+    changed = true;
   }
   if (globalHider?.hiddenObjects[featureId]) {
     feature[globalHidden] = true;
+    changed = true;
   } else if (feature[globalHidden]) {
     delete feature[globalHidden];
+    changed = true;
+  }
+
+  if (changed) {
+    feature.changed();
   }
 }
 
+const vectorTileRenderers = ['image', 'primitive'] as const;
+export type VectorTileRenderer = (typeof vectorTileRenderers)[number];
+
 export type VectorTileOptions = FeatureLayerOptions & {
   tileProvider?: TileProviderOptions | TileProvider;
   highlightStyle?: VectorStyleItemOptions | VectorStyleItem;
@@ -89,6 +107,8 @@ export type VectorTileOptions = FeatureLayerOptions & {
    * used to forward declutter option to openlayers VectorTileLayer
    */
   declutter?: boolean;
+  debug?: boolean;
+  renderer?: VectorTileRenderer;
 };
 
 export type VectorTileImplementationOptions =
@@ -99,10 +119,12 @@ export type VectorTileImplementationOptions =
     maxLevel: number;
     extent?: Extent;
     declutter: boolean;
+    vectorProperties: VectorProperties;
+    debug?: boolean;
   };
 
 export interface VectorTileImplementation extends FeatureLayerImplementation {
-  updateTiles(tiles: string[]): void;
+  updateTiles(tiles: string[], featureVisibilityChange: boolean): void;
 }
 
 /**
@@ -110,7 +132,7 @@ export interface VectorTileImplementation extends FeatureLayerImplementation {
  * @group Layer
  */
 class VectorTileLayer extends FeatureLayer<
-  VectorTileOpenlayersImpl | VectorRasterTileCesiumImpl
+  VectorTileOpenlayersImpl | VectorRasterTileCesiumImpl | VectorTileCesiumImpl
 > {
   static get className(): string {
     return 'VectorTileLayer';
@@ -127,6 +149,8 @@ class VectorTileLayer extends FeatureLayer<
       minLevel: undefined,
       maxLevel: undefined,
       declutter: true,
+      debug: false,
+      renderer: 'image',
     };
   }
 
@@ -160,6 +184,10 @@ class VectorTileLayer extends FeatureLayer<
    */
   private _styleZIndex = 0;
 
+  private _debug = false;
+
+  private _renderer: VectorTileRenderer;
+
   /**
    * @param  options
    */
@@ -197,6 +225,12 @@ class VectorTileLayer extends FeatureLayer<
     this._maxLevel = parseInteger(options.maxLevel, defaultOptions.maxLevel);
     this._minLevel = parseInteger(options.minLevel, defaultOptions.minLevel);
     this._declutter = parseBoolean(options.declutter, defaultOptions.declutter);
+    this._debug = parseBoolean(options.debug, defaultOptions.debug);
+    this._renderer = parseStringLiteral(
+      options.renderer,
+      vectorTileRenderers,
+      defaultOptions.renderer,
+    );
   }
 
   /**
@@ -224,12 +258,16 @@ class VectorTileLayer extends FeatureLayer<
           // eslint-disable-next-line no-void
           void this.reload();
         });
-      this.featureProvider = new TileProviderFeatureProvider(this.name, {
-        // XXX this overwrites
-        style: this.style,
-        tileProvider: this.tileProvider,
-        vectorProperties: this.vectorProperties,
-      });
+
+      if (this._renderer === 'image') {
+        // primitives dont need a feature provider
+        this.featureProvider = new TileProviderFeatureProvider(this.name, {
+          // XXX this overwrites
+          style: this.style,
+          tileProvider: this.tileProvider,
+          vectorProperties: this.vectorProperties,
+        });
+      }
     }
     await super.initialize();
   }
@@ -306,11 +344,12 @@ class VectorTileLayer extends FeatureLayer<
                 } else if (action === FeatureVisibilityAction.SHOW) {
                   delete feature[hidden];
                 }
+                feature.changed();
               }
             });
           }
         });
-        this.updateTiles([...tileIdsChanged]);
+        this._updateTiles([...tileIdsChanged], true);
       }),
     ];
 
@@ -338,24 +377,32 @@ class VectorTileLayer extends FeatureLayer<
                   } else if (action === FeatureVisibilityAction.SHOW) {
                     delete feature[globalHidden];
                   }
+                  feature.changed();
                 }
               });
             }
           });
-          this.updateTiles([...tileIdsChanged]);
+          this._updateTiles([...tileIdsChanged], true);
         }),
       );
     }
   }
 
+  private _updateTiles(
+    tileIds: string[],
+    featureVisibilityChange?: boolean,
+  ): void {
+    this.getImplementations().forEach((impl) => {
+      impl.updateTiles(tileIds, !!featureVisibilityChange);
+    });
+  }
+
   /**
    * rerenders the specified tiles
    * rendering happens async
    */
   updateTiles(tileIds: string[]): void {
-    this.getImplementations().forEach((impl) => {
-      impl.updateTiles(tileIds);
-    });
+    this._updateTiles(tileIds);
   }
 
   /**
@@ -388,15 +435,23 @@ class VectorTileLayer extends FeatureLayer<
       maxLevel: this._maxLevel,
       extent: this.extent ?? new Extent(),
       declutter: this._declutter,
+      vectorProperties: this.vectorProperties,
+      debug: this._debug,
     };
   }
 
   createImplementationsForMap(
     map: VcsMap,
-  ): (VectorRasterTileCesiumImpl | VectorTileOpenlayersImpl)[] {
+  ): (
+    | VectorTileCesiumImpl
+    | VectorRasterTileCesiumImpl
+    | VectorTileOpenlayersImpl
+  )[] {
     if (map instanceof CesiumMap) {
       return [
-        new VectorRasterTileCesiumImpl(map, this.getImplementationOptions()),
+        this._renderer === 'image'
+          ? new VectorRasterTileCesiumImpl(map, this.getImplementationOptions())
+          : new VectorTileCesiumImpl(map, this.getImplementationOptions()),
       ];
     }