@vcmap/core 5.0.0-rc.8 → 5.0.0

package/src/layer/oblique/vectorObliqueImpl.ts

@@ -0,0 +1,497 @@
+import VectorSource from 'ol/source/Vector.js';
+import OLVectorLayer from 'ol/layer/Vector.js';
+import { unByKey } from 'ol/Observable.js';
+import Feature from 'ol/Feature.js';
+import type { EventsKey } from 'ol/events.js';
+import type { Extent } from 'ol/extent.js';
+import type { SplitDirection } from '@vcmap-cesium/engine';
+import type { Geometry } from 'ol/geom.js';
+
+import { mercatorProjection } from '../../util/projection.js';
+import {
+  mercatorGeometryToImageGeometry,
+  imageGeometryToMercatorGeometry,
+  getPolygonizedGeometry,
+  setNewGeometry,
+} from './obliqueHelpers.js';
+import {
+  actuallyIsCircle,
+  alreadyTransformedToImage,
+  doNotTransform,
+  obliqueGeometry,
+  originalFeatureSymbol,
+} from '../vectorSymbols.js';
+import LayerObliqueImpl from './layerObliqueImpl.js';
+import { synchronizeFeatureVisibilityWithSource } from '../vectorHelpers.js';
+import { FeatureLayerImplementation } from '../featureLayer.js';
+import type { VectorImplementationOptions } from '../vectorLayer.js';
+import type ObliqueMap from '../../map/obliqueMap.js';
+import type GlobalHider from '../globalHider.js';
+import type StyleItem from '../../style/styleItem.js';
+import type FeatureVisibility from '../featureVisibility.js';
+import type ObliqueImage from '../../oblique/obliqueImage.js';
+
+/**
+ * represents a specific vector layer for oblique.
+ */
+class VectorObliqueImpl
+  extends LayerObliqueImpl
+  implements FeatureLayerImplementation
+{
+  static get className(): string {
+    return 'VectorObliqueImpl';
+  }
+
+  obliqueSource = new VectorSource({});
+
+  private _featureListeners: Record<string, Record<string, EventsKey>> = {};
+
+  private _sourceListener: EventsKey[] = [];
+
+  /**
+   * The extent of the current image for which features where fetched
+   */
+  currentExtent: Extent | null = null;
+
+  /**
+   * The image name for which the current features where fetched
+   */
+  fetchedFeaturesForImageName: string | null = null;
+
+  private _updatingMercator: Record<
+    string,
+    number | boolean | null | NodeJS.Timeout
+  > = {};
+
+  private _updatingOblique: Record<
+    string,
+    number | boolean | null | NodeJS.Timeout
+  > = {};
+
+  private _featureVisibilityListeners: (() => void)[] = [];
+
+  globalHider: GlobalHider;
+
+  source: VectorSource;
+
+  style: StyleItem;
+
+  featureVisibility: FeatureVisibility;
+
+  olLayer: OLVectorLayer<VectorSource> | null = null;
+
+  private _imageChangedListener: (() => void) | null | undefined = null;
+
+  constructor(map: ObliqueMap, options: VectorImplementationOptions) {
+    super(map, options);
+
+    this.globalHider = options.globalHider as GlobalHider;
+    this.source = options.source;
+    this.style = options.style;
+    this.featureVisibility = options.featureVisibility;
+  }
+
+  getOLLayer(): OLVectorLayer<VectorSource> {
+    return new OLVectorLayer({
+      visible: false,
+      source: this.obliqueSource,
+      style: this.style.style,
+    });
+  }
+
+  // eslint-disable-next-line no-unused-vars
+  updateStyle(style: StyleItem, _silent?: boolean): void {
+    this.style = style;
+    if (this.initialized && this.olLayer) {
+      this.olLayer.setStyle(this.style.style);
+    }
+  }
+
+  // eslint-disable-next-line class-methods-use-this,no-unused-vars
+  updateSplitDirection(_splitDirection: SplitDirection): void {}
+
+  /**
+   * clears the current image and fetches features for the next
+   */
+  private _onObliqueImageChanged(): void {
+    this._clearCurrentImage();
+    this._fetchFeaturesInView();
+  }
+
+  private _featureInExtent(feature: Feature): boolean {
+    if (this.currentExtent) {
+      const geometry = feature.getGeometry();
+      if (geometry) {
+        return (
+          geometry[alreadyTransformedToImage] ||
+          geometry.intersectsExtent(this.currentExtent)
+        );
+      }
+    }
+    return false;
+  }
+
+  protected _addSourceListeners(): void {
+    this._sourceListener.push(
+      this.source.on('addfeature', (event) => {
+        const f = event.feature as Feature;
+        if (this._featureInExtent(f)) {
+          // eslint-disable-next-line no-void
+          void this.addFeature(f);
+        }
+      }),
+    );
+
+    this._sourceListener.push(
+      this.source.on('removefeature', (event) => {
+        this.removeFeature(event.feature as Feature);
+      }),
+    );
+
+    this._sourceListener.push(
+      this.source.on('changefeature', (event) => {
+        const f = event.feature as Feature;
+        const newFeatureId = f.getId() as string | number;
+        if (!this._featureListeners[newFeatureId] && this._featureInExtent(f)) {
+          // eslint-disable-next-line no-void
+          void this.addFeature(f);
+        }
+      }),
+    );
+  }
+
+  async activate(): Promise<void> {
+    if (!this.active) {
+      await super.activate();
+      if (this.active) {
+        this.olLayer!.setVisible(true);
+        if (this._featureVisibilityListeners.length === 0) {
+          this._featureVisibilityListeners =
+            synchronizeFeatureVisibilityWithSource(
+              this.featureVisibility,
+              this.source,
+              this.globalHider,
+            );
+        }
+        this._addSourceListeners();
+        this._imageChangedListener = this.map.imageChanged?.addEventListener(
+          this._onObliqueImageChanged.bind(this),
+        );
+        this._fetchFeaturesInView();
+      }
+    }
+  }
+
+  private addFeature(originalFeature: Feature): Promise<void> {
+    if (!this.active) {
+      this.fetchedFeaturesForImageName = null;
+    }
+    if (this.active && this.currentExtent) {
+      const id = originalFeature.getId() as string | number;
+      const originalGeometry = originalFeature.getGeometry();
+      if (originalFeature[doNotTransform]) {
+        if (originalGeometry && !this.obliqueSource.getFeatureById(id)) {
+          this.obliqueSource.addFeature(originalFeature);
+        }
+        return Promise.resolve();
+      }
+
+      if (this.obliqueSource.getFeatureById(id)) {
+        return Promise.resolve();
+      }
+      const obliqueFeature = new Feature({});
+      obliqueFeature.setId(id);
+      obliqueFeature[originalFeatureSymbol] = originalFeature;
+      setNewGeometry(originalFeature, obliqueFeature);
+      obliqueFeature.setStyle(originalFeature.getStyle());
+
+      this._setFeatureListeners(originalFeature, obliqueFeature);
+
+      return this._convertToOblique(originalFeature, obliqueFeature).then(
+        () => {
+          this.obliqueSource.addFeature(obliqueFeature);
+        },
+      );
+    }
+    return Promise.resolve();
+  }
+
+  private _originalGeometryChanged(
+    listeners: Record<string, EventsKey>,
+    originalFeature: Feature,
+    obliqueFeature: Feature,
+  ): void {
+    unByKey(listeners.originalGeometryChanged);
+    unByKey(listeners.obliqueGeometryChanged);
+    setNewGeometry(originalFeature, obliqueFeature);
+    this.updateObliqueGeometry(originalFeature, obliqueFeature);
+    listeners.originalGeometryChanged = originalFeature
+      .getGeometry()!
+      .on(
+        'change',
+        this.updateObliqueGeometry.bind(this, originalFeature, obliqueFeature),
+      );
+    listeners.obliqueGeometryChanged = obliqueFeature
+      .getGeometry()!
+      .on(
+        'change',
+        this.updateMercatorGeometry.bind(this, originalFeature, obliqueFeature),
+      );
+  }
+
+  private _setFeatureListeners(
+    originalFeature: Feature,
+    obliqueFeature: Feature,
+  ): void {
+    const featureId = obliqueFeature.getId() as string | number;
+    const listeners = {
+      originalFeatureGeometryChanged: originalFeature.on(
+        'change:geometry',
+        () => {
+          const originalGeometry = originalFeature.getGeometry() as Geometry;
+          if (originalGeometry[actuallyIsCircle]) {
+            unByKey(listeners.originalGeometryChanged);
+            listeners.originalGeometryChanged = originalFeature
+              .getGeometry()!
+              .on('change', () => {
+                if (this._updatingMercator[featureId]) {
+                  return;
+                }
+                delete originalGeometry[actuallyIsCircle];
+                this._originalGeometryChanged(
+                  listeners,
+                  originalFeature,
+                  obliqueFeature,
+                );
+              });
+            return;
+          }
+          this._originalGeometryChanged(
+            listeners,
+            originalFeature,
+            obliqueFeature,
+          );
+        },
+      ),
+      originalFeatureChanged: originalFeature.on('change', () => {
+        obliqueFeature.setStyle(originalFeature.getStyle());
+      }),
+      originalGeometryChanged: originalFeature
+        .getGeometry()!
+        .on(
+          'change',
+          this.updateObliqueGeometry.bind(
+            this,
+            originalFeature,
+            obliqueFeature,
+          ),
+        ),
+      obliqueGeometryChanged: obliqueFeature
+        .getGeometry()!
+        .on(
+          'change',
+          this.updateMercatorGeometry.bind(
+            this,
+            originalFeature,
+            obliqueFeature,
+          ),
+        ),
+    };
+    this._featureListeners[featureId] = listeners;
+  }
+
+  private async _convertToOblique(
+    originalFeature: Feature,
+    obliqueFeature: Feature,
+  ): Promise<void> {
+    const id = originalFeature.getId() as string | number;
+    const vectorGeometry = originalFeature.getGeometry() as Geometry;
+    const imageGeometry = obliqueFeature.getGeometry() as Geometry;
+    this._updatingOblique[id] = true;
+    if (!vectorGeometry[alreadyTransformedToImage]) {
+      await mercatorGeometryToImageGeometry(
+        vectorGeometry,
+        imageGeometry,
+        this.map.currentImage as ObliqueImage,
+      );
+    } else {
+      obliqueFeature
+        .getGeometry()!
+        .setCoordinates(vectorGeometry.getCoordinates());
+    }
+    this._updatingOblique[id] = null;
+  }
+
+  updateObliqueGeometry(
+    originalFeature: Feature,
+    obliqueFeature: Feature,
+  ): void {
+    const id = originalFeature.getId() as string | number;
+    if (this._updatingMercator[id]) {
+      return;
+    }
+    if (this._updatingOblique[id] != null) {
+      clearTimeout(this._updatingOblique[id] as number);
+    }
+    if (originalFeature.getGeometry()?.[alreadyTransformedToImage]) {
+      // eslint-disable-next-line no-void
+      void this._convertToOblique(originalFeature, obliqueFeature);
+    } else {
+      this._updatingOblique[id] = setTimeout(() => {
+        // eslint-disable-next-line no-void
+        void this._convertToOblique(originalFeature, obliqueFeature);
+      }, 200);
+    }
+  }
+
+  updateMercatorGeometry(
+    originalFeature: Feature,
+    obliqueFeature: Feature,
+  ): void {
+    const id = originalFeature.getId() as string | number;
+    if (this._updatingOblique[id]) {
+      return;
+    }
+    if (this._updatingMercator[id] != null) {
+      clearTimeout(this._updatingMercator[id] as number);
+    }
+    const imageName = this.fetchedFeaturesForImageName;
+    // eslint-disable-next-line @typescript-eslint/no-misused-promises
+    this._updatingMercator[id] = setTimeout(async () => {
+      const originalGeometry = getPolygonizedGeometry(originalFeature, false);
+      if (originalGeometry[actuallyIsCircle]) {
+        originalFeature.setGeometry(originalGeometry);
+      }
+      const imageGeometry = getPolygonizedGeometry(obliqueFeature, true);
+      this._updatingMercator[id] = true;
+      await imageGeometryToMercatorGeometry(
+        imageGeometry,
+        originalGeometry,
+        this.map.collection!.getImageByName(
+          imageName as string,
+        ) as ObliqueImage,
+      );
+      this._updatingMercator[id] = null;
+    }, 200);
+  }
+
+  /**
+   * Synchronizes image Features if the geometry has been changed.
+   * also clears source and featureListeners
+   */
+  private _clearCurrentImage(): void {
+    Object.values(this._featureListeners).forEach((listeners) => {
+      unByKey(Object.values(listeners));
+    });
+    this._featureListeners = {};
+    this._updatingOblique = {};
+    this._updatingMercator = {};
+    this.obliqueSource.getFeatures().forEach((f) => {
+      const original = f[originalFeatureSymbol];
+      if (original) {
+        delete original[obliqueGeometry];
+        const originalGeometry = original.getGeometry();
+        if (originalGeometry?.[alreadyTransformedToImage]) {
+          this.updateMercatorGeometry(original, f);
+        }
+        delete originalGeometry?.[alreadyTransformedToImage];
+      }
+    });
+    this.obliqueSource.clear(true);
+    this.fetchedFeaturesForImageName = null;
+  }
+
+  /**
+   * Fetches the features within the extent of the current image
+   * @private
+   */
+  private _fetchFeaturesInView(): void {
+    if (
+      this.active &&
+      this.map.currentImage &&
+      this.fetchedFeaturesForImageName !== this.map.currentImage.name
+    ) {
+      this.currentExtent = this.map
+        .getExtentOfCurrentImage()
+        .getCoordinatesInProjection(mercatorProjection);
+      this.source.forEachFeatureInExtent(this.currentExtent, (feature) => {
+        // eslint-disable-next-line no-void
+        void this.addFeature(feature);
+      });
+      this.source.forEachFeature((feature) => {
+        if (feature.getGeometry()?.[alreadyTransformedToImage]) {
+          // eslint-disable-next-line no-void
+          void this.addFeature(feature);
+        }
+      });
+      this.fetchedFeaturesForImageName = this.map.currentImage.name;
+    }
+  }
+
+  private removeFeature(feature: Feature): void {
+    const feat = this.obliqueSource.getFeatureById(
+      feature.getId() as number | string,
+    );
+    if (feat) {
+      const id = feat.getId() as string;
+      const listeners = this._featureListeners[id];
+      if (listeners) {
+        unByKey(Object.values(listeners));
+        delete this._featureListeners[id];
+      }
+      this.obliqueSource.removeFeature(feat);
+    }
+  }
+
+  deactivate(): void {
+    super.deactivate();
+    if (this.olLayer) {
+      this.olLayer.setVisible(false);
+    }
+
+    this._featureVisibilityListeners.forEach((cb) => {
+      cb();
+    });
+    this._featureVisibilityListeners = [];
+
+    unByKey(this._sourceListener);
+    this._sourceListener = [];
+
+    if (this._imageChangedListener) {
+      this._imageChangedListener();
+      this._imageChangedListener = null;
+    }
+
+    this._clearCurrentImage();
+  }
+
+  destroy(): void {
+    if (this.olLayer) {
+      this.map.removeOLLayer(this.olLayer);
+    }
+    this.olLayer = null;
+
+    unByKey(this._sourceListener);
+    this._sourceListener = [];
+
+    if (this._imageChangedListener) {
+      this._imageChangedListener();
+      this._imageChangedListener = null;
+    }
+    this.obliqueSource.clear(true);
+    Object.values(this._updatingOblique).forEach((timer) => {
+      if (timer != null) {
+        clearTimeout(timer as number);
+      }
+    });
+    Object.values(this._updatingMercator).forEach((timer) => {
+      if (timer != null) {
+        clearTimeout(timer as number);
+      }
+    });
+    this._clearCurrentImage();
+    super.destroy();
+  }
+}
+
+export default VectorObliqueImpl;

package/src/layer/openStreetMapLayer.ts

@@ -0,0 +1,185 @@
+import { SplitDirection } from '@vcmap-cesium/engine';
+
+import { parseInteger, parseNumberRange } from '@vcsuite/parsers';
+import Layer, { type LayerOptions, SplitLayer } from './layer.js';
+import OpenlayersMap from '../map/openlayersMap.js';
+import CesiumMap from '../map/cesiumMap.js';
+import OpenStreetMapOpenlayersImpl from './openlayers/openStreetMapOpenlayersImpl.js';
+import OpenStreetMapCesiumImpl from './cesium/openStreetMapCesiumImpl.js';
+import VcsEvent from '../vcsEvent.js';
+import { layerClassRegistry } from '../classRegistry.js';
+import {
+  RasterLayerImplementationOptions,
+  TilingScheme,
+} from './rasterLayer.js';
+import VcsMap from '../map/vcsMap.js';
+
+export type OpenStreetMapOptions = LayerOptions & {
+  /**
+   * either 'left' or 'right', if omitted none is applied
+   */
+  splitDirection?: string;
+  /**
+   * opacity between 0 and 1
+   * @default 1
+   */
+  opacity?: number;
+  /**
+   * max level to load tiles at
+   * @default 19
+   */
+  maxLevel?: number;
+};
+
+/**
+ * @group Layer
+ */
+class OpenStreetMapLayer
+  extends Layer<OpenStreetMapCesiumImpl | OpenStreetMapOpenlayersImpl>
+  implements SplitLayer
+{
+  static get className(): string {
+    return 'OpenStreetMapLayer';
+  }
+
+  static getDefaultOptions(): OpenStreetMapOptions {
+    return {
+      ...Layer.getDefaultOptions(),
+      splitDirection: undefined,
+      opacity: 1,
+      maxLevel: 19,
+    };
+  }
+
+  private _splitDirection: SplitDirection;
+
+  private _opacity: number;
+
+  /**
+   * raised if the split direction changes, is passed the split direction as its only argument
+   */
+  splitDirectionChanged: VcsEvent<SplitDirection> = new VcsEvent();
+
+  /**
+   * The maximum level to load. Changing requires a redraw to take effect.
+   */
+  maxLevel: number;
+
+  protected _supportedMaps = [CesiumMap.className, OpenlayersMap.className];
+
+  constructor(options: OpenStreetMapOptions) {
+    super(options);
+    const defaultOptions = OpenStreetMapLayer.getDefaultOptions();
+    this._splitDirection = SplitDirection.NONE;
+
+    if (options.splitDirection) {
+      this._splitDirection =
+        options.splitDirection === 'left'
+          ? SplitDirection.LEFT
+          : SplitDirection.RIGHT;
+    }
+
+    this._opacity = parseNumberRange(
+      options.opacity,
+      defaultOptions.opacity as number,
+      0.0,
+      1.0,
+    );
+    this.maxLevel = parseInteger(options.maxLevel, defaultOptions.maxLevel);
+  }
+
+  get splitDirection(): SplitDirection {
+    return this._splitDirection;
+  }
+
+  set splitDirection(direction: SplitDirection) {
+    if (direction !== this._splitDirection) {
+      this._splitDirection = direction;
+      this.getImplementations().forEach((impl) => {
+        impl.updateSplitDirection(this._splitDirection);
+      });
+      this.splitDirectionChanged.raiseEvent(this._splitDirection);
+    }
+  }
+
+  /**
+   * The opacity between 0 (fully transparent) and 1 (fully opaque)
+   */
+  get opacity(): number {
+    return this._opacity;
+  }
+
+  set opacity(opacity: number) {
+    const parsedValue = parseNumberRange(opacity, this._opacity, 0, 1);
+    if (this._opacity !== parsedValue) {
+      this._opacity = parsedValue;
+      this.getImplementations().forEach((impl) => {
+        impl.updateOpacity(parsedValue);
+      });
+    }
+  }
+
+  getImplementationOptions(): RasterLayerImplementationOptions {
+    return {
+      ...super.getImplementationOptions(),
+      opacity: this.opacity,
+      splitDirection: this.splitDirection,
+      minLevel: 0,
+      maxLevel: this.maxLevel,
+      tilingSchema: TilingScheme.GEOGRAPHIC,
+    };
+  }
+
+  createImplementationsForMap(
+    map: VcsMap,
+  ): (OpenStreetMapOpenlayersImpl | OpenStreetMapCesiumImpl)[] {
+    if (map instanceof OpenlayersMap) {
+      return [
+        new OpenStreetMapOpenlayersImpl(map, this.getImplementationOptions()),
+      ];
+    }
+
+    if (map instanceof CesiumMap) {
+      return [
+        new OpenStreetMapCesiumImpl(map, this.getImplementationOptions()),
+      ];
+    }
+    return [];
+  }
+
+  toJSON(): OpenStreetMapOptions {
+    const config: OpenStreetMapOptions = super.toJSON();
+    const defaultOptions = OpenStreetMapLayer.getDefaultOptions();
+
+    if (this._splitDirection !== SplitDirection.NONE) {
+      config.splitDirection =
+        this._splitDirection === SplitDirection.RIGHT ? 'right' : 'left';
+    }
+
+    if (this.opacity !== defaultOptions.opacity) {
+      config.opacity = this.opacity;
+    }
+
+    if (this.maxLevel !== defaultOptions.maxLevel) {
+      config.maxLevel = this.maxLevel;
+    }
+
+    if (this._splitDirection !== SplitDirection.NONE) {
+      config.splitDirection =
+        this._splitDirection === SplitDirection.RIGHT ? 'right' : 'left';
+    }
+
+    return config;
+  }
+
+  destroy(): void {
+    this.splitDirectionChanged.destroy();
+    super.destroy();
+  }
+}
+
+layerClassRegistry.registerClass(
+  OpenStreetMapLayer.className,
+  OpenStreetMapLayer,
+);
+export default OpenStreetMapLayer;