@vcmap/core 5.0.0-rc.0

package/src/vcs/vcm/maps/baseOLMap.js

@@ -0,0 +1,257 @@
+import { Cartesian2 } from '@vcmap/cesium';
+import { unByKey } from 'ol/Observable.js';
+import OLMap from 'ol/Map.js';
+import { defaults as defaultInteractions } from 'ol/interaction.js';
+import VcsMap from './map.js';
+import { vcsLayerName } from '../layer/layerSymbols.js';
+import { ModificationKeyType, PointerEventType, PointerKeyType } from '../interaction/interactionType.js';
+import { VcsClassRegistry } from '../classRegistry.js';
+
+/**
+ * @param {import("ol/Collection").default<import("ol/layer/Layer").default>} layers
+ * @param {import("ol/layer/Layer").default} layer
+ * @param {import("@vcmap/core").LayerCollection} layerCollection
+ * @private
+ */
+export function ensureLayerInCollection(layers, layer, layerCollection) {
+  const targetIndex = layerCollection.indexOfKey(layer[vcsLayerName]);
+  if (targetIndex > -1) {
+    const layerArray = layers.getArray();
+
+    if (!layerArray.includes(layer)) {
+      let indexInOlCollection = layerArray.findIndex((l) => {
+        const layerIndex = layerCollection.indexOfKey(l[vcsLayerName]);
+        return layerIndex > targetIndex;
+      });
+      if (indexInOlCollection === -1) {
+        indexInOlCollection = layerArray.length;
+      }
+      layers.insertAt(indexInOlCollection, layer);
+    }
+  }
+}
+
+/**
+ * Openlayers Map base map.
+ * @class
+ * @abstract
+ * @api
+ * @export
+ * @extends {VcsMap}
+ */
+class BaseOLMap extends VcsMap {
+  static get className() { return 'vcs.vcm.maps.BaseOLMap'; }
+
+  /**
+   * @param {VcsMapOptions} options
+   */
+  constructor(options) {
+    super(options);
+
+    /**
+     * the openlayers map object, set after initialization
+     * @private
+     * @type {import("ol/Map").default|null}
+     */
+    this._olMap = null;
+    /**
+     * @type {Array<import("ol/events").EventsKey>}
+     * @private
+     */
+    this._olListeners = [];
+  }
+
+  /**
+   * @returns {import("ol/Map").default}
+   * @readonly
+   * @api
+   */
+  get olMap() {
+    return this._olMap;
+  }
+
+  /**
+   * @param {import("ol/MapBrowserEvent").default} olEvent
+   * @param {PointerEventType} pointerEvent
+   * @private
+   */
+  _raisePointerInteraction(olEvent, pointerEvent) {
+    const pointerMap = {
+      '-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,
+    });
+  }
+
+  /**
+   * @inheritDoc
+   * @param {string|HTMLElement|null} target
+   */
+  setTarget(target) {
+    super.setTarget(target);
+    if (this._olMap && this.target) {
+      this._olMap.updateSize();
+    }
+  }
+
+  /**
+   * @inheritDoc
+   * @returns {Promise<void>}
+   */
+  async initialize() {
+    if (!this._olMap) {
+      this._olMap = new OLMap({
+        layers: [],
+        controls: [],
+        interactions: defaultInteractions({
+          altShiftDragRotate: false,
+          pinchRotate: false,
+          shiftDragZoom: false,
+          doubleClickZoom: false,
+        }),
+        target: this.mapElement,
+      });
+
+      // @ts-ignore
+      const pointerDownListener = /** @type {import("ol/events").EventsKey} */ (this.olMap.on('pointerdown', (event) => {
+        this._raisePointerInteraction(
+          /** @type {import("ol/MapBrowserEvent").default}  */ (event),
+          PointerEventType.DOWN,
+        );
+      }));
+      // @ts-ignore
+      const pointerUpListener = /** @type {import("ol/events").EventsKey} */ (this.olMap.on('pointerup', (event) => {
+        this._raisePointerInteraction(
+          /** @type {import("ol/MapBrowserEvent").default}  */ (event),
+          PointerEventType.UP,
+        );
+      }));
+      // @ts-ignore
+      const pointerMoveListener = /** @type {import("ol/events").EventsKey} */ (this.olMap.on('pointermove', (event) => {
+        this._raisePointerInteraction(event, PointerEventType.MOVE);
+      }));
+      this._olListeners.push(pointerDownListener, pointerUpListener, pointerMoveListener);
+    }
+  }
+
+  /**
+   * @inheritDoc
+   * @returns {Promise<void>}
+   */
+  async activate() {
+    await super.activate();
+    if (this.active) {
+      this._olMap.updateSize();
+    }
+  }
+
+  /**
+   * @inheritDoc
+   * @param {import("@vcmap/core").Layer} layer
+   */
+  indexChanged(layer) {
+    const viz = this.getVisualizationsForLayer(layer);
+    if (viz) {
+      viz.forEach(/** @param {import("ol/layer/Layer").default<import("ol/source").Source>} olLayer */ (olLayer) => {
+        const layers = /** @type {import("ol/Collection").default<import("ol/layer/Layer").default<import("ol/source").Source>>} */
+          (this._olMap.getLayers());
+        layers.remove(olLayer);
+        ensureLayerInCollection(layers, olLayer, this.layerCollection);
+      });
+    }
+  }
+
+  /**
+   * Internal API for registering representations.
+   * @param {import("ol/layer/Layer").default<import("ol/source").Source>} olLayer
+   */
+  addOLLayer(olLayer) {
+    if (this.validateVisualization(olLayer)) {
+      this.addVisualization(olLayer);
+      ensureLayerInCollection(
+        /** @type {import("ol/Collection").default<import("ol/layer/Layer").default<import("ol/source").Source>>} */
+        (this._olMap.getLayers()),
+        olLayer,
+        this.layerCollection,
+      );
+    }
+  }
+
+  /**
+   * Internal API for deregistering representations.
+   * @param {import("ol/layer/Layer").default<import("ol/source").Source>} olLayer
+   */
+  removeOLLayer(olLayer) {
+    this.removeVisualization(olLayer);
+    this._olMap.getLayers().remove(olLayer);
+  }
+
+  /**
+   * @param {boolean} prevent
+   * @inheritDoc
+   */
+  disableMovement(prevent) {
+    super.disableMovement(prevent);
+    if (this._olMap) {
+      this._olMap.getInteractions().forEach((i) => { i.setActive(!prevent); });
+    }
+  }
+
+  /**
+   * @inheritDoc
+   * @param {import("ol/coordinate").Coordinate} coordinate
+   * @returns {number}
+   * @api
+   */
+  // eslint-disable-next-line no-unused-vars
+  getCurrentResolution(coordinate) {
+    const view = this.olMap ? this.olMap.getView() : null;
+    if (view) {
+      return view.getResolution();
+    }
+    return 1;
+  }
+
+  /**
+   * @inheritDoc
+   * @api
+   */
+  requestRender() {
+    if (this._olMap) {
+      this._olMap.render();
+    }
+  }
+
+  /**
+   * @inheritDoc
+   * @api
+   */
+  destroy() {
+    if (this._olMap) {
+      this._olMap.setTarget(null);
+    }
+    unByKey(this._olListeners);
+    super.destroy();
+  }
+}
+
+VcsClassRegistry.registerClass(BaseOLMap.className, BaseOLMap);
+export default BaseOLMap;

package/src/vcs/vcm/maps/cameraLimiter.js

@@ -0,0 +1,219 @@
+import { Cartographic, Ellipsoid, Math as CesiumMath } from '@vcmap/cesium';
+import { checkMaybe } from '@vcsuite/check';
+import { parseInteger, parseNumber, parseEnumValue } from '@vcsuite/parsers';
+import {
+  sampleCesiumTerrain,
+  sampleCesiumTerrainMostDetailed,
+  getTerrainProviderForUrl,
+  isTerrainTileAvailable,
+} from '../layer/terrainHelpers.js';
+
+/**
+ * @typedef {Object} CameraLimiterOptions
+ * @property {string|undefined} terrainUrl - required if mode is distance.
+ * @property {string|undefined} [mode="height"] - either "height" or "distance".
+ * @property {number} [limit=200]
+ * @property {number|null} [level=12] - the level at which to request terrain data. setting this to null will request most detailed
+ * @api
+ */
+
+/**
+ * Enumeration of camera limiter modes.
+ * @enum {string}
+ * @property {string} HEIGHT
+ * @property {string} DISTANCE
+ */
+export const Mode = {
+  HEIGHT: 'height',
+  DISTANCE: 'distance',
+};
+
+/**
+ * Can limit a Cesium.Cameras position based on absolute height or distance to a given terrain
+ * @class
+ * @export
+ * @api
+ */
+class CameraLimiter {
+  static get className() { return 'vcs.vcm.maps.CameraLimiter'; }
+
+  /**
+   * @returns {CameraLimiterOptions}
+   */
+  static getDefaultOptions() {
+    return {
+      mode: Mode.HEIGHT,
+      terrainUrl: undefined,
+      limit: 200,
+      level: 12,
+    };
+  }
+
+  /**
+   * @param {CameraLimiterOptions} options
+   */
+  constructor(options) {
+    const defaultOptions = CameraLimiter.getDefaultOptions();
+    /**
+     * The mode to use. When using DISTANCE mode, be sure to have a terrainProvider set.
+     * @type {Mode}
+     * @api
+     */
+    this.mode = parseEnumValue(options.mode, Mode, defaultOptions.mode);
+    /**
+     * @type {string|null}
+     * @private
+     */
+    this._terrainUrl = options.terrainUrl || defaultOptions.terrainUrl;
+    /**
+     * @type {import("@vcmap/cesium").CesiumTerrainProvider|null}
+     * @private
+     */
+    this._terrainProvider = this._terrainUrl ? getTerrainProviderForUrl({ url: this._terrainUrl }) : null;
+    /**
+     * The minimum height/distance to the terrain the camera must maintain
+     * @type {number}
+     * @api
+     */
+    this.limit = parseNumber(options.limit, defaultOptions.limit);
+    /**
+     * The level to request terrain data at
+     * @type {number|null}
+     * @api
+     */
+    this.level = options.level === null ? null : parseInteger(options.level, defaultOptions.level);
+    /**
+     * last checked camera position
+     * @type {import("@vcmap/cesium").Cartographic}
+     */
+    this.lastCheckedPosition = new Cartographic();
+    /**
+     * last updated terrain height
+     * @type {number|null}
+     * @private
+     */
+    this._terrainHeight = null;
+    /**
+     * @type {boolean}
+     * @private
+     */
+    this._updatingTerrainHeight = false;
+  }
+
+  /**
+   * The url of the terrain to use. Required for mode DISTANCE
+   * @type {string|null}
+   * @api
+   */
+  get terrainUrl() {
+    return this._terrainUrl;
+  }
+
+  /**
+   * @param {string|null} url
+   */
+  set terrainUrl(url) {
+    checkMaybe(url, String);
+
+    if (this._terrainUrl !== url) {
+      this._terrainUrl = url;
+      this._terrainProvider = this._terrainUrl ? getTerrainProviderForUrl({ url: this._terrainUrl }) : null;
+    }
+  }
+
+  /**
+   * @param {import("@vcmap/cesium").Cartographic} cameraCartographic
+   * @returns {Promise<Array<import("@vcmap/cesium").Cartographic>>}
+   * @private
+   */
+  _limitWithLevel(cameraCartographic) {
+    if (isTerrainTileAvailable(this._terrainProvider, this.level, cameraCartographic)) {
+      return sampleCesiumTerrain(this._terrainProvider, this.level, [cameraCartographic]);
+    }
+    return this._limitMostDetailed(cameraCartographic);
+  }
+
+  /**
+   * @param {import("@vcmap/cesium").Cartographic} cameraCartographic
+   * @returns {Promise<Array<import("@vcmap/cesium").Cartographic>>}
+   * @private
+   */
+  _limitMostDetailed(cameraCartographic) {
+    return sampleCesiumTerrainMostDetailed(this._terrainProvider, [cameraCartographic]);
+  }
+
+  /**
+   * @param {import("@vcmap/cesium").Cartographic} cameraCartographic
+   * @returns {Promise<void>}
+   * @private
+   */
+  async _updateTerrainHeight(cameraCartographic) {
+    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.
+   * @param {import("@vcmap/cesium").Camera} camera
+   * @api
+   * @returns {Promise<void>}
+   */
+  limitCamera(camera) {
+    let promise = Promise.resolve();
+    const cameraCartographic = Cartographic.fromCartesian(camera.position);
+    if (cameraCartographic) {
+      if (this.mode === Mode.DISTANCE && this._terrainProvider) {
+        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;
+  }
+
+  /**
+   * @returns {CameraLimiterOptions}
+   */
+  getConfigObject() {
+    const config = {};
+    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;