@vcmap/core 5.0.0-rc.8 → 5.0.0

package/src/map/baseOLMap.ts

@@ -0,0 +1,241 @@
+import { Cartesian2 } from '@vcmap-cesium/engine';
+import { unByKey } from 'ol/Observable.js';
+import OLMap from 'ol/Map.js';
+import { defaults as defaultInteractions } from 'ol/interaction.js';
+import type { Collection as OLCollection, MapBrowserEvent } from 'ol';
+import type { Layer as OLLayer } from 'ol/layer.js';
+import type { EventsKey } from 'ol/events.js';
+import type { Coordinate } from 'ol/coordinate.js';
+
+import VcsMap from './vcsMap.js';
+import { vcsLayerName } from '../layer/layerSymbols.js';
+import {
+  ModificationKeyType,
+  PointerEventType,
+  PointerKeyType,
+} from '../interaction/interactionType.js';
+import { mapClassRegistry } from '../classRegistry.js';
+import type LayerCollection from '../util/layerCollection.js';
+import type Layer from '../layer/layer.js';
+
+export function ensureLayerInCollection(
+  layers: OLCollection<OLLayer>,
+  layer: OLLayer,
+  layerCollection: LayerCollection,
+): void {
+  const targetIndex = layerCollection.indexOfKey(layer[vcsLayerName]) as number;
+  if (targetIndex > -1) {
+    const layerArray = layers.getArray();
+
+    if (!layerArray.includes(layer)) {
+      let indexInOlCollection = layerArray.findIndex((l) => {
+        const layerIndex = layerCollection.indexOfKey(
+          l[vcsLayerName],
+        ) as number;
+        return layerIndex > targetIndex;
+      });
+      if (indexInOlCollection === -1) {
+        indexInOlCollection = layerArray.length;
+      }
+      layers.insertAt(indexInOlCollection, layer);
+    }
+  }
+}
+
+/**
+ * @group Map
+ */
+class BaseOLMap extends VcsMap<OLLayer> {
+  static get className(): string {
+    return 'BaseOLMap';
+  }
+
+  private _olMap: OLMap | null = null;
+
+  private _olListeners: EventsKey[] = [];
+
+  get splitPosition(): number {
+    return super.splitPosition;
+  }
+
+  set splitPosition(position: number) {
+    super.splitPosition = position;
+    this.requestRender();
+  }
+
+  get olMap(): OLMap | null {
+    return this._olMap;
+  }
+
+  private _raisePointerInteraction(
+    olEvent: MapBrowserEvent<PointerEvent>,
+    pointerEvent: PointerEventType,
+  ): void {
+    const pointerMap: Record<number, PointerKeyType> = {
+      '-1': PointerKeyType.ALL,
+      0: PointerKeyType.LEFT,
+      1: PointerKeyType.MIDDLE,
+      2: PointerKeyType.RIGHT,
+    };
+    let key = olEvent.originalEvent.shiftKey
+      ? ModificationKeyType.SHIFT
+      : ModificationKeyType.NONE;
+    key = olEvent.originalEvent.ctrlKey ? ModificationKeyType.CTRL : key;
+    key = olEvent.originalEvent.altKey ? ModificationKeyType.ALT : key;
+    if (key !== ModificationKeyType.NONE) {
+      olEvent.preventDefault();
+    }
+    olEvent.originalEvent.preventDefault();
+    const position = [olEvent.coordinate[0], olEvent.coordinate[1], 0];
+    this.pointerInteractionEvent.raiseEvent({
+      map: this,
+      position,
+      positionOrPixel: position,
+      windowPosition: Cartesian2.fromArray(olEvent.pixel, 0, new Cartesian2()),
+      key,
+      pointer: pointerMap[olEvent.originalEvent.button || 0],
+      pointerEvent,
+    });
+  }
+
+  setTarget(target: string | HTMLElement | null): void {
+    super.setTarget(target);
+    if (this._olMap && this.target) {
+      this._olMap.updateSize();
+    }
+  }
+
+  initialize(): Promise<void> {
+    if (!this._olMap) {
+      this._olMap = new OLMap({
+        layers: [],
+        controls: [],
+        interactions: defaultInteractions({
+          altShiftDragRotate: false,
+          pinchRotate: false,
+          shiftDragZoom: false,
+          doubleClickZoom: false,
+        }),
+        target: this.mapElement,
+      });
+      const pointerDownListener =
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        this._olMap.on('pointerdown', (event) => {
+          this._raisePointerInteraction(
+            event as MapBrowserEvent<PointerEvent>,
+            PointerEventType.DOWN,
+          );
+        });
+      const pointerUpListener =
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        this._olMap.on('pointerup', (event) => {
+          this._raisePointerInteraction(
+            event as MapBrowserEvent<PointerEvent>,
+            PointerEventType.UP,
+          );
+        });
+
+      const pointerMoveListener = this._olMap.on('pointermove', (event) => {
+        this._raisePointerInteraction(
+          event as MapBrowserEvent<PointerEvent>,
+          PointerEventType.MOVE,
+        );
+      });
+
+      const postRenderListener = this._olMap.on(
+        'postrender',
+        (originalEvent) => {
+          this.postRender.raiseEvent({ map: this, originalEvent });
+        },
+      );
+
+      this._olListeners.push(
+        pointerDownListener,
+        pointerUpListener,
+        pointerMoveListener,
+        postRenderListener,
+      );
+    }
+    return Promise.resolve();
+  }
+
+  async activate(): Promise<void> {
+    await super.activate();
+    if (this.active && this._olMap) {
+      this._olMap.updateSize();
+    }
+  }
+
+  indexChanged(layer: Layer): void {
+    const viz = this.getVisualizationsForLayer(layer);
+    if (viz) {
+      viz.forEach((olLayer) => {
+        const layers = (this._olMap as OLMap).getLayers();
+        layers.remove(olLayer);
+        ensureLayerInCollection(
+          layers as OLCollection<OLLayer>,
+          olLayer,
+          this.layerCollection,
+        );
+      });
+    }
+  }
+
+  addOLLayer(olLayer: OLLayer): void {
+    if (this.validateVisualization(olLayer)) {
+      this.addVisualization(olLayer);
+      ensureLayerInCollection(
+        (this._olMap as OLMap).getLayers() as OLCollection<OLLayer>,
+        olLayer,
+        this.layerCollection,
+      );
+    }
+  }
+
+  /**
+   * Internal API for deregistering representations.
+   */
+  removeOLLayer(olLayer: OLLayer): void {
+    this.removeVisualization(olLayer);
+    if (this._olMap) {
+      this._olMap.getLayers().remove(olLayer);
+    }
+  }
+
+  disableMovement(prevent: boolean): void {
+    super.disableMovement(prevent);
+    if (this._olMap) {
+      this._olMap.getInteractions().forEach((i) => {
+        i.setActive(!prevent);
+      });
+    }
+  }
+
+  // eslint-disable-next-line no-unused-vars
+  getCurrentResolution(_coordinate: Coordinate): number {
+    const view = this.olMap ? this.olMap.getView() : null;
+    if (view) {
+      return view.getResolution() ?? 1;
+    }
+    return 1;
+  }
+
+  requestRender(): void {
+    if (this._olMap) {
+      this._olMap.render();
+    }
+  }
+
+  destroy(): void {
+    if (this._olMap) {
+      this._olMap.setTarget();
+    }
+    unByKey(this._olListeners);
+    super.destroy();
+  }
+}
+
+mapClassRegistry.registerClass(BaseOLMap.className, BaseOLMap);
+export default BaseOLMap;

package/src/map/cameraLimiter.ts

@@ -0,0 +1,229 @@
+import {
+  Camera,
+  Cartographic,
+  Ellipsoid,
+  Math as CesiumMath,
+  sampleTerrain,
+  sampleTerrainMostDetailed,
+} from '@vcmap-cesium/engine';
+import { checkMaybe } from '@vcsuite/check';
+import { parseInteger, parseNumber, parseEnumValue } from '@vcsuite/parsers';
+import {
+  getTerrainProviderForUrl,
+  isTerrainTileAvailable,
+} from '../layer/terrainHelpers.js';
+
+/**
+ * Enumeration of camera limiter modes.
+ */
+export enum CameraLimiterMode {
+  HEIGHT = 'height',
+  DISTANCE = 'distance',
+}
+
+export type CameraLimiterOptions = {
+  /**
+   *  required if mode is distance.
+   */
+  terrainUrl?: string;
+  /**
+   * @default 'height'
+   */
+  mode?: CameraLimiterMode;
+  /**
+   * @default 200
+   */
+  limit?: number;
+  /**
+   * the level at which to request terrain data. setting this to null will request most detailed
+   * @default 12
+   */
+  level?: number | null;
+};
+
+/**
+ * Can limit a Cesium.Cameras position based on absolute height or distance to a given terrain
+ */
+class CameraLimiter {
+  static get className(): string {
+    return 'CameraLimiter';
+  }
+
+  static getDefaultOptions(): CameraLimiterOptions {
+    return {
+      mode: CameraLimiterMode.HEIGHT,
+      terrainUrl: undefined,
+      limit: 200,
+      level: 12,
+    };
+  }
+
+  /**
+   * The mode to use. When using DISTANCE mode, be sure to have a terrainProvider set.
+   */
+  mode: CameraLimiterMode;
+
+  private _terrainUrl: string | undefined;
+
+  /**
+   * The minimum height/distance to the terrain the camera must maintain
+   */
+  limit: number;
+
+  /**
+   * The level to request terrain data at
+   */
+  level: number | null;
+
+  /**
+   * last checked camera position
+   */
+  lastCheckedPosition = new Cartographic();
+
+  /**
+   * last updated terrain height
+   */
+  private _terrainHeight: number | null = null;
+
+  private _updatingTerrainHeight = false;
+
+  constructor(options: CameraLimiterOptions) {
+    const defaultOptions = CameraLimiter.getDefaultOptions();
+    this.mode = parseEnumValue(
+      options.mode,
+      CameraLimiterMode,
+      defaultOptions.mode as CameraLimiterMode,
+    );
+
+    this._terrainUrl = options.terrainUrl || defaultOptions.terrainUrl;
+    this.limit = parseNumber(options.limit, defaultOptions.limit);
+    this.level =
+      options.level === null
+        ? null
+        : parseInteger(options.level, defaultOptions.level as number);
+  }
+
+  /**
+   * The url of the terrain to use. Required for mode DISTANCE
+   */
+  get terrainUrl(): string | undefined {
+    return this._terrainUrl;
+  }
+
+  set terrainUrl(url: string | undefined) {
+    checkMaybe(url, String);
+
+    if (this._terrainUrl !== url) {
+      this._terrainUrl = url;
+    }
+  }
+
+  private async _limitWithLevel(
+    cameraCartographic: Cartographic,
+  ): Promise<Cartographic[]> {
+    const terrainProvider = await getTerrainProviderForUrl(
+      this.terrainUrl as string,
+      {},
+    );
+    if (
+      this.level &&
+      isTerrainTileAvailable(terrainProvider, this.level, cameraCartographic)
+    ) {
+      return sampleTerrain(terrainProvider, this.level, [cameraCartographic]);
+    }
+    return this._limitMostDetailed(cameraCartographic);
+  }
+
+  private async _limitMostDetailed(
+    cameraCartographic: Cartographic,
+  ): Promise<Cartographic[]> {
+    const terrainProvider = await getTerrainProviderForUrl(
+      this.terrainUrl as string,
+      {},
+    );
+    return sampleTerrainMostDetailed(terrainProvider, [cameraCartographic]);
+  }
+
+  private async _updateTerrainHeight(
+    cameraCartographic: Cartographic,
+  ): Promise<void> {
+    if (
+      !this._updatingTerrainHeight &&
+      !cameraCartographic.equalsEpsilon(
+        this.lastCheckedPosition,
+        CesiumMath.EPSILON5,
+      )
+    ) {
+      this._updatingTerrainHeight = true;
+      const [updatedPosition] =
+        this.level != null
+          ? await this._limitWithLevel(cameraCartographic.clone())
+          : await this._limitMostDetailed(cameraCartographic.clone());
+      this._terrainHeight = updatedPosition.height;
+      this.lastCheckedPosition = cameraCartographic;
+      this._updatingTerrainHeight = false;
+    }
+  }
+
+  /**
+   * Limits the given camera based on this limiters specs.
+   */
+  limitCamera(camera: Camera): Promise<void> {
+    let promise = Promise.resolve();
+    const cameraCartographic = Cartographic.fromCartesian(camera.position);
+    if (cameraCartographic) {
+      if (this.mode === CameraLimiterMode.DISTANCE && this.terrainUrl) {
+        promise = this._updateTerrainHeight(cameraCartographic);
+        if (
+          this._terrainHeight &&
+          cameraCartographic.height - this._terrainHeight < this.limit
+        ) {
+          const newHeight = this._terrainHeight + this.limit;
+          Cartographic.toCartesian(
+            new Cartographic(
+              cameraCartographic.longitude,
+              cameraCartographic.latitude,
+              newHeight,
+            ),
+            Ellipsoid.WGS84,
+            camera.position,
+          );
+        }
+      } else if (cameraCartographic.height < this.limit) {
+        Cartographic.toCartesian(
+          new Cartographic(
+            cameraCartographic.longitude,
+            cameraCartographic.latitude,
+            this.limit,
+          ),
+          Ellipsoid.WGS84,
+          camera.position,
+        );
+      }
+    }
+    return promise;
+  }
+
+  toJSON(): CameraLimiterOptions {
+    const config: CameraLimiterOptions = {};
+    const defaultOptions = CameraLimiter.getDefaultOptions();
+    if (this.terrainUrl) {
+      config.terrainUrl = this.terrainUrl;
+    }
+
+    if (this.limit !== defaultOptions.limit) {
+      config.limit = this.limit;
+    }
+
+    if (this.mode !== defaultOptions.mode) {
+      config.mode = this.mode;
+    }
+
+    if (this.level !== defaultOptions.level) {
+      config.level = this.level;
+    }
+    return config;
+  }
+}
+
+export default CameraLimiter;