@vcmap/core 6.2.4 → 6.3.0-rc.2

package/src/featureProvider/tileProviderFeatureProvider.ts

@@ -3,8 +3,8 @@ import type { Feature } from 'ol/index.js';
 import AbstractFeatureProvider, {
   type AbstractFeatureProviderOptions,
 } from './abstractFeatureProvider.js';
-import { featureProviderClassRegistry } from '../classRegistry.js';
 import type TileProvider from '../layer/tileProvider/tileProvider.js';
+import type Layer from '../layer/layer.js';
 
 export type TileProviderFeatureProviderOptions =
   AbstractFeatureProviderOptions & {
@@ -18,26 +18,21 @@ class TileProviderFeatureProvider extends AbstractFeatureProvider {
 
   tileProvider: TileProvider;
 
-  /**
-   * @param  layerName
-   * @param  options
-   */
-  constructor(layerName: string, options: TileProviderFeatureProviderOptions) {
-    super(layerName, options);
+  constructor(options: TileProviderFeatureProviderOptions) {
+    super({ ...options, mapTypes: ['CesiumMap'] });
 
-    this.mapTypes = ['CesiumMap'];
     this.tileProvider = options.tileProvider;
   }
 
   async getFeaturesByCoordinate(
     coordinate: Coordinate,
     resolution: number,
-    headers?: Record<string, string>,
+    layer: Layer,
   ): Promise<Feature[]> {
     const features = await this.tileProvider.getFeaturesByCoordinate(
       coordinate,
       resolution,
-      headers,
+      layer.headers,
     );
     const checkShow = (feature: Feature): boolean =>
       this.style ? !!this.style.cesiumStyle.show.evaluate(feature) : true;
@@ -48,6 +43,14 @@ class TileProviderFeatureProvider extends AbstractFeatureProvider {
     });
   }
 
+  toJSON(
+    defaultOptions: AbstractFeatureProviderOptions = AbstractFeatureProvider.getDefaultOptions(),
+  ): AbstractFeatureProviderOptions {
+    const options = super.toJSON(defaultOptions);
+    delete options.mapTypes;
+    return options;
+  }
+
   destroy(): void {
     this.tileProvider.destroy();
     super.destroy();
@@ -55,7 +58,3 @@ class TileProviderFeatureProvider extends AbstractFeatureProvider {
 }
 
 export default TileProviderFeatureProvider;
-featureProviderClassRegistry.registerClass(
-  TileProviderFeatureProvider.className,
-  TileProviderFeatureProvider,
-);

package/src/featureProvider/urlIdAttributeProvider.ts

@@ -0,0 +1,82 @@
+import AbstractAttributeProvider from './abstractAttributeProvider.js';
+import type { VcsObjectOptions } from '../vcsObject.js';
+import { getInitForUrl, requestJson } from '../util/fetch.js';
+import { featureProviderClassRegistry } from '../classRegistry.js';
+
+export type UrlIdAttributeProviderOptions = VcsObjectOptions & {
+  urlTemplate: string;
+  headers?: Record<string, string>;
+};
+
+/**
+ * Provides attributes for features by fetching data from a URL based on feature IDs.
+ * The URL template should contain a {id} placeholder that will be replaced with the encoded feature ID.
+ * urlTemplate: 'https://api.example.com/features/{id}'
+ * For a feature with ID "123", this would request: https://api.example.com/features/123
+ *
+ * The backend should return a JSON object with attribute key-value pairs.
+ * {
+ * "name": "Feature Name",
+ * "description": "Feature description",
+ * "value": 42
+ * }
+ * If the request fails or returns invalid data, the provider returns undefined.
+ */
+export default class UrlIdAttributeProvider extends AbstractAttributeProvider {
+  static get className(): string {
+    return 'UrlIdAttributeProvider';
+  }
+
+  private _urlTemplate: string;
+
+  private _headers?: Record<string, string> | undefined;
+
+  constructor(options: UrlIdAttributeProviderOptions) {
+    super(options);
+
+    this._urlTemplate = options.urlTemplate;
+
+    this._headers = options.headers
+      ? structuredClone(options.headers)
+      : undefined;
+  }
+
+  protected async _getAttributes(
+    id: string,
+  ): Promise<Record<string, unknown> | undefined> {
+    const url = this._urlTemplate.replace(
+      '{id}',
+      encodeURIComponent(String(id)),
+    );
+
+    try {
+      return await requestJson<Record<string, unknown>>(
+        url,
+        getInitForUrl(url, this._headers),
+      );
+    } catch {
+      return undefined;
+    }
+  }
+
+  override toJSON(
+    _defaultOptions?: UrlIdAttributeProviderOptions,
+  ): UrlIdAttributeProviderOptions {
+    const config: Partial<UrlIdAttributeProviderOptions> = super.toJSON(
+      _defaultOptions,
+    );
+
+    config.urlTemplate = this._urlTemplate;
+
+    if (this._headers) {
+      config.headers = structuredClone(this._headers);
+    }
+
+    return config as UrlIdAttributeProviderOptions;
+  }
+}
+
+featureProviderClassRegistry.registerClass(
+  UrlIdAttributeProvider.className,
+  UrlIdAttributeProvider,
+);

package/src/featureProvider/wmsFeatureProvider.ts

@@ -16,7 +16,7 @@ import type { Options as WMSGetFeatureInfoOptions } from 'ol/format/WMSGetFeatur
 import { containsCoordinate } from 'ol/extent.js';
 import { parseInteger } from '@vcsuite/parsers';
 import { getLogger } from '@vcsuite/logger';
-import type { AbstractFeatureProviderOptions } from './abstractFeatureProvider.js';
+import { type AbstractFeatureProviderOptions } from './abstractFeatureProvider.js';
 import AbstractFeatureProvider from './abstractFeatureProvider.js';
 import type { ProjectionOptions } from '../util/projection.js';
 import Projection, { mercatorProjection } from '../util/projection.js';
@@ -27,6 +27,7 @@ import Extent from '../util/extent.js';
 import { getInitForUrl, requestUrl } from '../util/fetch.js';
 import { featureProviderClassRegistry } from '../classRegistry.js';
 import { TilingScheme } from '../layer/rasterLayer.js';
+import type Layer from '../layer/layer.js';
 
 export type FormatOptions = GeoJSONOptions &
   GMLOptions &
@@ -78,6 +79,10 @@ export type WMSFeatureProviderOptions = AbstractFeatureProviderOptions & {
    */
   version?: string;
   htmlPositionFeatureTitle?: string;
+  /**
+   * Optional headers to include in GetFeatureInfo requests. Overrides layer headers.
+   */
+  headers?: Record<string, string>;
 };
 
 const gmlFormats = { GML: GML3, GML2, GML3, GML32 };
@@ -191,6 +196,7 @@ class WMSFeatureProvider extends AbstractFeatureProvider {
       tileSize: [256, 256],
       parameters: {},
       extent: undefined,
+      headers: undefined,
     };
   }
 
@@ -233,9 +239,14 @@ class WMSFeatureProvider extends AbstractFeatureProvider {
 
   htmlPositionFeatureTitle?: string;
 
-  constructor(layerName: string, options: WMSFeatureProviderOptions) {
-    super(layerName, options);
+  /**
+   * Optional headers to include in GetFeatureInfo requests.
+   */
+  headers?: Record<string, string>;
+
+  constructor(options: WMSFeatureProviderOptions) {
     const defaultOptions = WMSFeatureProvider.getDefaultOptions();
+    super({ ...defaultOptions, ...options });
 
     if (options.extent) {
       if (options.extent instanceof Extent) {
@@ -271,6 +282,9 @@ class WMSFeatureProvider extends AbstractFeatureProvider {
       ? new Projection(options.projection)
       : undefined;
     this.htmlPositionFeatureTitle = options.htmlPositionFeatureTitle;
+    this.headers = options.headers
+      ? structuredClone(options.headers)
+      : undefined;
   }
 
   get wmsSource(): TileWMS {
@@ -324,7 +338,7 @@ class WMSFeatureProvider extends AbstractFeatureProvider {
   async getFeaturesByCoordinate(
     coordinate: Coordinate,
     resolution: number,
-    headers?: Record<string, string>,
+    layer: Layer,
   ): Promise<Feature[]> {
     if (
       this.extent?.isValid() &&
@@ -354,10 +368,10 @@ class WMSFeatureProvider extends AbstractFeatureProvider {
 
     if (this.featureInfoResponseType === 'text/html') {
       return this.featureResponseCallback(null, coordinate).map((f) =>
-        this.getProviderFeature(f),
+        this.getProviderFeature(f, layer),
       );
     } else if (url) {
-      const init = getInitForUrl(url, headers);
+      const init = getInitForUrl(url, this.headers ?? layer.headers);
       let data: string;
       try {
         const response = await requestUrl(url, init);
@@ -367,15 +381,19 @@ class WMSFeatureProvider extends AbstractFeatureProvider {
         return [];
       }
       return this.featureResponseCallback(data, coordinate).map((f) =>
-        this.getProviderFeature(f),
+        this.getProviderFeature(f, layer),
       );
     }
     return [];
   }
 
-  toJSON(): WMSFeatureProviderOptions {
-    const config: Partial<WMSFeatureProviderOptions> = super.toJSON();
-    const defaultOptions = WMSFeatureProvider.getDefaultOptions();
+  toJSON(
+    defaultOptions = WMSFeatureProvider.getDefaultOptions(),
+  ): WMSFeatureProviderOptions {
+    const config: Partial<WMSFeatureProviderOptions> = super.toJSON(
+      defaultOptions,
+    );
+
     if (this.featureInfoResponseType !== defaultOptions.responseType) {
       config.responseType = this.featureInfoResponseType;
     }
@@ -423,6 +441,9 @@ class WMSFeatureProvider extends AbstractFeatureProvider {
     if (this.htmlPositionFeatureTitle) {
       config.htmlPositionFeatureTitle = this.htmlPositionFeatureTitle;
     }
+    if (this.headers) {
+      config.headers = structuredClone(this.headers);
+    }
 
     return config as WMSFeatureProviderOptions;
   }

package/src/global.d.ts

@@ -12,6 +12,8 @@ declare global {
       createModuleFromConfig: (config: VcsModuleConfig) => VcsModule;
       getFirstApp: () => VcsApp | undefined;
       workerBase?: string;
+      scriptNonce?: string;
+      styleNonce?: string;
     };
     opera?: string;
   }

package/src/interaction/coordinateAtPixel.ts

@@ -27,7 +27,8 @@ async function getCoordinateFromPanoramaMap(
   event: InteractionEvent,
 ): Promise<InteractionEvent> {
   const image = map.currentPanoramaImage;
-  let position = [0, 0, 0];
+  event.ray = map.getCesiumWidget().camera.getPickRay(event.windowPosition);
+  let position;
   if (image) {
     const { camera } = map.getCesiumWidget();
     const imageCoordinate = windowPositionToImageSpherical(
@@ -36,8 +37,6 @@ async function getCoordinateFromPanoramaMap(
       image.invModelMatrix,
     );
 
-    event.positionOrPixel = imageCoordinate;
-
     if (imageCoordinate) {
       const cartesian = await image.getPositionAtImageCoordinate(
         imageCoordinate,
@@ -50,6 +49,7 @@ async function getCoordinateFromPanoramaMap(
   }
 
   event.position = position;
+  event.positionOrPixel = position;
   return event;
 }
 
@@ -93,9 +93,7 @@ class CoordinateAtPixel extends AbstractInteraction {
       scene,
       this._scratchCartesian,
     );
-    if (!pickResult) {
-      event.position = [0, 0, 0];
-    } else {
+    if (pickResult) {
       this._scratchCartographic = Cartographic.fromCartesian(
         pickResult,
         scene.globe.ellipsoid,

package/src/interaction/ensurePositionInteraction.ts

@@ -0,0 +1,50 @@
+import type { Coordinate } from 'ol/coordinate.js';
+import AbstractInteraction, {
+  type InteractionEvent,
+} from './abstractInteraction.js';
+import {
+  EventType,
+  ModificationKeyType,
+  PointerKeyType,
+} from './interactionType.js';
+
+/**
+ * An interaction that ensures events without a position are stopped.
+ * It will set event.stopPropagation = true if event.position is undefined.
+ * Furthermore, it ensures the integrity of drag events by: a) remembering the last position
+ * on DRAGSTART and reusing it on DRAGEND if no position is provided and b) stopping propagation of drag events, if
+ * drag start did not provide a position.
+ */
+class EnsurePositionInteraction extends AbstractInteraction {
+  private _lastDragPosition: Coordinate | undefined;
+
+  constructor() {
+    super(EventType.ALL, ModificationKeyType.ALL, PointerKeyType.ALL);
+
+    this.setActive();
+  }
+
+  pipe(event: InteractionEvent): Promise<InteractionEvent> {
+    if (event.type & EventType.DRAGSTART) {
+      this._lastDragPosition = event.position?.slice();
+    } else if (event.type & EventType.DRAG) {
+      if (this._lastDragPosition && event.position) {
+        this._lastDragPosition = event.position.slice();
+      } else if (!this._lastDragPosition) {
+        event.stopPropagation = true;
+      }
+    } else if (event.type & EventType.DRAGEND) {
+      if (this._lastDragPosition && !event.position) {
+        event.position = this._lastDragPosition;
+      } else if (!this._lastDragPosition) {
+        event.stopPropagation = true;
+      }
+      this._lastDragPosition = undefined;
+    }
+
+    event.stopPropagation = event.stopPropagation || !event.position;
+    return Promise.resolve(event);
+  }
+}
+
+export default EnsurePositionInteraction;

package/src/interaction/eventHandler.ts

@@ -13,6 +13,7 @@ import {
   PointerEventType,
 } from './interactionType.js';
 import FeatureProviderInteraction from './featureProviderInteraction.js';
+import EnsurePositionInteraction from './ensurePositionInteraction.js';
 import VcsEvent from '../vcsEvent.js';
 
 type EventHandlerExclusiveInteraction = {
@@ -35,6 +36,8 @@ class EventHandler {
 
   private _featureInteraction: FeatureAtPixelInteraction;
 
+  private _ensurePositionInteraction: EnsurePositionInteraction;
+
   private _featureProviderInteraction: FeatureProviderInteraction;
 
   private _interactionChain: InteractionChain;
@@ -72,10 +75,12 @@ class EventHandler {
   constructor() {
     this._positionInteraction = new CoordinateAtPixel();
     this._featureInteraction = new FeatureAtPixelInteraction();
+    this._ensurePositionInteraction = new EnsurePositionInteraction();
     this._featureProviderInteraction = new FeatureProviderInteraction();
     this._interactionChain = new InteractionChain([
       this._positionInteraction,
       this._featureInteraction,
+      this._ensurePositionInteraction,
       this._featureProviderInteraction,
     ]);
 
@@ -126,6 +131,10 @@ class EventHandler {
     return this._featureInteraction;
   }
 
+  get ensurePositionInteraction(): EnsurePositionInteraction {
+    return this._ensurePositionInteraction;
+  }
+
   get featureProviderInteraction(): FeatureProviderInteraction {
     return this._featureProviderInteraction;
   }
@@ -255,7 +264,7 @@ class EventHandler {
    */
   addPersistentInteraction(
     interaction: AbstractInteraction,
-    index = 3,
+    index = 4,
   ): () => number {
     check(interaction, AbstractInteraction);
     check(index, Number);
@@ -440,6 +449,8 @@ class EventHandler {
     this._interactionChain.destroy();
     this._positionInteraction.destroy();
     this._featureInteraction.destroy();
+    this._ensurePositionInteraction.destroy();
+    this._featureProviderInteraction.destroy();
     this._eventQueue = [];
     window.removeEventListener('keydown', this._boundKeyListener);
     window.removeEventListener('keyup', this._boundKeyListener);

package/src/interaction/featureAtPixelInteraction.ts

@@ -4,6 +4,8 @@ import type {
   Ray,
   Billboard,
   Label,
+  I3SNode,
+  I3SDataProvider,
 } from '@vcmap-cesium/engine';
 import {
   Cartesian3,
@@ -12,7 +14,9 @@ import {
   Entity,
 } from '@vcmap-cesium/engine';
 import type OLMap from 'ol/Map.js';
-import type { Feature } from 'ol/index.js';
+import Feature from 'ol/Feature.js';
+import { Point } from 'ol/geom.js';
+import { v4 as uuid } from 'uuid';
 import AbstractInteraction, {
   type EventFeature,
   type InteractionEvent,
@@ -22,15 +26,16 @@ import {
   ModificationKeyType,
   PointerKeyType,
 } from './interactionType.js';
-import { allowPicking, vcsLayerName } from '../layer/layerSymbols.js';
+import { allowPicking, i3sData, vcsLayerName } from '../layer/layerSymbols.js';
 import { originalFeatureSymbol, primitives } from '../layer/vectorSymbols.js';
 import type OpenlayersMap from '../map/openlayersMap.js';
 import type ObliqueMap from '../map/obliqueMap.js';
-import type CesiumMap from '../map/cesiumMap.js';
 import { vectorClusterGroupName } from '../vectorCluster/vectorClusterSymbols.js';
-import { cartesianToMercator } from '../util/math.js';
+import { cartesian3DDistance, cartesianToMercator } from '../util/math.js';
 import type { PrimitiveType } from '../util/featureconverter/convert.js';
+import type BaseCesiumMap from '../map/baseCesiumMap.js';
 import type PanoramaMap from '../map/panoramaMap.js';
+import { isProvidedFeature } from '../featureProvider/featureProviderSymbols.js';
 
 /**
  * This is the return from cesium scene.pick and scene.drillPick, which returns "any". We cast to this type.
@@ -45,6 +50,11 @@ type CesiumPickObject = {
     olFeature?: Feature;
     [vcsLayerName]?: string;
   };
+  content?: {
+    tile?: {
+      i3sNode: I3SNode;
+    };
+  };
 };
 
 function getFeatureFromOlMap(
@@ -81,6 +91,12 @@ function getFeatureFromOlMap(
   return feature;
 }
 
+export function isI3SFeature(f: EventFeature): f is Feature & {
+  [i3sData]: { i3sNode: I3SNode; cartesianPosition?: Cartesian3 };
+} {
+  return !!(f != null && (f as Feature)[i3sData]);
+}
+
 export function getFeatureFromPickObject(
   object: CesiumPickObject,
 ): EventFeature | undefined {
@@ -114,8 +130,24 @@ export function getFeatureFromPickObject(
   ) {
     // entity
     feature = object.id;
+  } else if (object.content?.tile?.i3sNode) {
+    // i3s feature
+    const dataProvider =
+      // @ts-expect-error eslint-disable-next-line no-underscore-dangle, @typescript-eslint/ban-ts-comment
+      // eslint-disable-next-line no-underscore-dangle
+      object.content.tile.i3sNode._dataProvider as I3SDataProvider;
+    const layername = dataProvider[vcsLayerName];
+    if (object instanceof Cesium3DTileFeature) {
+      feature = object;
+      feature[vcsLayerName] = layername;
+    } else if (dataProvider[allowPicking] !== false) {
+      feature = new Feature({});
+      feature.setId(uuid());
+      feature[vcsLayerName] = layername;
+      feature[i3sData] = { i3sNode: object.content.tile.i3sNode };
+      feature[isProvidedFeature] = true;
+    }
   }
-
   return feature;
 }
 
@@ -283,7 +315,7 @@ class FeatureAtPixelInteraction extends AbstractInteraction {
   }
 
   private _cesiumHandler(event: InteractionEvent): Promise<InteractionEvent> {
-    const cesiumMap = event.map as CesiumMap | PanoramaMap;
+    const cesiumMap = event.map as BaseCesiumMap;
     const { scene } = cesiumMap.getCesiumWidget()!;
 
     if (!scene) {
@@ -301,14 +333,10 @@ class FeatureAtPixelInteraction extends AbstractInteraction {
     }
 
     const { pickTranslucentDepth } = scene;
-    if (!(event.type & this.pickPosition)) {
-      return Promise.resolve(event);
-    }
-
     if (
+      !!(event.type & this.pickPosition) &&
       pickObject &&
-      scene.pickPositionSupported &&
-      event.map.className === 'CesiumMap'
+      scene.pickPositionSupported
     ) {
       if (this.pickTranslucent) {
         scene.pickTranslucentDepth = true;
@@ -334,30 +362,62 @@ class FeatureAtPixelInteraction extends AbstractInteraction {
       );
 
       if (
-        !cartesianPosition ||
-        Cartesian3.equals(cartesianPosition, Cartesian3.ZERO)
+        cartesianPosition &&
+        !Cartesian3.equals(cartesianPosition, Cartesian3.ZERO)
       ) {
-        return Promise.resolve(event);
-      }
+        if (this.pullPickedPosition && event.ray) {
+          const pulledCartesian = Cartesian3.multiplyByScalar(
+            event.ray.direction,
+            this.pullPickedPosition,
+            new Cartesian3(),
+          );
+
+          Cartesian3.subtract(
+            cartesianPosition,
+            pulledCartesian,
+            cartesianPosition,
+          );
+        }
 
-      if (this.pullPickedPosition && event.ray) {
-        const pulledCartesian = Cartesian3.multiplyByScalar(
-          event.ray.direction,
-          this.pullPickedPosition,
-          new Cartesian3(),
-        );
-
-        Cartesian3.subtract(
-          cartesianPosition,
-          pulledCartesian,
-          cartesianPosition,
-        );
+        if (event.map.className === 'CesiumMap') {
+          event.position = cartesianToMercator(cartesianPosition);
+          event.positionOrPixel = event.position.slice();
+          if (
+            feature instanceof Feature &&
+            feature[isProvidedFeature] &&
+            isI3SFeature(feature)
+          ) {
+            feature.setGeometry(new Point(event.position));
+            feature.set('olcs_altitudeMode', 'absolute');
+            feature[i3sData].cartesianPosition = cartesianPosition;
+          }
+        } else {
+          const currentImage = (event.map as PanoramaMap).currentPanoramaImage;
+          if (currentImage) {
+            const imageCenter = cartesianToMercator(currentImage.position);
+            const newPosition = cartesianToMercator(cartesianPosition);
+            const newDistance = cartesian3DDistance(imageCenter, newPosition);
+            const currentDistance = event.position
+              ? cartesian3DDistance(imageCenter, event.position)
+              : undefined;
+
+            if (currentDistance == null || newDistance < currentDistance) {
+              event.position = newPosition;
+              event.positionOrPixel = event.position.slice();
+              if (
+                feature instanceof Feature &&
+                feature[isProvidedFeature] &&
+                isI3SFeature(feature)
+              ) {
+                feature.setGeometry(new Point(event.position));
+                feature.set('olcs_altitudeMode', 'absolute');
+                feature[i3sData].cartesianPosition = cartesianPosition;
+              }
+            }
+          }
+        }
       }
-
-      event.position = cartesianToMercator(cartesianPosition);
-      event.positionOrPixel = event.position.slice();
       scene.pickTranslucentDepth = pickTranslucentDepth;
-      return Promise.resolve(event);
     }
 
     return Promise.resolve(event);