@vcmap/core 5.0.0-rc.9 → 5.0.1

package/src/featureProvider/wmsFeatureProvider.ts

@@ -0,0 +1,330 @@
+import GML2 from 'ol/format/GML2.js';
+import type { Options as GMLOptions } from 'ol/format/GMLBase.js';
+import WFS from 'ol/format/WFS.js';
+import GeoJSON, {
+  type GeoJSONObject,
+  type Options as GeoJSONOptions,
+} from 'ol/format/GeoJSON.js';
+import GML3 from 'ol/format/GML3.js';
+import Point from 'ol/geom/Point.js';
+import { getTransform, type Projection as OLProjection } from 'ol/proj.js';
+import type { Size } from 'ol/size.js';
+import type { Feature } from 'ol/index.js';
+import type { Coordinate } from 'ol/coordinate.js';
+import type { TileWMS } from 'ol/source.js';
+import type FeatureFormat from 'ol/format/Feature.js';
+import { parseInteger } from '@vcsuite/parsers';
+import AbstractFeatureProvider, {
+  AbstractFeatureProviderOptions,
+} from './abstractFeatureProvider.js';
+import Projection, {
+  mercatorProjection,
+  ProjectionOptions,
+} from '../util/projection.js';
+import type { WMSSourceOptions } from '../layer/wmsHelpers.js';
+import { getWMSSource } from '../layer/wmsHelpers.js';
+import Extent, { ExtentOptions } from '../util/extent.js';
+import { requestJson } from '../util/fetch.js';
+import { featureProviderClassRegistry } from '../classRegistry.js';
+import { TilingScheme } from '../layer/rasterLayer.js';
+
+export type FormatOptions = GeoJSONOptions &
+  GMLOptions &
+  Record<string, unknown> & { gmlFormat?: keyof typeof gmlFormats };
+
+export type WMSFeatureProviderOptions = AbstractFeatureProviderOptions & {
+  /**
+   * the response type for the feature info
+   * @default 'text/xml'
+   */
+  responseType?: string;
+  /**
+   * format options for the GeojsonLayer, WfsLayer or GML format. To overwrite the gmlFormat option in WfsLayer format, use 'GML', 'GML2' or 'GML3' as string
+   */
+  formatOptions?: FormatOptions;
+  /**
+   * the projection of the data, if not encoded in the response
+   */
+  projection?: ProjectionOptions;
+  url: string;
+  /**
+   * @default {@link TilingScheme.GEOGRAPHIC}
+   */
+  tilingSchema?: TilingScheme;
+  /**
+   * @default 18
+   */
+  maxLevel?: number;
+  /**
+   * @default 0
+   */
+  minLevel?: number;
+  /**
+   * @default [256, 256]
+   */
+  tileSize?: Size;
+  extent?: Extent | ExtentOptions;
+  parameters: Record<string, string>;
+  /**
+   * @default '1.1.1'
+   */
+  version?: string;
+};
+
+const gmlFormats = {
+  GML: GML3,
+  GML2,
+  GML3,
+};
+
+const geojsonFormats = [
+  'application/geojson',
+  'application/json',
+  'application/vnd.geo+json',
+  'application/geo+json',
+];
+
+export function getFormat(
+  responseType: string,
+  options: FormatOptions = {},
+): null | FeatureFormat {
+  if (responseType === 'text/xml') {
+    const gmlFormat: GML3 | GML2 = options.gmlFormat
+      ? new gmlFormats[options.gmlFormat]()
+      : new GML2();
+    return new WFS({ ...options, gmlFormat });
+  }
+  if (geojsonFormats.includes(responseType)) {
+    return new GeoJSON(options);
+  }
+  if (responseType === 'application/vnd.ogc.gml') {
+    return new GML2(options);
+  }
+  if (
+    responseType === 'application/vnd.ogc.gml/3.1.1' ||
+    responseType === 'text/xml; subtype=gml/3.1.1'
+  ) {
+    return new GML3(options);
+  }
+  return null;
+}
+
+class WMSFeatureProvider extends AbstractFeatureProvider {
+  static get className(): string {
+    return 'WMSFeatureProvider';
+  }
+
+  static getDefaultOptions(): WMSFeatureProviderOptions {
+    return {
+      ...AbstractFeatureProvider.getDefaultOptions(),
+      responseType: 'text/xml',
+      style: undefined,
+      formatOptions: undefined,
+      projection: undefined,
+      url: '',
+      tilingSchema: TilingScheme.GEOGRAPHIC,
+      version: '1.1.1',
+      maxLevel: 0,
+      minLevel: 0,
+      tileSize: [256, 256],
+      parameters: {},
+      extent: undefined,
+    };
+  }
+
+  extent: Extent | null = null;
+
+  private _wmsSourceOptions: WMSSourceOptions;
+
+  /**
+   * The WmsLayer Source used to generate getFeatureInfo urls
+   */
+  private _wmsSource: TileWMS | undefined;
+
+  /**
+   * The response type of the get feature info response, e.g. text/xml
+   */
+  featureInfoResponseType: string;
+
+  private _formatOptions: FormatOptions | undefined;
+
+  /**
+   * The feature response format determined by the response type. Use formatOptions to configure the underlying ol.format.Feature
+   */
+  featureFormat: FeatureFormat | null;
+
+  /**
+   * The feature response projection, if not present in the response format.
+   */
+  projection: Projection | undefined;
+
+  constructor(layerName: string, options: WMSFeatureProviderOptions) {
+    super(layerName, options);
+    const defaultOptions = WMSFeatureProvider.getDefaultOptions();
+
+    if (options.extent) {
+      if (options.extent instanceof Extent) {
+        this.extent = options.extent;
+      } else {
+        this.extent = new Extent(options.extent);
+      }
+    }
+    this._wmsSourceOptions = {
+      url: options.url,
+      tilingSchema:
+        options.tilingSchema || (defaultOptions.tilingSchema as TilingScheme),
+      maxLevel: parseInteger(options.maxLevel, defaultOptions.maxLevel),
+      minLevel: parseInteger(options.minLevel, defaultOptions.minLevel),
+      tileSize: options.tileSize || (defaultOptions.tileSize as Size),
+      parameters: options.parameters,
+      version: options.version || (defaultOptions.version as string),
+    };
+
+    this._wmsSource = getWMSSource(this._wmsSourceOptions);
+    this.featureInfoResponseType =
+      options.responseType || (defaultOptions.responseType as string);
+
+    this._formatOptions = options.formatOptions || defaultOptions.formatOptions;
+    this.featureFormat = getFormat(
+      this.featureInfoResponseType,
+      options.formatOptions,
+    );
+    this.projection = options.projection
+      ? new Projection(options.projection)
+      : undefined;
+  }
+
+  get wmsSource(): TileWMS {
+    if (!this._wmsSource) {
+      throw new Error('Accessing destroyed WMSFeatureProvider');
+    }
+    return this._wmsSource;
+  }
+
+  set wmsSource(source: TileWMS) {
+    this._wmsSource = source;
+  }
+
+  featureResponseCallback(
+    data: GeoJSONObject,
+    coordinate: Coordinate,
+  ): Feature[] {
+    let features: Feature[];
+
+    try {
+      features = this.featureFormat!.readFeatures(data, {
+        dataProjection: this.projection ? this.projection.proj : undefined,
+        featureProjection: mercatorProjection.proj,
+      }) as Feature[];
+    } catch (ex) {
+      this.getLogger().warning(
+        'Features could not be read, please verify the featureInfoResponseType with the capabilities from the server',
+      );
+      return [];
+    }
+
+    if (Array.isArray(features)) {
+      features.forEach((feature) => {
+        const geometry = feature.getGeometry();
+        if (!geometry) {
+          feature.setGeometry(new Point(coordinate));
+        }
+      });
+      return features;
+    }
+
+    return [];
+  }
+
+  async getFeaturesByCoordinate(
+    coordinate: Coordinate,
+    resolution: number,
+  ): Promise<Feature[]> {
+    const projection = this.wmsSource.getProjection() as OLProjection;
+    let coords = coordinate;
+    if (projection) {
+      const transform = getTransform(mercatorProjection.proj, projection);
+      // error in TransformFunction type definition, remove undefined after openlayer fixed the type
+      coords = transform(coordinate.slice(), undefined, undefined);
+    }
+
+    const metersPerUnit = 111194.87428468118;
+    const url = this.wmsSource.getFeatureInfoUrl(
+      coords,
+      resolution / metersPerUnit,
+      projection,
+      { INFO_FORMAT: this.featureInfoResponseType },
+    );
+
+    if (url) {
+      let data: GeoJSONObject;
+      try {
+        data = await requestJson<GeoJSONObject>(url);
+      } catch (ex) {
+        this.getLogger().error(`Failed fetching WMS FeatureInfo ${url}`);
+        return [];
+      }
+      return this.featureResponseCallback(data, coordinate).map((f) =>
+        this.getProviderFeature(f),
+      );
+    }
+    return [];
+  }
+
+  toJSON(): WMSFeatureProviderOptions {
+    const config: Partial<WMSFeatureProviderOptions> = super.toJSON();
+    const defaultOptions = WMSFeatureProvider.getDefaultOptions();
+    if (this.featureInfoResponseType !== defaultOptions.responseType) {
+      config.responseType = this.featureInfoResponseType;
+    }
+
+    if (this._formatOptions !== defaultOptions.formatOptions) {
+      config.formatOptions = { ...this._formatOptions };
+    }
+
+    if (this.projection) {
+      config.projection = this.projection.toJSON();
+    }
+
+    config.url = this._wmsSourceOptions.url;
+    config.parameters = { ...this._wmsSourceOptions.parameters };
+
+    if (this._wmsSourceOptions.tilingSchema !== defaultOptions.tilingSchema) {
+      config.tilingSchema = this._wmsSourceOptions.tilingSchema;
+    }
+    if (this._wmsSourceOptions.maxLevel !== defaultOptions.maxLevel) {
+      config.maxLevel = this._wmsSourceOptions.maxLevel;
+    }
+    if (this._wmsSourceOptions.minLevel !== defaultOptions.minLevel) {
+      config.minLevel = this._wmsSourceOptions.minLevel;
+    }
+    if (this._wmsSourceOptions.version !== defaultOptions.version) {
+      config.version = this._wmsSourceOptions.version;
+    }
+    if (
+      this._wmsSourceOptions.tileSize[0] !== defaultOptions?.tileSize?.[0] ||
+      this._wmsSourceOptions.tileSize[1] !== defaultOptions?.tileSize?.[1]
+    ) {
+      config.tileSize = this._wmsSourceOptions.tileSize.slice();
+    }
+    if (this.extent) {
+      config.extent = this.extent.toJSON();
+    }
+
+    return config as WMSFeatureProviderOptions;
+  }
+
+  destroy(): void {
+    this._wmsSource = undefined;
+    this.featureFormat = null;
+    this.projection = undefined;
+    this._formatOptions = undefined;
+    super.destroy();
+  }
+}
+
+export default WMSFeatureProvider;
+featureProviderClassRegistry.registerClass(
+  WMSFeatureProvider.className,
+  WMSFeatureProvider,
+);

package/src/global.d.ts

@@ -0,0 +1,12 @@
+import type VcsApp from './vcsApp.js';
+import { mouseOverSymbol } from './util/editor/editorSymbols.js';
+
+declare global {
+  interface Window {
+    vcs: { apps: Map<string, VcsApp> };
+    opera?: string;
+  }
+  interface CSSStyleDeclaration {
+    [mouseOverSymbol]?: string;
+  }
+}

package/src/interaction/abstractInteraction.ts

@@ -0,0 +1,192 @@
+import { v4 as uuidv4 } from 'uuid';
+import type {
+  Cartesian2,
+  Cesium3DTileFeature,
+  Cesium3DTilePointFeature,
+  Entity,
+  Ray,
+} from '@vcmap-cesium/engine';
+import type { Coordinate } from 'ol/coordinate.js';
+import type { Feature } from 'ol';
+import {
+  EventType,
+  ModificationKeyType,
+  PointerEventType,
+  PointerKeyType,
+} from './interactionType.js';
+import type VcsMap from '../map/vcsMap.js';
+
+export type MapEvent = {
+  pointerEvent: PointerEventType;
+  map: VcsMap;
+  windowPosition: Cartesian2;
+  key: ModificationKeyType;
+  pointer: PointerKeyType;
+  /**
+   * position in web mercator coordinates
+   */
+  position?: Coordinate;
+  /**
+   * position in web mercator coordinates or image coordinates in ObliqueMap Map Mode
+   */
+  positionOrPixel?: Coordinate;
+  multipleTouch?: boolean;
+  time?: number | null;
+};
+
+export type ObliqueParameters = {
+  /**
+   * the image pixel clicked
+   */
+  pixel: import('ol/coordinate.js').Coordinate;
+  /**
+   * true if the terrain could not be taken into account
+   */
+  estimate?: boolean;
+};
+
+export type EventFeature =
+  | Feature
+  | Cesium3DTileFeature
+  | Cesium3DTilePointFeature
+  | Entity;
+
+export type InteractionEvent = MapEvent & {
+  type: EventType;
+  /**
+   * a potential feature at said location
+   */
+  feature?: EventFeature;
+  /**
+   * if set to true, the event chain is interrupted
+   */
+  stopPropagation?: boolean;
+  /**
+   * additional parameters from oblique if obliquemode is active
+   */
+  obliqueParameters?: ObliqueParameters;
+  ray?: Ray;
+  /**
+   * whether the position is exact, eg with translucentDepthPicking on
+   */
+  exactPosition?: boolean;
+};
+
+export type EventAfterEventHandler = Omit<
+  InteractionEvent,
+  'position' | 'positionOrPixel'
+> & { position: Coordinate; positionOrPixel: Coordinate };
+
+/**
+ * An abstract interface for all interactions
+ * @group Interaction
+ */
+class AbstractInteraction {
+  /**
+   * A unique identifier for this interaction
+   */
+  id: string;
+
+  private _defaultActive: number;
+
+  /**
+   * The current active bitmask for {@link EventType}
+   */
+  active: number;
+
+  private _defaultModificationKey: ModificationKeyType;
+
+  /**
+   * The current active {@link ModificationKeyType}
+   */
+  modificationKey: ModificationKeyType;
+
+  private _defaultPointerKey: PointerKeyType;
+
+  /**
+   * The currently active {@link PointerKeyType}
+   */
+  pointerKey: PointerKeyType;
+
+  /**
+   * @param  [defaultActive=EventType.NONE] - A bitmask representing the default  to listen to
+   * @param  [defaultModificationKey=ModificationKeyType.NONE] - A bitmask representing the default  keys to listen to
+   * @param  [defaultPointerKey=PointerKeyType.LEFT] - A bitmask representing the  pointer key to listen to
+   */
+  constructor(
+    defaultActive: EventType = EventType.NONE,
+    defaultModificationKey: ModificationKeyType = ModificationKeyType.NONE,
+    defaultPointerKey: PointerKeyType = PointerKeyType.LEFT,
+  ) {
+    this.id = uuidv4();
+    this._defaultActive = defaultActive;
+    this.active = this._defaultActive;
+    this._defaultModificationKey = defaultModificationKey;
+    this.modificationKey = this._defaultModificationKey;
+    this._defaultPointerKey = defaultPointerKey;
+    this.pointerKey = this._defaultPointerKey;
+  }
+
+  /**
+   * Main function, called when an event is raised for this interaction
+   */
+  // eslint-disable-next-line class-methods-use-this
+  pipe(event: InteractionEvent): Promise<InteractionEvent> {
+    return Promise.resolve(event);
+  }
+
+  /**
+   * Called when the modifier keys have changed.
+   */
+  // eslint-disable-next-line class-methods-use-this,no-unused-vars
+  modifierChanged(_modifier: ModificationKeyType): void {}
+
+  /**
+   * Sets the interaction active.
+   * Use boolean (true|false) to toggle default behavior.
+   * Pass it a bitmask of {@link EventType}
+   * to change the active state.
+   * Call without arguments to reset the default active, modification key and pointer Key behavior
+   */
+  setActive(active?: boolean | number): void {
+    if (typeof active === 'undefined') {
+      this.active = this._defaultActive;
+      this.modificationKey = this._defaultModificationKey;
+      this.pointerKey = this._defaultPointerKey;
+    } else if (typeof active === 'boolean') {
+      this.active = active ? this._defaultActive : EventType.NONE;
+    } else {
+      this.active = active;
+    }
+  }
+
+  /**
+   * Sets the modification key to listen to or the default modification key if none is provided.
+   */
+  setModification(mod?: ModificationKeyType): void {
+    if (mod) {
+      this.modificationKey = mod;
+    } else {
+      this.modificationKey = this._defaultModificationKey;
+    }
+  }
+
+  /**
+   * Sets the pointer key for this interaction or the default pointer if none is provided.
+   */
+  setPointer(pointer?: PointerKeyType): void {
+    if (pointer) {
+      this.pointerKey = pointer;
+    } else {
+      this.pointerKey = this._defaultPointerKey;
+    }
+  }
+
+  /**
+   * destroys the implementation, removing any created resources
+   */
+  // eslint-disable-next-line class-methods-use-this
+  destroy(): void {}
+}
+
+export default AbstractInteraction;

package/src/interaction/coordinateAtPixel.ts

@@ -0,0 +1,105 @@
+import {
+  Cartographic,
+  Cartesian3,
+  Math as CesiumMath,
+} from '@vcmap-cesium/engine';
+import type { Coordinate } from 'ol/coordinate.js';
+
+import AbstractInteraction, {
+  type InteractionEvent,
+} from './abstractInteraction.js';
+import Projection, { mercatorProjection } from '../util/projection.js';
+import {
+  EventType,
+  ModificationKeyType,
+  PointerKeyType,
+} from './interactionType.js';
+import { transformFromImage } from '../oblique/helpers.js';
+import type CesiumMap from '../map/cesiumMap.js';
+import type ObliqueMap from '../map/obliqueMap.js';
+
+/**
+ * @group Interaction
+ */
+class CoordinateAtPixel extends AbstractInteraction {
+  private _scratchCartographic = new Cartographic();
+
+  private _scratchCartesian = new Cartesian3();
+
+  constructor() {
+    super(EventType.ALL, ModificationKeyType.ALL, PointerKeyType.ALL);
+
+    this.setActive();
+  }
+
+  async pipe(event: InteractionEvent): Promise<InteractionEvent> {
+    if (event.map.className === 'CesiumMap') {
+      return this._cesiumHandler(event);
+    } else if (event.map.className === 'ObliqueMap') {
+      return CoordinateAtPixel.obliqueHandler(event);
+    }
+    return event;
+  }
+
+  private _cesiumHandler(event: InteractionEvent): Promise<InteractionEvent> {
+    const cesiumMap = event.map as CesiumMap;
+    const scene = cesiumMap.getScene();
+    if (!scene) {
+      return Promise.resolve(event);
+    }
+    event.ray = scene.camera.getPickRay(event.windowPosition);
+    if (!event.ray) {
+      return Promise.resolve(event);
+    }
+    const pickResult = scene.globe.pick(
+      event.ray,
+      scene,
+      this._scratchCartesian,
+    );
+    if (!pickResult) {
+      event.position = [0, 0, 0];
+    } else {
+      this._scratchCartographic = Cartographic.fromCartesian(
+        pickResult,
+        scene.globe.ellipsoid,
+        this._scratchCartographic,
+      );
+      event.position = Projection.wgs84ToMercator(
+        [
+          CesiumMath.toDegrees(this._scratchCartographic.longitude),
+          CesiumMath.toDegrees(this._scratchCartographic.latitude),
+          this._scratchCartographic.height,
+        ],
+        true,
+      );
+    }
+    event.positionOrPixel = event.position;
+    return Promise.resolve(event);
+  }
+
+  static obliqueHandler(event: InteractionEvent): Promise<InteractionEvent> {
+    const obliqueMap = event.map as ObliqueMap;
+    const image = obliqueMap.currentImage;
+    if (image) {
+      // don't use TerrainLayer for coordinate Transformation if the event is a move or drag event,
+      // to avoid requesting the terrain each mousemove...
+      // XXX but what about DRAGSTART and DRAGEND? this could be usefull, no?
+      const move = event.type & (EventType.MOVE ^ EventType.DRAGEVENTS);
+      const pixel = (event.position as Coordinate).slice(0, 2);
+      if (Number.isFinite(pixel[0]) && Number.isFinite(pixel[1])) {
+        return transformFromImage(image, pixel, {
+          dontUseTerrain: !!move,
+          dataProjection: mercatorProjection,
+        }).then((coordinates) => {
+          event.obliqueParameters = { pixel, estimate: coordinates.estimate };
+          event.position = coordinates.coords;
+          return event;
+        });
+      }
+    }
+    event.stopPropagation = true;
+    return Promise.resolve(event);
+  }
+}
+
+export default CoordinateAtPixel;