@vcmap/core 6.3.0-rc.1 → 6.3.0-rc.2

package/src/layer/cesium/vectorRasterTileCesiumImpl.ts

@@ -33,8 +33,14 @@ class VectorRasterTileCesiumImpl extends RasterLayerCesiumImpl {
   imageryProvider: undefined | VectorTileImageryProvider = undefined;
 
   constructor(map: CesiumMap, options: VectorTileImplementationOptions) {
+    const minRenderingLevel = options.minLevel;
+    const maxRenderingLevel = options.maxLevel;
     const rasterLayerOptions: RasterLayerImplementationOptions = {
+      maxLevel: 25,
+      minLevel: 0,
       ...options,
+      minRenderingLevel,
+      maxRenderingLevel,
       tilingSchema: TilingScheme.MERCATOR,
       opacity: 1,
     };
@@ -50,12 +56,7 @@ class VectorRasterTileCesiumImpl extends RasterLayerCesiumImpl {
       headers: this.headers,
     });
 
-    const layerOptions: CesiumImageryLayer.ConstructorOptions = {
-      alpha: this.opacity,
-      splitDirection: this.splitDirection,
-      minimumTerrainLevel: this.minLevel,
-      maximumTerrainLevel: this.maxLevel,
-    };
+    const layerOptions = this.getCesiumLayerOptions();
     if (this.extent && this.extent.isValid()) {
       const extent = this.extent.getCoordinatesInProjection(wgs84Projection);
       layerOptions.rectangle = Rectangle.fromDegrees(

package/src/layer/cesium/vectorTileImageryProvider.ts

@@ -17,9 +17,9 @@ import type { Feature } from 'ol/index.js';
 // eslint-disable-next-line import/no-named-default
 import type { default as Style, StyleFunction } from 'ol/style/Style.js';
 import type TileProvider from '../tileProvider/tileProvider.js';
-import { rectangleToExtent } from '../tileProvider/tileProvider.js';
 import { wgs84ToMercatorTransformer } from '../../util/projection.js';
 import CanvasTileRenderer from '../../ol/render/canvas/canvasTileRenderer.js';
+import { rectangleToMercatorExtent } from '../../util/math.js';
 
 export function toContext(
   extent: Extent,
@@ -222,7 +222,7 @@ class VectorTileImageryProvider {
       y,
       level,
     );
-    const extent = rectangleToExtent(rectangle);
+    const extent = rectangleToMercatorExtent(rectangle);
     const center = Rectangle.center(rectangle);
     return getCanvasFromFeatures(features, extent, center, this._tileSize);
   }

package/src/layer/cesiumTilesetLayer.ts

@@ -4,7 +4,7 @@ import {
   type CustomShader,
   Matrix4,
 } from '@vcmap-cesium/engine';
-import { check, maybe } from '@vcsuite/check';
+import { check, is, maybe, oneOf } from '@vcsuite/check';
 import { parseInteger } from '@vcsuite/parsers';
 import type { Coordinate } from 'ol/coordinate.js';
 import type { VectorStyleItemOptions } from '../style/vectorStyleItem.js';
@@ -25,6 +25,12 @@ import type VcsMap from '../map/vcsMap.js';
 import { cesiumColorToColor, getStringColor } from '../style/styleHelpers.js';
 import PanoramaMap from '../map/panoramaMap.js';
 import BaseCesiumMap from '../map/baseCesiumMap.js';
+import AbstractAttributeProvider, {
+  type AbstractAttributeProviderOptions,
+  type AttributeProvider,
+} from '../featureProvider/abstractAttributeProvider.js';
+import { getProviderForOption } from '../featureProvider/featureProviderFactory.js';
+import CompositeFeatureProvider from '../featureProvider/compositeFeatureProvider.js';
 
 export type CesiumTilesetOptions = LayerOptions & {
   /**
@@ -46,6 +52,10 @@ export type CesiumTilesetOptions = LayerOptions & {
    * a css string color to be used as an outline.
    */
   outlineColor?: string;
+  /**
+   * an optional attribute provider to provide custom attributes for the tileset features on load
+   */
+  attributeProvider?: AttributeProvider | AbstractAttributeProviderOptions;
 };
 
 export type CesiumTilesetTilesetProperties = {
@@ -61,6 +71,7 @@ export type CesiumTilesetImplementationOptions =
     modelMatrix?: Matrix4;
     offset?: Coordinate;
     customShader?: CustomShader;
+    attributeProvider?: AttributeProvider;
   };
 
 /**
@@ -100,6 +111,8 @@ class CesiumTilesetLayer extends FeatureLayer<CesiumTilesetCesiumImpl> {
 
   private _customShader: CustomShader | undefined = undefined;
 
+  private _attributeProvider?: AttributeProvider;
+
   constructor(options: CesiumTilesetOptions) {
     const defaultOptions = CesiumTilesetLayer.getDefaultOptions();
     super({ ...defaultOptions, ...options });
@@ -138,6 +151,17 @@ class CesiumTilesetLayer extends FeatureLayer<CesiumTilesetCesiumImpl> {
     this._modelMatrix = undefined;
 
     this._offset = options.offset || defaultOptions.offset;
+
+    const attributeProvider = getProviderForOption(options.attributeProvider);
+
+    if (
+      is(
+        attributeProvider,
+        oneOf(CompositeFeatureProvider, AbstractAttributeProvider),
+      )
+    ) {
+      this._attributeProvider = attributeProvider;
+    }
   }
 
   /**
@@ -188,6 +212,26 @@ class CesiumTilesetLayer extends FeatureLayer<CesiumTilesetCesiumImpl> {
     }
   }
 
+  get attributeProvider(): AttributeProvider | undefined {
+    return this._attributeProvider;
+  }
+
+  set attributeProvider(provider: AttributeProvider | undefined) {
+    check(
+      provider,
+      maybe(oneOf(AbstractAttributeProvider, CompositeFeatureProvider)),
+    );
+
+    if (this._attributeProvider !== provider) {
+      this._attributeProvider = provider;
+      this.forceRedraw().catch((e: unknown) => {
+        this.getLogger().error(
+          `Error forcing redraw after setting attribute provider: ${String(e)}`,
+        );
+      });
+    }
+  }
+
   getImplementationOptions(): CesiumTilesetImplementationOptions {
     return {
       ...super.getImplementationOptions(),
@@ -196,6 +240,7 @@ class CesiumTilesetLayer extends FeatureLayer<CesiumTilesetCesiumImpl> {
       modelMatrix: this.modelMatrix,
       offset: this.offset,
       customShader: this.customShader,
+      attributeProvider: this._attributeProvider,
     };
   }
 
@@ -284,6 +329,10 @@ class CesiumTilesetLayer extends FeatureLayer<CesiumTilesetCesiumImpl> {
       config.offset = this.offset.slice();
     }
 
+    if (this._attributeProvider) {
+      config.attributeProvider = this._attributeProvider.toJSON();
+    }
+
     return config;
   }
 
@@ -291,6 +340,7 @@ class CesiumTilesetLayer extends FeatureLayer<CesiumTilesetCesiumImpl> {
    * disposes of this layer, removes instances from the current maps and the framework
    */
   destroy(): void {
+    this.attributeProvider?.destroy();
     super.destroy();
   }
 }

package/src/layer/i3sLayer.ts

@@ -0,0 +1,343 @@
+import { Cartesian3, Color } from '@vcmap-cesium/engine';
+import type { Cesium3DTileset } from '@vcmap-cesium/engine';
+import { parseBoolean, parseInteger } from '@vcsuite/parsers';
+import { check, is, maybe, oneOf } from '@vcsuite/check';
+import AbstractFeatureProvider from '../featureProvider/abstractFeatureProvider.js';
+import I3SCesiumImpl from './cesium/i3sCesiumImpl.js';
+import FeatureLayer from './featureLayer.js';
+import type { LayerOptions } from './layer.js';
+import type FeatureVisibility from './featureVisibility.js';
+import type { FeatureLayerImplementationOptions } from './featureLayer.js';
+import { layerClassRegistry } from '../classRegistry.js';
+import type VcsMap from '../map/vcsMap.js';
+import CesiumMap from '../map/cesiumMap.js';
+import BaseCesiumMap from '../map/baseCesiumMap.js';
+import PanoramaMap from '../map/panoramaMap.js';
+import type { VcsObjectOptions } from '../vcsObject.js';
+import Extent from '../util/extent.js';
+import { isMobile } from '../util/isMobile.js';
+import { mercatorProjection } from '../util/projection.js';
+import { rectangleToMercatorExtent } from '../util/math.js';
+import { cesiumColorToColor, getStringColor } from '../style/styleHelpers.js';
+import type { VectorStyleItemOptions } from '../style/vectorStyleItem.js';
+import VectorStyleItem from '../style/vectorStyleItem.js';
+import I3SAttributeProvider from '../featureProvider/i3sAttributeProvider.js';
+import type { AttributeProvider } from '../featureProvider/abstractAttributeProvider.js';
+import AbstractAttributeProvider from '../featureProvider/abstractAttributeProvider.js';
+import CompositeFeatureProvider from '../featureProvider/compositeFeatureProvider.js';
+import { getProviderForOption } from '../featureProvider/featureProviderFactory.js';
+
+export type I3SOptions = LayerOptions & {
+  adjustMaterialAlphaMode?: boolean;
+  applySymbology?: boolean;
+  calculateNormals?: boolean;
+  showFeatures?: boolean;
+  cesium3dTilesetOptions?: Cesium3DTileset.ConstructorOptions;
+  lightColor?: { x: number; y: number; z: number };
+  outlineColor?: string;
+  screenSpaceError?: number;
+  screenSpaceErrorMobile?: number;
+  highlightStyle?: VectorStyleItem | VectorStyleItemOptions;
+  featureVisibility?: FeatureVisibility;
+  /** A flag to indicate if the layer has batch tables, in which case features attributes are loaded on load */
+  hasBatchTable?: boolean;
+  /** an optional attribute provider to provide custom attributes for the tileset features on load */
+  attributeProvider?: AttributeProvider | VcsObjectOptions;
+};
+
+export type I3SImplementationOptions = FeatureLayerImplementationOptions & {
+  allowPicking: boolean;
+  adjustMaterialAlphaMode?: boolean;
+  applySymbology?: boolean;
+  calculateNormals?: boolean;
+  showFeatures?: boolean;
+  cesium3dTilesetOptions?: Cesium3DTileset.ConstructorOptions;
+  hasBatchTable?: boolean;
+  attributeProvider?: AttributeProvider;
+};
+
+class I3SLayer extends FeatureLayer<I3SCesiumImpl> {
+  static get className(): string {
+    return 'I3SLayer';
+  }
+
+  static getDefaultOptions(): I3SOptions {
+    return {
+      ...FeatureLayer.getDefaultOptions(),
+      adjustMaterialAlphaMode: false,
+      applySymbology: false,
+      calculateNormals: false,
+      showFeatures: false,
+      cesium3dTilesetOptions: undefined,
+      lightColor: undefined,
+      outlineColor: undefined,
+      screenSpaceError: 16,
+      screenSpaceErrorMobile: 32,
+      highlightStyle: undefined,
+      hasBatchTable: true,
+    };
+  }
+
+  adjustMaterialAlphaMode: boolean;
+  applySymbology: boolean;
+  calculateNormals: boolean;
+  showFeatures: boolean;
+  cesium3dTilesetOptions:
+    | Partial<Cesium3DTileset.ConstructorOptions>
+    | undefined;
+  lightColor: { x: number; y: number; z: number } | undefined;
+  outlineColor: string | undefined;
+  screenSpaceError: number;
+  screenSpaceErrorMobile: number;
+  highlightStyle: VectorStyleItem | null = null;
+  hasBatchTable: boolean;
+  protected _supportedMaps = [CesiumMap.className, PanoramaMap.className];
+  private _attributeProvider?: AttributeProvider;
+
+  constructor(options: I3SOptions) {
+    const defaultOptions = I3SLayer.getDefaultOptions();
+    super({ ...defaultOptions, ...options });
+
+    this.adjustMaterialAlphaMode = parseBoolean(
+      options.adjustMaterialAlphaMode ?? defaultOptions.adjustMaterialAlphaMode,
+    );
+    this.applySymbology = parseBoolean(
+      options.applySymbology ?? defaultOptions.applySymbology,
+    );
+    this.calculateNormals = parseBoolean(
+      options.calculateNormals ?? defaultOptions.calculateNormals,
+    );
+    this.showFeatures = parseBoolean(
+      options.showFeatures ?? defaultOptions.showFeatures,
+    );
+
+    this.screenSpaceError = parseInteger(
+      options.screenSpaceError,
+      defaultOptions.screenSpaceError,
+    );
+
+    this.screenSpaceErrorMobile = parseInteger(
+      options.screenSpaceErrorMobile,
+      defaultOptions.screenSpaceErrorMobile,
+    );
+
+    this.hasBatchTable = parseBoolean(
+      options.hasBatchTable ?? defaultOptions.hasBatchTable,
+    );
+
+    if (options.highlightStyle) {
+      this.highlightStyle =
+        options.highlightStyle instanceof VectorStyleItem
+          ? options.highlightStyle
+          : new VectorStyleItem(options.highlightStyle);
+    }
+
+    const cesium3dTilesetOptions =
+      options.cesium3dTilesetOptions || defaultOptions.cesium3dTilesetOptions;
+
+    this.cesium3dTilesetOptions = {
+      maximumScreenSpaceError: isMobile()
+        ? this.screenSpaceErrorMobile
+        : this.screenSpaceError,
+      ...cesium3dTilesetOptions,
+      ...(options.lightColor && {
+        lightColor: new Cartesian3(
+          options.lightColor.x,
+          options.lightColor.y,
+          options.lightColor.z,
+        ),
+      }),
+      ...(options.outlineColor && {
+        outlineColor: Color.fromCssColorString(options.outlineColor),
+      }),
+    };
+
+    const attributeProvider = getProviderForOption(options.attributeProvider);
+    if (this.hasBatchTable) {
+      if (
+        is(
+          attributeProvider,
+          oneOf(CompositeFeatureProvider, AbstractAttributeProvider),
+        )
+      ) {
+        this._attributeProvider = attributeProvider;
+      } else {
+        this._attributeProvider = new I3SAttributeProvider({});
+      }
+    } else if (this.allowPicking) {
+      if (is(this.featureProvider, AbstractFeatureProvider)) {
+        this.attributeProvider = new CompositeFeatureProvider({
+          featureProviders: [this.featureProvider],
+          attributeProviders: [new I3SAttributeProvider({})],
+        });
+      } else {
+        this.featureProvider = new I3SAttributeProvider({});
+      }
+    }
+  }
+
+  get attributeProvider(): AttributeProvider | undefined {
+    return this._attributeProvider;
+  }
+
+  set attributeProvider(provider: AttributeProvider | undefined) {
+    check(
+      provider,
+      maybe(oneOf(AbstractAttributeProvider, CompositeFeatureProvider)),
+    );
+
+    if (this._attributeProvider !== provider) {
+      this._attributeProvider = provider;
+      this.forceRedraw().catch((e: unknown) => {
+        this.getLogger().error(
+          `Error forcing redraw after setting attribute provider: ${String(e)}`,
+        );
+      });
+    }
+  }
+
+  getImplementationOptions(): I3SImplementationOptions {
+    return {
+      ...super.getImplementationOptions(),
+      allowPicking: this.allowPicking,
+      adjustMaterialAlphaMode: this.adjustMaterialAlphaMode,
+      applySymbology: this.applySymbology,
+      calculateNormals: this.calculateNormals,
+      showFeatures: this.showFeatures,
+      cesium3dTilesetOptions: this.cesium3dTilesetOptions,
+      hasBatchTable: this.hasBatchTable,
+      attributeProvider: this._attributeProvider,
+    };
+  }
+
+  createImplementationsForMap(map: VcsMap): I3SCesiumImpl[] {
+    if (map instanceof BaseCesiumMap) {
+      return [new I3SCesiumImpl(map, this.getImplementationOptions())];
+    }
+    return [];
+  }
+
+  getZoomToExtent(): Extent | null {
+    const metaExtent = super.getZoomToExtent();
+    if (metaExtent) {
+      return metaExtent;
+    }
+    const impl = this.getImplementations()[0];
+    if (impl?.data) {
+      const coordinates = rectangleToMercatorExtent(impl.data.extent);
+      const extent = new Extent({
+        projection: mercatorProjection.toJSON(),
+        coordinates,
+      });
+      if (extent.isValid()) {
+        return extent;
+      }
+    }
+    return null;
+  }
+
+  /**
+   * set the maximum screenspace error of this layer
+   */
+  setMaximumScreenSpaceError(value: number): void {
+    this.getImplementations().forEach((impl) => {
+      if (impl.data) {
+        impl.data.layers.forEach(({ tileset }) => {
+          if (tileset) {
+            tileset.maximumScreenSpaceError = value;
+          }
+        });
+      }
+    });
+  }
+
+  toJSON(defaultOptions = I3SLayer.getDefaultOptions()): I3SOptions {
+    const config: I3SOptions = super.toJSON(defaultOptions);
+    if (
+      this.adjustMaterialAlphaMode !== defaultOptions.adjustMaterialAlphaMode
+    ) {
+      config.adjustMaterialAlphaMode = this.adjustMaterialAlphaMode;
+    }
+    if (this.applySymbology !== defaultOptions.applySymbology) {
+      config.applySymbology = this.applySymbology;
+    }
+    if (this.calculateNormals !== defaultOptions.calculateNormals) {
+      config.calculateNormals = this.calculateNormals;
+    }
+    if (this.showFeatures !== defaultOptions.showFeatures) {
+      config.showFeatures = this.showFeatures;
+    }
+
+    if (this.screenSpaceError !== defaultOptions.screenSpaceError) {
+      config.screenSpaceError = this.screenSpaceError;
+    }
+    if (this.screenSpaceErrorMobile !== defaultOptions.screenSpaceErrorMobile) {
+      config.screenSpaceErrorMobile = this.screenSpaceErrorMobile;
+    }
+    if (this.hasBatchTable !== defaultOptions.hasBatchTable) {
+      config.hasBatchTable = this.hasBatchTable;
+    }
+    if (this.highlightStyle) {
+      config.highlightStyle = this.highlightStyle.toJSON();
+    }
+
+    const tilesetOptions = { ...this.cesium3dTilesetOptions };
+    if (tilesetOptions.outlineColor) {
+      config.outlineColor = getStringColor(
+        cesiumColorToColor(tilesetOptions.outlineColor),
+      );
+    }
+    delete tilesetOptions.outlineColor;
+
+    if (tilesetOptions.lightColor) {
+      config.lightColor = {
+        x: tilesetOptions.lightColor.x,
+        y: tilesetOptions.lightColor.y,
+        z: tilesetOptions.lightColor.z,
+      };
+    }
+    delete tilesetOptions.lightColor;
+
+    const usedScreenSpaceError = isMobile()
+      ? this.screenSpaceErrorMobile
+      : this.screenSpaceError;
+    if (tilesetOptions.maximumScreenSpaceError === usedScreenSpaceError) {
+      delete tilesetOptions.maximumScreenSpaceError;
+    }
+
+    if (Object.keys(tilesetOptions).length > 0) {
+      config.cesium3dTilesetOptions = structuredClone(tilesetOptions);
+    }
+
+    if (
+      this._attributeProvider &&
+      !(this._attributeProvider instanceof I3SAttributeProvider) &&
+      !(this._attributeProvider instanceof AbstractFeatureProvider)
+    ) {
+      config.attributeProvider = this._attributeProvider.toJSON();
+      if (this._attributeProvider instanceof CompositeFeatureProvider) {
+        const { featureProviders, attributeProviders } =
+          this._attributeProvider.toJSON();
+        config.featureProvider = featureProviders[0];
+        if (!(attributeProviders[0] instanceof I3SAttributeProvider)) {
+          config.attributeProvider = attributeProviders[0];
+        }
+      } else {
+        config.attributeProvider = this._attributeProvider.toJSON();
+      }
+    }
+
+    return config;
+  }
+
+  /**
+   * disposes of this layer, removes instances from the current maps and the framework
+   */
+  destroy(): void {
+    this.attributeProvider?.destroy();
+    super.destroy();
+  }
+}
+
+layerClassRegistry.registerClass(I3SLayer.className, I3SLayer);
+export default I3SLayer;

package/src/layer/layer.ts

@@ -11,7 +11,16 @@ import { layerClassRegistry } from '../classRegistry.js';
 import GlobalHider from './globalHider.js';
 import type VcsMap from '../map/vcsMap.js';
 import type LayerImplementation from './layerImplementation.js';
-import type AbstractFeatureProvider from '../featureProvider/abstractFeatureProvider.js';
+import {
+  type default as AbstractFeatureProvider,
+  type AbstractFeatureProviderOptions,
+} from '../featureProvider/abstractFeatureProvider.js';
+import type {
+  // eslint-disable-next-line import/no-named-default
+  default as AbstractAttributeProvider,
+  AbstractAttributeProviderOptions,
+} from '../featureProvider/abstractAttributeProvider.js';
+import { getProviderForOption } from '../featureProvider/featureProviderFactory.js';
 
 export type CopyrightOptions = {
   provider?: string;
@@ -62,6 +71,14 @@ export type LayerOptions = VcsObjectOptions & {
    * if true, the layer types of the map will be ignored when checking if the layer is supported
    */
   ignoreMapLayerTypes?: boolean;
+  /**
+   * An optional feature or attribute provider to provide or augment features on click events.
+   */
+  featureProvider?:
+    | AbstractFeatureProvider
+    | AbstractAttributeProvider
+    | AbstractFeatureProviderOptions
+    | AbstractAttributeProviderOptions;
 };
 
 export type LayerImplementationOptions = {
@@ -98,6 +115,7 @@ class Layer<
       headers: undefined,
       ignoreMapLayerTypes: false,
       zIndex: 0,
+      featureProvider: undefined,
     };
   }
 
@@ -160,9 +178,12 @@ class Layer<
   stateChanged: VcsEvent<LayerState>;
 
   /**
-   * An optional feature provider to provider features based on click events.
+   * An optional feature or attribute provider to provide or augment features on click events.
    */
-  featureProvider: AbstractFeatureProvider | undefined;
+  featureProvider:
+    | AbstractFeatureProvider
+    | AbstractAttributeProvider
+    | undefined;
 
   private _locale: string;
 
@@ -235,6 +256,8 @@ class Layer<
       options.ignoreMapLayerTypes,
       defaultOptions.ignoreMapLayerTypes,
     );
+
+    this.featureProvider = getProviderForOption(options.featureProvider);
   }
 
   /**
@@ -812,6 +835,10 @@ class Layer<
       config.ignoreMapLayerTypes = this._ignoreMapLayerTypes;
     }
 
+    if (this.featureProvider) {
+      config.featureProvider = this.featureProvider.toJSON();
+    }
+
     return config;
   }
 

package/src/layer/layerSymbols.ts

@@ -7,3 +7,8 @@ export const vcsLayerName: unique symbol = Symbol('vcsLayerName');
  * Symbol added to Cesium3DTilesets to suppress picking.
  */
 export const allowPicking: unique symbol = Symbol('allowPicking');
+
+/**
+ * Symbol to store the I3SNode and the cartesian position on features created from non Cesium3DTileset sources.
+ */
+export const i3sData: unique symbol = Symbol('i3sData');

package/src/layer/panoramaDatasetLayer.ts

@@ -9,7 +9,10 @@ import VectorTileLayer, {
 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 VectorProperties, {
+  PrimitiveOptionsType,
+  type VectorPropertiesOptions,
+} from './vectorProperties.js';
 import { maxZIndexMin50 } from '../util/layerCollection.js';
 import { layerClassRegistry } from '../classRegistry.js';
 import FlatGeobufTileProvider from './tileProvider/flatGeobufTileProvider.js';
@@ -30,6 +33,7 @@ export type PanoramaDatasetOptions = Omit<
   url: string;
   baseLevel?: number;
   cameraOffset?: number;
+  panoramaVectorProperties?: VectorPropertiesOptions;
 };
 
 export type PanoramaDatasetFeatureProperties = {
@@ -53,6 +57,17 @@ export default class PanoramaDatasetLayer extends VectorTileLayer<PanoramaDatase
       maxLevel: 22,
       zIndex: maxZIndexMin50,
       ignoreMapLayerTypes: true,
+      panoramaVectorProperties: {
+        altitudeMode: 'absolute',
+        primitiveOptions: {
+          type: PrimitiveOptionsType.CYLINDER,
+          geometryOptions: {
+            topRadius: 1,
+            bottomRadius: 1,
+            length: 0.01,
+          },
+        },
+      },
     };
   }
 
@@ -115,18 +130,20 @@ export default class PanoramaDatasetLayer extends VectorTileLayer<PanoramaDatase
       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],
-      },
-    });
+    defaultOptions.panoramaVectorProperties!.primitiveOptions!.offset = [
+      0,
+      0,
+      this.cameraOffset,
+    ];
+
+    this._panoramaVectorProperties = new VectorProperties(
+      defaultOptions.panoramaVectorProperties!,
+    );
+    if (options.panoramaVectorProperties) {
+      this._panoramaVectorProperties.setValues(
+        options.panoramaVectorProperties,
+      );
+    }
 
     this._supportedMaps.push(PanoramaMap.className);
   }
@@ -272,6 +289,20 @@ export default class PanoramaDatasetLayer extends VectorTileLayer<PanoramaDatase
       delete config.zIndex;
     }
 
+    defaultOptions.panoramaVectorProperties!.primitiveOptions!.offset = [
+      0,
+      0,
+      this.cameraOffset,
+    ];
+    const vectorPropertiesConfig = this._panoramaVectorProperties.getVcsMeta({
+      ...VectorProperties.getDefaultOptions(),
+      ...defaultOptions.panoramaVectorProperties,
+    });
+
+    if (Object.keys(vectorPropertiesConfig).length > 0) {
+      config.panoramaVectorProperties = vectorPropertiesConfig;
+    }
+
     const thisDefaultStyle = getStyleOrDefaultStyle(defaultOptions.style);
     if (this.style.equals(thisDefaultStyle)) {
       delete config.style;