@vcmap/core 5.0.0-rc.0

package/src/vcs/vcm/layer/vectorSymbols.js

@@ -0,0 +1,40 @@
+/**
+ * Attached to a geometry to indicate, it is already in mercator and not the layers default projection
+ * @type {symbol}
+ * @const
+ */
+export const alreadyTransformedToMercator = Symbol('alreadyTransformedToMercator');
+
+/**
+ * Attached to a geometry to indicate, it is already in oblique image coordiantes and not mercator
+ * @type {symbol}
+ * @const
+ */
+export const alreadyTransformedToImage = Symbol('alreadyTransformedToImage');
+
+/**
+ * Attached to an ol/Feature to reference the underlying oblique geometry
+ * @type {symbol}
+ * @const
+ */
+export const obliqueGeometry = Symbol('obliqueGeometry');
+
+/**
+ * Attached to an ol/Feature which should only exist in oblqie coordinates and not be transformed to mercator on change
+ * @type {symbol}
+ * @const
+ */
+export const doNotTransform = Symbol('doNotTransform');
+
+/**
+ * Attached to oblique features to reference the underlying original ol/Feature
+ * @type {symbol}
+ */
+export const originalFeatureSymbol = 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
+ * @type {symbol}
+ */
+export const actuallyIsCircle = Symbol('ActuallyIsCircle');

package/src/vcs/vcm/layer/vectorTile.js

@@ -0,0 +1,480 @@
+import Style from 'ol/style/Style.js';
+import { parseInteger } from '@vcsuite/parsers';
+import CesiumMap from '../maps/cesium.js';
+import VectorRasterTileCesium from './cesium/vectorRasterTileCesium.js';
+import Openlayers from '../maps/openlayers.js';
+import VectorTileOpenlayers from './openlayers/vectorTileOpenlayers.js';
+import FeatureLayer from './featureLayer.js';
+import VectorStyleItem, { defaultVectorStyle } from '../util/style/vectorStyleItem.js';
+import VectorProperties from './vectorProperties.js';
+import DeclarativeStyleItem from '../util/style/declarativeStyleItem.js';
+import { FeatureVisibilityAction, globalHidden, hidden, highlighted } from './featureVisibility.js';
+import { getStylesArray } from '../util/featureconverter/convert.js';
+import { vcsLayerName } from './layerSymbols.js';
+import TileProviderFeatureProvider from '../util/featureProvider/tileProviderFeatureProvider.js';
+import tileProviderFactory from './tileProvider/tileProviderFactory.js';
+import { getGenericFeatureFromClickedObject } from './vectorHelpers.js';
+import { originalFeatureSymbol } from './vectorSymbols.js';
+import { VcsClassRegistry } from '../classRegistry.js';
+
+/**
+ * synchronizes featureVisibility Symbols on the feature;
+ * @param {import("@vcmap/core").FeatureVisibility} featureVisibility
+ * @param {import("@vcmap/core").GlobalHider} globalHider
+ * @param {import("ol").Feature<import("ol/geom/Geometry").default>} feature
+ */
+function synchronizeFeatureVisibility(featureVisibility, globalHider, feature) {
+  const featureId = feature.getId();
+  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];
+  }
+}
+
+/**
+ * @typedef {FeatureLayerOptions} VectorTileOptions
+ * @property {TileProviderOptions} tileProvider
+ * @property {VectorStyleItemOptions|import("@vcmap/core").VectorStyleItem|undefined} highlightStyle
+ * @property {VectorPropertiesOptions|undefined} vectorProperties
+ * @property {number|undefined} minLevel used to restrict the zoom level visibility (minlevel does not allow rendering above tileProvider baseLevel)
+ * @property {number|undefined} maxLevel used to restrict the zoom level visibility
+ * @api
+ */
+
+/**
+ * @typedef {FeatureLayerImplementationOptions} VectorTileImplementationOptions
+ * @property {import("@vcmap/core").TileProvider} tileProvider
+ * @property {import("ol/size").Size} tileSize
+ * @property {number} minLevel
+ * @property {number} maxLevel
+ * @property {import("@vcmap/core").Extent|undefined} extent
+ */
+
+/**
+ * @typedef {FeatureLayerImplementation} VectorTileImplementation
+ * @property {function(Array<string>):void} updateTiles
+ */
+
+/**
+ * VectorTile Layer for tiled vector Data. Can be connected to data with a TileProvider
+ * @class
+ * @export
+ * @extends {FeatureLayer}
+ * @api stable
+ */
+class VectorTile extends FeatureLayer {
+  /**
+   * @readonly
+   * @returns {string}
+   */
+  static get className() { return 'vcs.vcm.layer.VectorTile'; }
+
+  /**
+   * @returns {VectorTileOptions}
+   */
+  static getDefaultOptions() {
+    return {
+      ...FeatureLayer.getDefaultOptions(),
+      tileProvider: undefined,
+      highlightStyle: undefined,
+      vectorProperties: {},
+      minLevel: undefined,
+      maxLevel: undefined,
+    };
+  }
+
+
+  /**
+   * @param {VectorTileOptions} options
+   */
+  constructor(options) {
+    super(options);
+
+    this._supportedMaps = [
+      CesiumMap.className,
+      Openlayers.className,
+    ];
+
+    const defaultOptions = VectorTile.getDefaultOptions();
+
+    /** @type {VectorStyleItem} */
+    this.highlightStyle = /** @type {undefined} */ (defaultOptions.highlightStyle);
+    if (options.highlightStyle) {
+      this.highlightStyle = options.highlightStyle instanceof VectorStyleItem ?
+        options.highlightStyle :
+        new VectorStyleItem(options.highlightStyle);
+    }
+
+    /**
+     * @type {import("ol/size").Size}
+     * @private
+     */
+    this._tileSize = [256, 256];
+
+    /**
+     * at the moment only used for allowPicking, triggers a reload on change
+     * @type {VectorProperties}
+     * @api
+     */
+    this.vectorProperties = new VectorProperties({
+      allowPicking: this.allowPicking,
+      ...options.vectorProperties,
+    });
+
+    /**
+     * @type {TileProviderOptions}
+     * @private
+     */
+    this._tileProviderOptions = options.tileProvider;
+
+    /**
+     * @type {import("@vcmap/core").TileProvider}
+     * @api
+     */
+    this.tileProvider = undefined;
+
+    /**
+     * @type {number|undefined}
+     * @private
+     */
+    this._maxLevel = parseInteger(options.maxLevel, defaultOptions.maxLevel);
+
+    /**
+     * @type {number|undefined}
+     * @private
+     */
+    this._minLevel = parseInteger(options.minLevel, defaultOptions.minLevel);
+
+    /**
+     * @type {Array<Function>}
+     * @private
+     */
+    this._featureVisibilityListener = [];
+
+    /**
+     * @type {Function}
+     * @private
+     */
+    this._tileLoadEventListener = () => {};
+
+    /**
+     * @type {Function}
+     * @private
+     */
+    this._vectorPropertiesChangedListener = () => {};
+
+    /**
+     * zIndex for features with featureStyle // Do we maybe need a global counter ?
+     * @type {number}
+     * @private
+     */
+    this._styleZIndex = 0;
+  }
+
+  /**
+   * initializes the layer, can be used to defer loading
+   * @returns {Promise<void>}
+   */
+  async initialize() {
+    await super.initialize();
+    if (!this.tileProvider) {
+      this.tileProvider = await tileProviderFactory(this._tileProviderOptions);
+      // this.tileProvider = await tileProviderFactory(this._tileProviderOptions);
+      this._tileLoadEventListener =
+        this.tileProvider.tileLoadedEvent.addEventListener(event => this._handleTileLoaded(event));
+      this._vectorPropertiesChangedListener =
+        this.vectorProperties.propertyChanged.addEventListener(() => {
+          this.reload();
+        });
+      this.featureProvider = new TileProviderFeatureProvider(this.name, {
+        tileProvider: this.tileProvider,
+        vectorProperties: this.vectorProperties,
+      });
+    }
+  }
+
+
+  /**
+   * @param {import("ol").Feature<import("ol/geom/Geometry").default>} olFeature
+   * @returns {?Object}
+   */
+  objectClickedHandler(olFeature) {
+    const actualFeature = olFeature[originalFeatureSymbol] || olFeature;
+    if (this.vectorProperties.getAllowPicking(actualFeature)) {
+      if (olFeature[hidden] || olFeature[globalHidden]) {
+        return null;
+      }
+      return {
+        id: actualFeature.getId(),
+        feature: actualFeature,
+      };
+    }
+    return null;
+  }
+
+  /**
+   * @param {VectorClickedObject} object
+   * @returns {?GenericFeature}
+   */
+  getGenericFeatureFromClickedObject(object) {
+    return getGenericFeatureFromClickedObject(object, this);
+  }
+
+  /**
+   * @returns {number}
+   * @private
+   */
+  _getNextStyleZIndex() {
+    this._styleZIndex += 1;
+    return this._styleZIndex;
+  }
+
+  /**
+   * @param {TileLoadedEvent} event
+   * @private
+   */
+  _handleTileLoaded({ rtree }) {
+    rtree.all().map(item => item.value).forEach((feature) => {
+      const featureStyle = /** @type {import("ol/style/Style").default} */ (feature.getStyle());
+      if (featureStyle && featureStyle instanceof Style) {
+        featureStyle.setZIndex(this._getNextStyleZIndex());
+      }
+      feature[vcsLayerName] = this.name;
+      feature.getStyleFunction = () => {
+        return this._featureStyle.bind(this);
+      };
+      if (this.tileProvider.trackFeaturesToTiles) {
+        synchronizeFeatureVisibility(this.featureVisibility, this.globalHider, feature);
+      }
+    });
+  }
+
+  /**
+   *
+   * @returns {Array<Function>}
+   * @private
+   */
+  _setupFeatureVisibilityHandlers() {
+    if (!this.tileProvider.trackFeaturesToTiles) {
+      return [];
+    }
+    return [
+      this.featureVisibility.changed.addEventListener(({ action, ids }) => {
+        const tileIdsChanged = new Set();
+        ids.forEach((id) => {
+          const tileIds = this.tileProvider.featureIdToTileIds.get(id);
+          if (tileIds) {
+            tileIds.forEach((tileId) => {
+              const rtree = this.tileProvider.rtreeCache.get(tileId);
+              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]);
+      }),
+
+      this.globalHider.changed.addEventListener(({ action, ids }) => {
+        const tileIdsChanged = new Set();
+        ids.forEach((id) => {
+          const tileIds = this.tileProvider.featureIdToTileIds.get(id);
+          if (tileIds) {
+            tileIds.forEach((tileId) => {
+              const rtree = this.tileProvider.rtreeCache.get(tileId);
+              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
+   * @param {Array<string>} tileIds
+   * @api
+   */
+  updateTiles(tileIds) {
+    this.getImplementations()
+      .forEach((impl) => {
+        /** @type {VectorTileImplementation} */ (impl).updateTiles(tileIds);
+      });
+  }
+
+  /**
+   * calculates the style the feature has to be rendered
+   * @param {import("ol").Feature<import("ol/geom/Geometry").default>} feature
+   * @param {number} resolution
+   * @returns {Array<import("ol/style/Style").default>}
+   * @private
+   */
+  _featureStyle(feature, resolution) {
+    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);
+  }
+
+  /**
+   * @returns {VectorTileImplementationOptions}
+   */
+  getImplementationOptions() {
+    return {
+      ...super.getImplementationOptions(),
+      tileProvider: this.tileProvider,
+      tileSize: this._tileSize,
+      minLevel: this._minLevel,
+      maxLevel: this._maxLevel,
+      extent: this.extent,
+    };
+  }
+
+
+  /**
+   * @inheritDoc
+   * @param {import("@vcmap/core").VcsMap} map
+   * @returns {Array<VectorRasterTileCesium|VectorTileOpenlayers>}
+   */
+  createImplementationsForMap(map) {
+    if (map instanceof CesiumMap) {
+      return [new VectorRasterTileCesium(map, this.getImplementationOptions())];
+    }
+
+    if (map instanceof Openlayers) {
+      return [
+        new VectorTileOpenlayers(map, this.getImplementationOptions()),
+      ];
+    }
+
+    return [];
+  }
+
+  /**
+   * @param {(Reference|DeclarativeStyleItemOptions|VectorStyleItemOptions|import("@vcmap/core").StyleItem|string)=} styleOptions
+   * @param {VectorStyleItem=} defaultStyle
+   * @returns {import("@vcmap/core").StyleItem}
+   */
+  getStyleOrDefaultStyle(styleOptions, defaultStyle) {
+    return super.getStyleOrDefaultStyle(styleOptions, defaultStyle || defaultVectorStyle.clone());
+  }
+
+  /**
+   * @inheritDoc
+   * @returns {Promise<void>}
+   * @api stable
+   */
+  async activate() {
+    await super.activate();
+    this._featureVisibilityListener = this._setupFeatureVisibilityHandlers();
+    if (this.tileProvider.trackFeaturesToTiles) {
+      this.tileProvider.forEachFeature((feature) => {
+        synchronizeFeatureVisibility(this.featureVisibility, this.globalHider, feature);
+      });
+    }
+  }
+
+  /**
+   * @inheritDoc
+   * @api
+   */
+  deactivate() {
+    super.deactivate();
+    this._featureVisibilityListener.forEach((cb) => { cb(); });
+  }
+
+  /**
+   * @inheritDoc
+   * @api
+   */
+  destroy() {
+    this._featureVisibilityListener.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();
+    }
+  }
+
+  /**
+   * @inheritDoc
+   * @returns {VectorTileOptions}
+   */
+  getConfigObject() {
+    const config = /** @type {VectorTileOptions} */ (super.getConfigObject());
+    const defaultOptions = VectorTile.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) {
+      const tileProviderConfig = this.tileProvider.getConfigObject();
+      config.tileProvider = tileProviderConfig;
+    } else if (this._tileProviderOptions) {
+      config.tileProvider = this._tileProviderOptions;
+    }
+
+    return config;
+  }
+}
+
+VcsClassRegistry.registerClass(VectorTile.className, VectorTile);
+export default VectorTile;

package/src/vcs/vcm/layer/wfs.js

@@ -0,0 +1,165 @@
+import WFSFormat from 'ol/format/WFS.js';
+import axios from 'axios';
+import Vector from './vector.js';
+import Projection from '../util/projection.js';
+import { VcsClassRegistry } from '../classRegistry.js';
+
+/**
+ * @typedef {VectorOptions} WFSOptions
+ * @property {string|Array<string>} featureType - required parameter of the featureType to load. Supply an array for multiples
+ * @property {string} featureNS - required parameter, namespace used for the feature prefix
+ * @property {string} featurePrefix - required parameter, feature prefix
+ * @property {Object|undefined} getFeatureOptions - additional config for [ol/format/WFS/writeGetFeature]{@link https://openlayers.org/en/latest/apidoc/ol.format.WFS.html} excluding featureType, featureNS and featurePrefix
+ * @api
+ */
+
+/**
+ * WFS Vector Layer
+ * @class
+ * @export
+ * @extends {Vector}
+ * @api
+ */
+class WFS extends Vector {
+  static get className() { return 'vcs.vcm.layer.WFS'; }
+
+  /**
+   * @returns {WFSOptions}
+   */
+  static getDefaultOptions() {
+    return {
+      ...Vector.getDefaultOptions(),
+      featureType: [],
+      featureNS: '',
+      featurePrefix: '',
+      getFeatureOptions: {},
+    };
+  }
+
+  /**
+   * @param {WFSOptions} options
+   */
+  constructor(options) {
+    const proj = new Projection(options.projection).getConfigObject();
+    proj.alias = [`http://www.opengis.net/gml/srs/epsg.xml#${/** @type {string} */ (proj.epsg).match(/\d+/)[0]}`];
+    options.projection = proj;
+    super(options);
+
+    /** @type {Array<string>} */
+    this.featureType = Array.isArray(options.featureType) ? options.featureType : [options.featureType];
+
+    /**
+     * @type {string}
+     * @todo should this not be an Object with definition and prefix?
+     */
+    this.featureNS = options.featureNS;
+
+    /** @type {string} */
+    this.featurePrefix = options.featurePrefix;
+
+    /** @type {!Object} */
+    this.getFeaturesOptions = options.getFeatureOptions || {};
+
+    /** @type {import("ol/format/WFS").default} */
+    this.wfsFormat = new WFSFormat({
+      featureNS: this.featureNS,
+      featureType: this.featureType,
+    });
+
+    /**
+     * @type {Promise<void>|null}
+     * @private
+     */
+    this._dataFetchedPromise = null;
+  }
+
+  /**
+   * @inheritDoc
+   * @returns {Promise<void>}
+   */
+  async initialize() {
+    if (!this.initialized) {
+      await this.fetchData();
+    }
+    return super.initialize();
+  }
+
+  /**
+   * @inheritDoc
+   * @returns {Promise<void>}
+   */
+  async reload() {
+    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
+   * @returns {Promise<void>}
+   * @api
+   */
+  fetchData() {
+    if (this._dataFetchedPromise) {
+      return this._dataFetchedPromise;
+    }
+    if (this.url != null) {
+      const requestDocument = this.wfsFormat
+        .writeGetFeature(/** @type {import("ol/format/WFS").WriteGetFeatureOptions} */ ({
+          featureNS: this.featureNS,
+          featurePrefix: this.featurePrefix,
+          featureTypes: this.featureType,
+          srsName: this.projection.epsg,
+          ...this.getFeaturesOptions,
+        }));
+      const postData = new XMLSerializer().serializeToString(requestDocument);
+      this._dataFetchedPromise = axios.post(this.url, postData, {
+        headers: {
+          'Content-Type': 'application/text+xml',
+        },
+      })
+        .then((response) => {
+          this._parseWFSData(response.data);
+        })
+        .catch((err) => {
+          this.getLogger().info(`Could not send request for loading layer content (${err.message})`);
+          return Promise.reject(err);
+        });
+
+      return this._dataFetchedPromise;
+    }
+    this.getLogger().warning('Could not load WFS layer, no url is set');
+    return Promise.reject(new Error('missing url in WFS layer'));
+  }
+
+  /**
+   * @param {Element} obj
+   * @private
+   */
+  _parseWFSData(obj) {
+    const features = this.wfsFormat.readFeatures(obj);
+    this.addFeatures(features);
+  }
+
+  /**
+   * @inheritDoc
+   * @returns {WFSOptions}
+   */
+  getConfigObject() {
+    const config = /** @type {WFSOptions} */ (super.getConfigObject());
+
+    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;
+  }
+}
+
+VcsClassRegistry.registerClass(WFS.className, WFS);
+export default WFS;