@vcmap/core 5.0.0-rc.8 → 5.0.0

package/src/layer/vectorSymbols.ts

@@ -0,0 +1,41 @@
+/**
+ * Attached to a geometry to indicate, it is already in mercator and not the layers default projection
+ */
+export const alreadyTransformedToMercator: unique symbol = Symbol(
+  'alreadyTransformedToMercator',
+);
+
+/**
+ * Attached to a geometry to indicate, it is already in oblique image coordiantes and not mercator
+ */
+export const alreadyTransformedToImage: unique symbol = Symbol(
+  'alreadyTransformedToImage',
+);
+
+/**
+ * Attached to an ol/Feature to reference the underlying oblique geometry
+ */
+export const obliqueGeometry: unique symbol = Symbol('obliqueGeometry');
+
+/**
+ * Attached to an ol/Feature which should only exist in oblqie coordinates and not be transformed to mercator on change
+ */
+export const doNotTransform: unique symbol = Symbol('doNotTransform');
+
+/**
+ * Attached to oblique features to reference the underlying original ol/Feature
+ */
+export const originalFeatureSymbol: unique symbol = Symbol('OriginalFeature');
+
+/**
+ * Attached to mercator or oblique geometries which are polygons but have a circular counterpart. Used to not
+ * mess up circle drawing in oblique
+ */
+export const actuallyIsCircle: unique symbol = Symbol('ActuallyIsCircle');
+
+/**
+ * Can be attached to features to have the primitives be created sync instead of async. Use this
+ * for faster response times to changes. Do not use this on bulk insertion etc. since sync creation blocks
+ * the rendering thread
+ */
+export const createSync: unique symbol = Symbol('createSync');

package/src/layer/vectorTileLayer.ts

@@ -0,0 +1,479 @@
+import Style, { type StyleFunction } from 'ol/style/Style.js';
+import type { Feature } from 'ol/index.js';
+import type { Size } from 'ol/size.js';
+
+import { parseInteger } from '@vcsuite/parsers';
+import CesiumMap from '../map/cesiumMap.js';
+import VectorRasterTileCesiumImpl from './cesium/vectorRasterTileCesiumImpl.js';
+import OpenlayersMap from '../map/openlayersMap.js';
+import VectorTileOpenlayersImpl from './openlayers/vectorTileOpenlayersImpl.js';
+import FeatureLayer, {
+  FeatureLayerImplementation,
+  FeatureLayerImplementationOptions,
+  FeatureLayerOptions,
+} from './featureLayer.js';
+import VectorStyleItem, {
+  defaultVectorStyle,
+  VectorStyleItemOptions,
+} from '../style/vectorStyleItem.js';
+import VectorProperties, {
+  VectorPropertiesOptions,
+} from './vectorProperties.js';
+import DeclarativeStyleItem, {
+  DeclarativeStyleItemOptions,
+} from '../style/declarativeStyleItem.js';
+import FeatureVisibility, {
+  FeatureVisibilityAction,
+  globalHidden,
+  hidden,
+  highlighted,
+} from './featureVisibility.js';
+import { getStylesArray } from '../util/featureconverter/convert.js';
+import { vcsLayerName } from './layerSymbols.js';
+import TileProviderFeatureProvider from '../featureProvider/tileProviderFeatureProvider.js';
+import {
+  getObjectFromClassRegistry,
+  layerClassRegistry,
+  tileProviderClassRegistry,
+} from '../classRegistry.js';
+import TileProvider, {
+  TileLoadedEvent,
+  type TileProviderOptions,
+  TileProviderRtree,
+} from './tileProvider/tileProvider.js';
+import GlobalHider from './globalHider.js';
+import Extent from '../util/extent.js';
+import VcsMap from '../map/vcsMap.js';
+import StyleItem from '../style/styleItem.js';
+
+/**
+ * synchronizes featureVisibility Symbols on the feature;
+ */
+function synchronizeFeatureVisibility(
+  featureVisibility: FeatureVisibility,
+  globalHider: GlobalHider | undefined,
+  feature: Feature,
+): void {
+  const featureId = feature.getId() as string | number;
+  if (featureVisibility.hiddenObjects[featureId]) {
+    feature[hidden] = true;
+  } else if (feature[hidden]) {
+    delete feature[hidden];
+  }
+  if (featureVisibility.highlightedObjects[featureId]) {
+    feature[highlighted] =
+      featureVisibility.highlightedObjects[featureId].style;
+  } else if (feature[highlighted]) {
+    delete feature[highlighted];
+  }
+  if (globalHider?.hiddenObjects[featureId]) {
+    feature[globalHidden] = true;
+  } else if (feature[globalHidden]) {
+    delete feature[globalHidden];
+  }
+}
+
+export type VectorTileOptions = FeatureLayerOptions & {
+  tileProvider?: TileProviderOptions | TileProvider;
+  highlightStyle?: VectorStyleItemOptions | VectorStyleItem;
+  vectorProperties?: VectorPropertiesOptions;
+  /**
+   * used to restrict the zoom level visibility (minlevel does not allow rendering above tileProvider baseLevel)
+   */
+  minLevel?: number;
+  /**
+   * used to restrict the zoom level visibility
+   */
+  maxLevel?: number;
+};
+
+export type VectorTileImplementationOptions =
+  FeatureLayerImplementationOptions & {
+    tileProvider: TileProvider;
+    tileSize: Size;
+    minLevel: number;
+    maxLevel: number;
+    extent?: Extent;
+  };
+
+export interface VectorTileImplementation extends FeatureLayerImplementation {
+  updateTiles(tiles: string[]): void;
+}
+
+/**
+ * VectorTileLayer Layer for tiled vector Data. Can be connected to data with a TileProvider
+ * @group Layer
+ */
+class VectorTileLayer extends FeatureLayer<
+  VectorTileOpenlayersImpl | VectorRasterTileCesiumImpl
+> {
+  static get className(): string {
+    return 'VectorTileLayer';
+  }
+
+  static getDefaultOptions(): VectorTileOptions {
+    return {
+      ...FeatureLayer.getDefaultOptions(),
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      tileProvider: undefined,
+      highlightStyle: undefined,
+      vectorProperties: {},
+      minLevel: undefined,
+      maxLevel: undefined,
+    };
+  }
+
+  highlightStyle: VectorStyleItem | undefined;
+
+  private _tileSize: Size = [256, 256];
+
+  /**
+   * at the moment only used for allowPicking, triggers a reload on change
+   */
+  vectorProperties: VectorProperties;
+
+  tileProvider: TileProvider;
+
+  private _maxLevel: number;
+
+  private _minLevel: number;
+
+  private _featureVisibilityListeners: (() => void)[] = [];
+
+  // eslint-disable-next-line class-methods-use-this
+  private _tileLoadEventListener: () => void = () => {};
+
+  // eslint-disable-next-line class-methods-use-this
+  private _vectorPropertiesChangedListener: () => void = () => {};
+
+  /**
+   * zIndex for features with featureStyle // Do we maybe need a global counter ?
+   */
+  private _styleZIndex = 0;
+
+  /**
+   * @param  options
+   */
+  constructor(options: VectorTileOptions) {
+    super(options);
+
+    this._supportedMaps = [CesiumMap.className, OpenlayersMap.className];
+
+    const defaultOptions = VectorTileLayer.getDefaultOptions();
+
+    this.highlightStyle = undefined;
+    if (options.highlightStyle) {
+      this.highlightStyle =
+        options.highlightStyle instanceof VectorStyleItem
+          ? options.highlightStyle
+          : new VectorStyleItem(options.highlightStyle);
+    }
+
+    this.vectorProperties = new VectorProperties({
+      allowPicking: this.allowPicking,
+      ...options.vectorProperties,
+    });
+
+    this.tileProvider =
+      options.tileProvider instanceof TileProvider // XXX this now throws if not passing in a tileProvider.
+        ? options.tileProvider
+        : (getObjectFromClassRegistry(
+            tileProviderClassRegistry,
+            options.tileProvider ?? { type: TileProvider.className },
+          ) as TileProvider);
+    if (this.tileProvider) {
+      this.tileProvider.locale = this.locale;
+    }
+
+    this._maxLevel = parseInteger(options.maxLevel, defaultOptions.maxLevel);
+    this._minLevel = parseInteger(options.minLevel, defaultOptions.minLevel);
+  }
+
+  /**
+   * returns the currently set locale. Can be used to provide locale specific URLs.
+   */
+  get locale(): string {
+    return super.locale;
+  }
+
+  set locale(value: string) {
+    if (this.tileProvider) {
+      this.tileProvider.locale = super.locale;
+    }
+    super.locale = value;
+  }
+
+  async initialize(): Promise<void> {
+    if (!this.initialized) {
+      this._tileLoadEventListener =
+        this.tileProvider.tileLoadedEvent.addEventListener((event) =>
+          this._handleTileLoaded(event),
+        );
+      this._vectorPropertiesChangedListener =
+        this.vectorProperties.propertyChanged.addEventListener(() => {
+          // eslint-disable-next-line no-void
+          void this.reload();
+        });
+      this.featureProvider = new TileProviderFeatureProvider(this.name, {
+        // XXX this overwrites
+        tileProvider: this.tileProvider,
+        vectorProperties: this.vectorProperties,
+      });
+    }
+    await super.initialize();
+  }
+
+  private _getNextStyleZIndex(): number {
+    this._styleZIndex += 1;
+    return this._styleZIndex;
+  }
+
+  private _handleTileLoaded({ rtree }: TileLoadedEvent): void {
+    rtree
+      .all()
+      .map((item) => item.value)
+      .forEach((feature) => {
+        const featureStyle = feature.getStyle();
+        if (featureStyle && featureStyle instanceof Style) {
+          featureStyle.setZIndex(this._getNextStyleZIndex());
+        }
+        feature[vcsLayerName] = this.name;
+        feature.getStyleFunction = (): StyleFunction => {
+          return this._featureStyle.bind(this) as StyleFunction;
+        };
+        if (this.tileProvider.trackFeaturesToTiles && this.globalHider) {
+          synchronizeFeatureVisibility(
+            this.featureVisibility,
+            this.globalHider,
+            feature,
+          );
+        }
+      });
+  }
+
+  setGlobalHider(globalHider: GlobalHider): void {
+    super.setGlobalHider(globalHider);
+    this._setupFeatureVisibilityHandlers();
+  }
+
+  /**
+   * Sets up listeners for featureVisibility and global hider
+   */
+  private _setupFeatureVisibilityHandlers(): void {
+    if (!this.tileProvider.trackFeaturesToTiles) {
+      return;
+    }
+    this._featureVisibilityListeners.forEach((cb) => {
+      cb();
+    });
+
+    this._featureVisibilityListeners = [
+      this.featureVisibility.changed.addEventListener(({ action, ids }) => {
+        const tileIdsChanged: Set<string> = new Set();
+        ids.forEach((id) => {
+          const tileIds = this.tileProvider.featureIdToTileIds.get(
+            id as string,
+          );
+          if (tileIds) {
+            tileIds.forEach((tileId) => {
+              const rtree = this.tileProvider.rtreeCache.get(
+                tileId,
+              ) as TileProviderRtree;
+              const tileProviderRTreeEntry = rtree
+                .all()
+                .find((item) => item.value.getId() === id);
+              if (tileProviderRTreeEntry) {
+                const feature = tileProviderRTreeEntry.value;
+                tileIdsChanged.add(tileId);
+                if (action === FeatureVisibilityAction.HIGHLIGHT) {
+                  feature[highlighted] =
+                    this.featureVisibility.highlightedObjects[id].style;
+                } else if (action === FeatureVisibilityAction.UNHIGHLIGHT) {
+                  delete feature[highlighted];
+                } else if (action === FeatureVisibilityAction.HIDE) {
+                  feature[hidden] = true;
+                } else if (action === FeatureVisibilityAction.SHOW) {
+                  delete feature[hidden];
+                }
+              }
+            });
+          }
+        });
+        this.updateTiles([...tileIdsChanged]);
+      }),
+    ];
+
+    if (this.globalHider) {
+      this._featureVisibilityListeners.push(
+        this.globalHider.changed.addEventListener(({ action, ids }) => {
+          const tileIdsChanged: Set<string> = new Set();
+          ids.forEach((id) => {
+            const tileIds = this.tileProvider.featureIdToTileIds.get(
+              id as string,
+            );
+            if (tileIds) {
+              tileIds.forEach((tileId) => {
+                const rtree = this.tileProvider.rtreeCache.get(
+                  tileId,
+                ) as TileProviderRtree;
+                const tileProviderRTreeEntry = rtree
+                  .all()
+                  .find((item) => item.value.getId() === id);
+                if (tileProviderRTreeEntry) {
+                  const feature = tileProviderRTreeEntry.value;
+                  tileIdsChanged.add(tileId);
+                  if (action === FeatureVisibilityAction.HIDE) {
+                    feature[globalHidden] = true;
+                  } else if (action === FeatureVisibilityAction.SHOW) {
+                    delete feature[globalHidden];
+                  }
+                }
+              });
+            }
+          });
+          this.updateTiles([...tileIdsChanged]);
+        }),
+      );
+    }
+  }
+
+  /**
+   * rerenders the specified tiles
+   * rendering happens async
+   */
+  updateTiles(tileIds: string[]): void {
+    this.getImplementations().forEach((impl) => {
+      impl.updateTiles(tileIds);
+    });
+  }
+
+  /**
+   * calculates the style the feature has to be rendered
+   */
+  private _featureStyle(feature: Feature, resolution: number): Style[] {
+    let style;
+    if (feature[hidden] || feature[globalHidden]) {
+      return [];
+    }
+    if (feature[highlighted]) {
+      // priority highlighted features
+      ({ style } = feature[highlighted]);
+    } else if (this.style instanceof DeclarativeStyleItem) {
+      // if declarative use layerStyle
+      ({ style } = this.style);
+    } else {
+      // if vectorStyle use featureStyle
+      style = feature.getStyle() || this.style.style;
+    }
+    return getStylesArray(style, feature, resolution);
+  }
+
+  getImplementationOptions(): VectorTileImplementationOptions {
+    return {
+      ...super.getImplementationOptions(),
+      tileProvider: this.tileProvider,
+      tileSize: this._tileSize,
+      minLevel: this._minLevel,
+      maxLevel: this._maxLevel,
+      extent: this.extent ?? new Extent(),
+    };
+  }
+
+  createImplementationsForMap(
+    map: VcsMap,
+  ): (VectorRasterTileCesiumImpl | VectorTileOpenlayersImpl)[] {
+    if (map instanceof CesiumMap) {
+      return [
+        new VectorRasterTileCesiumImpl(map, this.getImplementationOptions()),
+      ];
+    }
+
+    if (map instanceof OpenlayersMap) {
+      return [
+        new VectorTileOpenlayersImpl(map, this.getImplementationOptions()),
+      ];
+    }
+
+    return [];
+  }
+
+  getStyleOrDefaultStyle(
+    styleOptions?:
+      | DeclarativeStyleItemOptions
+      | VectorStyleItemOptions
+      | StyleItem,
+    defaultStyle?: VectorStyleItem,
+  ): StyleItem {
+    return super.getStyleOrDefaultStyle(
+      styleOptions,
+      defaultStyle || defaultVectorStyle.clone(),
+    );
+  }
+
+  async activate(): Promise<void> {
+    await super.activate();
+    this._setupFeatureVisibilityHandlers();
+    if (this.tileProvider.trackFeaturesToTiles) {
+      this.tileProvider.forEachFeature((feature) => {
+        synchronizeFeatureVisibility(
+          this.featureVisibility,
+          this.globalHider,
+          feature,
+        );
+      });
+    }
+  }
+
+  deactivate(): void {
+    super.deactivate();
+    this._featureVisibilityListeners.forEach((cb) => {
+      cb();
+    });
+  }
+
+  destroy(): void {
+    this._featureVisibilityListeners.forEach((cb) => {
+      cb();
+    });
+    super.destroy();
+    this._tileLoadEventListener();
+    if (this.featureProvider) {
+      this.featureProvider.destroy();
+    }
+    if (this.tileProvider) {
+      this.tileProvider.destroy();
+    }
+    this._vectorPropertiesChangedListener();
+    if (this.vectorProperties) {
+      this.vectorProperties.destroy();
+    }
+  }
+
+  toJSON(): VectorTileOptions {
+    const config: VectorTileOptions = super.toJSON();
+    const defaultOptions = VectorTileLayer.getDefaultOptions();
+
+    if (this._maxLevel !== defaultOptions.maxLevel) {
+      config.maxLevel = this._maxLevel;
+    }
+
+    if (this._minLevel !== defaultOptions.minLevel) {
+      config.minLevel = this._minLevel;
+    }
+
+    const vectorPropertiesConfig = this.vectorProperties.getVcsMeta();
+    if (Object.keys(vectorPropertiesConfig).length > 0) {
+      config.vectorProperties = vectorPropertiesConfig;
+    }
+
+    if (this.tileProvider) {
+      config.tileProvider = this.tileProvider.toJSON();
+    }
+
+    return config;
+  }
+}
+
+layerClassRegistry.registerClass(VectorTileLayer.className, VectorTileLayer);
+export default VectorTileLayer;

package/src/layer/wfsLayer.ts

@@ -0,0 +1,169 @@
+import WFSFormat from 'ol/format/WFS.js';
+import VectorLayer, { VectorOptions } from './vectorLayer.js';
+import Projection from '../util/projection.js';
+import { layerClassRegistry } from '../classRegistry.js';
+import { requestUrl } from '../util/fetch.js';
+
+export type WFSOptions = VectorOptions & {
+  /**
+   * the featureType to load. Supply an array for multiples
+   */
+  featureType: string | string[];
+  /**
+   * namespace used for the feature prefix
+   */
+  featureNS: string;
+  featurePrefix: string;
+  /**
+   * additional config for [ol/format/WFS/writeGetFeature]{@link https://openlayers.org/en/latest/apidoc/ol.format.WFS.html} excluding featureType, featureNS and featurePrefix
+   */
+  getFeatureOptions?: Record<string, unknown>;
+
+  /**
+   * Version of the WFS Service, will be forwarded to the openlayers WFS Format.
+   */
+  version?: string;
+};
+
+/**
+ * @group Layer
+ */
+class WFSLayer extends VectorLayer {
+  static get className(): string {
+    return 'WFSLayer';
+  }
+
+  featureType: string[];
+
+  featureNS: string;
+
+  featurePrefix: string;
+
+  version: string | undefined;
+
+  getFeaturesOptions: Record<string, unknown>;
+
+  wfsFormat: WFSFormat;
+
+  private _dataFetchedPromise: Promise<void> | null;
+
+  static getDefaultOptions(): WFSOptions {
+    return {
+      ...VectorLayer.getDefaultOptions(),
+      featureType: [],
+      featureNS: '',
+      featurePrefix: '',
+      getFeatureOptions: {},
+      version: undefined,
+    };
+  }
+
+  constructor(options: WFSOptions) {
+    const proj = new Projection(options.projection).toJSON();
+    proj.alias = [
+      `http://www.opengis.net/gml/srs/epsg.xml#${
+        (proj.epsg as string).match(/\d+/)?.[0] as string
+      }`,
+    ];
+    options.projection = proj;
+    super(options);
+
+    this.featureType = Array.isArray(options.featureType)
+      ? options.featureType
+      : [options.featureType];
+
+    /**
+     * @todo should this not be an Object with definition and prefix?
+     */
+    this.featureNS = options.featureNS;
+    this.featurePrefix = options.featurePrefix;
+    this.getFeaturesOptions = options.getFeatureOptions || {};
+    this.version = options.version;
+    this.wfsFormat = new WFSFormat({
+      featureNS: this.featureNS,
+      featureType: this.featureType,
+      version: this.version,
+    });
+
+    this._dataFetchedPromise = null;
+  }
+
+  async initialize(): Promise<void> {
+    if (!this.initialized) {
+      await this.fetchData();
+    }
+    return super.initialize();
+  }
+
+  async reload(): Promise<void> {
+    this.wfsFormat = new WFSFormat({
+      featureNS: this.featureNS,
+      featureType: this.featureType,
+      version: this.version,
+    });
+    if (this._dataFetchedPromise) {
+      this.removeAllFeatures();
+      this._dataFetchedPromise = null;
+      await this.fetchData();
+    }
+    return super.reload();
+  }
+
+  /**
+   * Fetches the data for the layer. If data is already fetched returns a resolved Promise
+   */
+  fetchData(): Promise<void> {
+    if (this._dataFetchedPromise) {
+      return this._dataFetchedPromise;
+    }
+    if (this.url != null) {
+      const requestDocument = this.wfsFormat.writeGetFeature({
+        featureNS: this.featureNS,
+        featurePrefix: this.featurePrefix,
+        featureTypes: this.featureType,
+        srsName: this.projection.epsg,
+        ...this.getFeaturesOptions,
+      });
+      const postData = new XMLSerializer().serializeToString(requestDocument);
+      this._dataFetchedPromise = requestUrl(this.url, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/text+xml',
+        },
+        body: postData,
+      })
+        .then((response) => response.text())
+        .then((data) => this._parseWFSData(data))
+        .catch((err) => {
+          this.getLogger().info(
+            `Could not send request for loading layer content (${String(err)})`,
+          );
+          return Promise.reject(err);
+        });
+
+      return this._dataFetchedPromise;
+    }
+    this.getLogger().warning('Could not load WFSLayer layer, no url is set');
+    return Promise.reject(new Error('missing url in WFSLayer layer'));
+  }
+
+  private _parseWFSData(obj: string): void {
+    const features = this.wfsFormat.readFeatures(obj);
+    this.addFeatures(features);
+  }
+
+  toJSON(): WFSOptions {
+    const config: Partial<WFSOptions> = super.toJSON();
+
+    config.featureType = this.featureType.slice();
+    config.featureNS = this.featureNS;
+    config.featurePrefix = this.featurePrefix;
+    if (Object.keys(this.getFeaturesOptions).length > 0) {
+      config.getFeatureOptions = this.getFeaturesOptions;
+    }
+    return config as WFSOptions;
+  }
+}
+
+layerClassRegistry.registerClass(WFSLayer.className, WFSLayer);
+export default WFSLayer;