@vcmap/core 5.0.0-rc.0

package/src/vcs/vcm/layer/openlayers/layerOpenlayers.js

@@ -0,0 +1,79 @@
+import { vcsLayerName } from '../layerSymbols.js';
+import LayerImplementation from '../layerImplementation.js';
+
+/**
+ * Layer implementation for {@link CesiumMap}.
+ * @class
+ * @export
+ * @extends {LayerImplementation<import("@vcmap/core").Openlayers>}}
+ */
+class LayerOpenlayers extends LayerImplementation {
+  static get className() { return 'vcs.vcm.layer.openlayers.LayerOpenlayers'; }
+
+  /**
+   * @param {import("@vcmap/core").Openlayers} map
+   * @param {LayerImplementationOptions} options
+   */
+  constructor(map, options) {
+    super(map, options);
+    /**
+     * @type {import("ol/layer").Layer<import("ol/source/Source").default>|null}
+     */
+    this.olLayer = null;
+  }
+
+  /**
+   * @inheritDoc
+   * @returns {Promise<void>}
+   */
+  initialize() {
+    if (!this.initialized) {
+      this.olLayer = this.getOLLayer();
+      this.olLayer[vcsLayerName] = this.name;
+      this.map.addOLLayer(this.olLayer);
+    }
+    return super.initialize();
+  }
+
+  /**
+   * @inheritDoc
+   * @returns {Promise<void>}
+   */
+  async activate() {
+    await super.activate();
+    if (this.active) {
+      this.olLayer.setVisible(true);
+    }
+  }
+
+  /**
+   * @inheritDoc
+   */
+  deactivate() {
+    super.deactivate();
+    if (this.olLayer) {
+      this.olLayer.setVisible(false);
+    }
+  }
+
+  // eslint-disable-next-line jsdoc/require-returns-check
+  /**
+   * returns the ol Layer
+   * @returns {import("ol/layer").Layer<import("ol/source/Source").default>}
+   */
+  // eslint-disable-next-line class-methods-use-this
+  getOLLayer() { throw new Error(); }
+
+  /**
+   * @inheritDoc
+   */
+  destroy() {
+    if (this.olLayer) {
+      this.map.removeOLLayer(this.olLayer);
+    }
+    this.olLayer = null;
+    super.destroy();
+  }
+}
+
+export default LayerOpenlayers;

package/src/vcs/vcm/layer/openlayers/openStreetMapOpenlayers.js

@@ -0,0 +1,27 @@
+import Tile from 'ol/layer/Tile.js';
+import OSM from 'ol/source/OSM.js';
+import RasterLayerOpenlayers from './rasterLayerOpenlayers.js';
+
+/**
+ * represents a specific OpenStreetMap layer for openlayers.
+ * @class
+ * @export
+ * @extends {RasterLayerOpenlayers}
+ */
+class OpenStreetMapOpenlayers extends RasterLayerOpenlayers {
+  static get className() { return 'vcs.vcm.layer.openlayers.OpenStreetMapOpenlayers'; }
+
+  /**
+   * @returns {import("ol/layer/Tile").default}
+   */
+  getOLLayer() {
+    return new Tile({
+      opacity: this.opacity,
+      source: new OSM({
+        maxZoom: this.maxLevel,
+      }),
+    });
+  }
+}
+
+export default OpenStreetMapOpenlayers;

package/src/vcs/vcm/layer/openlayers/rasterLayerOpenlayers.js

@@ -0,0 +1,121 @@
+import { ImagerySplitDirection } from '@vcmap/cesium';
+import { unByKey } from 'ol/Observable.js';
+import LayerOpenlayers from './layerOpenlayers.js';
+
+/**
+ * RasterLayer implementation for {@link Openlayers}
+ * @class
+ * @extends {LayerOpenlayers}
+ * @implements {RasterLayerImplementation}
+ * @abstract
+ */
+class RasterLayerOpenlayers extends LayerOpenlayers {
+  static get className() { return 'vcs.vcm.layer.openlayers.RasterLayerOpenlayers'; }
+
+  /**
+   * @param {import("@vcmap/core").Openlayers} map
+   * @param {RasterLayerImplementationOptions} options
+   */
+  constructor(map, options) {
+    super(map, options);
+    /** @type {import("@vcmap/cesium").ImagerySplitDirection} */
+    this.splitDirection = options.splitDirection;
+    /** @type {number} */
+    this.minLevel = options.minLevel;
+    /** @type {number} */
+    this.maxLevel = options.maxLevel;
+    /** @type {string} */
+    this.tilingSchema = options.tilingSchema;
+    /** @type {import("@vcmap/core").Extent} */
+    this.extent = options.extent;
+    /** @type {number} */
+    this.opacity = options.opacity;
+    /**
+     * @type {Array<import("ol/events").EventsKey>|null}
+     * @private
+     */
+    this._splitDirectionRenderListeners = null;
+  }
+
+  /**
+   * @inheritDoc
+   * @returns {Promise<void>}
+   */
+  initialize() {
+    return super.initialize()
+      .then(() => {
+        this.updateSplitDirection(this.splitDirection);
+      });
+  }
+
+  /**
+   * @param {number} opacity
+   */
+  updateOpacity(opacity) {
+    this.opacity = opacity;
+    if (this.initialized) {
+      this.olLayer.setOpacity(this.opacity);
+    }
+  }
+
+  /**
+   * @param {import("@vcmap/cesium").ImagerySplitDirection} splitDirection
+   */
+  updateSplitDirection(splitDirection) {
+    this.splitDirection = splitDirection;
+    if (this.initialized) {
+      if (this.splitDirection === ImagerySplitDirection.NONE && this._splitDirectionRenderListeners) {
+        unByKey(this._splitDirectionRenderListeners);
+        this._splitDirectionRenderListeners = null;
+        this.olLayer.changed();
+      } else if (splitDirection !== ImagerySplitDirection.NONE && !this._splitDirectionRenderListeners) {
+        this._splitDirectionRenderListeners = [];
+        this._splitDirectionRenderListeners
+          .push(/** @type {import("ol/events").EventsKey} */
+            (this.olLayer.on('prerender', this._splitPreCompose.bind(this))),
+          );
+        this._splitDirectionRenderListeners
+          .push(/** @type {import("ol/events").EventsKey} */
+            (this.olLayer.on('postrender', (/** @type {import("ol/render/Event").default} */ event) => {
+              event.context.restore();
+            })),
+          );
+        this.olLayer.changed();
+      }
+    }
+  }
+
+  /**
+   * @param {import("ol/render/Event").default} event
+   * @private
+   */
+  _splitPreCompose(event) {
+    if (!this.map.splitScreen) {
+      return;
+    }
+    const { context } = event;
+    const width = context.canvas.width * this.map.splitScreen.position;
+    context.save();
+    context.beginPath();
+
+    if (this.splitDirection === ImagerySplitDirection.LEFT) {
+      context.rect(0, 0, width, context.canvas.height);
+    } else {
+      context.rect(width, 0, context.canvas.width - width, context.canvas.height);
+    }
+    context.clip();
+  }
+
+  /**
+   * @inheritDoc
+   */
+  destroy() {
+    if (this._splitDirectionRenderListeners) {
+      unByKey(this._splitDirectionRenderListeners);
+      this._splitDirectionRenderListeners = null;
+    }
+    super.destroy();
+  }
+}
+
+export default RasterLayerOpenlayers;

package/src/vcs/vcm/layer/openlayers/singleImageOpenlayers.js

@@ -0,0 +1,49 @@
+import ImageLayer from 'ol/layer/Image.js';
+import ImageStatic from 'ol/source/ImageStatic.js';
+import RasterLayerOpenlayers from './rasterLayerOpenlayers.js';
+import { wgs84Projection } from '../../util/projection.js';
+import { isSameOrigin } from '../../util/urlHelpers.js';
+
+/**
+ * represents a specific OpenLayers SingleImageLayer Layer class.
+ * @class
+ * @export
+ * @extends {RasterLayerOpenlayers}
+ */
+class SingleImageOpenlayers extends RasterLayerOpenlayers {
+  static get className() { return 'vcs.vcm.layer.openlayers.SingleImageOpenlayers'; }
+
+  /**
+   * @param {import("@vcmap/core").Openlayers} map
+   * @param {SingleImageImplementationOptions} options
+   */
+  constructor(map, options) {
+    super(map, options);
+
+    /** @type {string} */
+    this.credit = options.credit;
+  }
+
+  /**
+   * returns the ol Layer
+   * @returns {import("ol/layer/Layer").default}
+   */
+  getOLLayer() {
+    const options = {
+      attributions: this.credit,
+      url: this.url,
+      projection: 'EPSG:4326',
+      imageExtent: this.extent.getCoordinatesInProjection(wgs84Projection),
+    };
+    if (!isSameOrigin(this.url)) {
+      options.crossOrigin = 'anonymous';
+    }
+
+    return new ImageLayer({
+      source: new ImageStatic(options),
+      opacity: this.opacity,
+    });
+  }
+}
+
+export default SingleImageOpenlayers;

package/src/vcs/vcm/layer/openlayers/tileDebugOpenlayers.js

@@ -0,0 +1,39 @@
+import Tile from 'ol/layer/Tile.js';
+import TileDebug from 'ol/source/TileDebug.js';
+import LayerOpenlayers from './layerOpenlayers.js';
+
+/**
+ * layer Implementation to render tile boundaries.
+ * @class
+ * @export
+ * @extends {LayerOpenlayers}
+ * @implements {VectorTileImplementation}
+ */
+class TileDebugOpenlayers extends LayerOpenlayers {
+  static get className() { return 'vcs.vcm.layer.openlayers.TileDebugOpenlayers'; }
+
+  /**
+   * @returns {import("ol/layer/Tile").default}
+   */
+  // eslint-disable-next-line class-methods-use-this
+  getOLLayer() {
+    return new Tile({
+      source: new TileDebug(),
+    });
+  }
+
+  /**
+   * @param {import("@vcmap/core").StyleItem} styleItem
+   * @param {boolean} silent
+   */
+  // eslint-disable-next-line class-methods-use-this,no-unused-vars
+  updateStyle(styleItem, silent) {}
+
+  /**
+   * @param {Array<string>} args
+   */
+  // eslint-disable-next-line class-methods-use-this,no-unused-vars
+  updateTiles(args) {}
+}
+
+export default TileDebugOpenlayers;

package/src/vcs/vcm/layer/openlayers/tmsOpenlayers.js

@@ -0,0 +1,62 @@
+import XYZ from 'ol/source/XYZ.js';
+import Tile from 'ol/layer/Tile.js';
+import { mercatorProjection } from '../../util/projection.js';
+import RasterLayerOpenlayers from './rasterLayerOpenlayers.js';
+import { TilingScheme } from '../rasterLayer.js';
+import { isSameOrigin } from '../../util/urlHelpers.js';
+
+/**
+ * TMS implementation for {@link Openlayers}.
+ * @class
+ * @export
+ * @extends {RasterLayerOpenlayers}
+ */
+class TMSOpenlayers extends RasterLayerOpenlayers {
+  static get className() { return 'vcs.vcm.layer.openlayers.TMSOpenlayers'; }
+
+  /**
+   * @param {import("@vcmap/core").Openlayers} map
+   * @param {TMSImplementationOptions} options
+   */
+  constructor(map, options) {
+    super(map, options);
+    /** @type {string} */
+    this.format = options.format;
+    /** @type {import("ol/size").Size} */
+    this.tileSize = options.tileSize;
+  }
+
+  /**
+   * @returns {import("ol/layer/Tile").default}
+   */
+  getOLLayer() {
+    const sourceOptions = {
+      tileUrlFunction: (tileCoord) => {
+        const baseUrl = this.url.replace(/\/$/, '');
+        const y = (1 << tileCoord[0]) - (tileCoord[2]) - 1;
+        return `${baseUrl}/${tileCoord[0]}/${tileCoord[1]}/${y}.${this.format}`;
+      },
+      tileSize: this.tileSize,
+      minZoom: this.minLevel,
+      maxZoom: this.maxLevel,
+      wrapX: false,
+    };
+    if (!isSameOrigin(this.url)) {
+      sourceOptions.crossOrigin = 'anonymous';
+    }
+    if (this.tilingSchema === TilingScheme.GEOGRAPHIC) {
+      sourceOptions.projection = 'EPSG:4326';
+    }
+
+    const tileOptions = {
+      source: new XYZ(sourceOptions),
+      opacity: this.opacity,
+    };
+    if (this.extent && this.extent.isValid()) {
+      tileOptions.extent = this.extent.getCoordinatesInProjection(mercatorProjection);
+    }
+    return new Tile(tileOptions);
+  }
+}
+
+export default TMSOpenlayers;

package/src/vcs/vcm/layer/openlayers/vectorOpenlayers.js

@@ -0,0 +1,118 @@
+import OLVectorLayer from 'ol/layer/Vector.js';
+import LayerOpenlayers from './layerOpenlayers.js';
+import { synchronizeFeatureVisibilityWithSource } from '../vectorHelpers.js';
+import { getGlobalHider } from '../globalHider.js';
+
+/**
+ * represents a specific vectorlayer for openlayers.
+ * @class
+ * @export
+ * @implements {FeatureLayerImplementation}
+ * @extends {LayerOpenlayers}
+ */
+class VectorOpenlayers extends LayerOpenlayers {
+  static get className() { return 'vcs.vcm.layer.openlayers.VectorOpenlayers'; }
+
+  /**
+   * @param {import("@vcmap/core").Openlayers} map
+   * @param {VectorImplementationOptions} options
+   */
+  constructor(map, options) {
+    super(map, options);
+    /** @type {import("ol/source").Vector<import("ol/geom/Geometry").default>} */
+    this.source = options.source;
+    /** @type {import("@vcmap/core").StyleItem} */
+    this.style = options.style;
+    /** @type {number} */
+    this.maxResolution = options.maxResolution;
+    /** @type {number} */
+    this.minResolution = options.minResolution;
+    /** @type {import("@vcmap/core").FeatureVisibility} */
+    this.featureVisibility = options.featureVisibility;
+    /**
+     * @type {Array<Function>}
+     * @private
+     */
+    this._featureVisibilityListeners = [];
+    /** @type {import("ol/layer/Vector").default<import("ol/source").Vector<import("ol/geom/Geometry").default>>|null} */
+    this.olLayer = null;
+    this.globalHider = getGlobalHider();
+  }
+
+  /**
+   * @param {import("@vcmap/core").StyleItem} style
+   * @param {boolean=} silent
+   */
+  // eslint-disable-next-line no-unused-vars
+  updateStyle(style, silent) {
+    this.style = style;
+    if (this.initialized) {
+      this.olLayer.setStyle(this.style.style);
+    }
+  }
+
+  /**
+   * @inheritDoc
+   * @returns {import("ol/layer/Vector").default<import("ol/source").Vector<import("ol/geom/Geometry").default>>}
+   */
+  getOLLayer() {
+    const olLayer = new OLVectorLayer({
+      visible: false,
+      source: this.source,
+      style: this.style.style,
+    });
+
+    if (this.minResolution) {
+      olLayer.setMinResolution(this.minResolution);
+    }
+    if (this.maxResolution) {
+      olLayer.setMaxResolution(this.maxResolution);
+    }
+    return olLayer;
+  }
+
+  /**
+   * @inheritDoc
+   * @returns {Promise<void>}
+   */
+  async activate() {
+    if (!this.active) {
+      await super.activate();
+      if (this.active) {
+        if (this._featureVisibilityListeners.length === 0) {
+          this._featureVisibilityListeners =
+            synchronizeFeatureVisibilityWithSource(this.featureVisibility, this.source, this.globalHider);
+        }
+      }
+    }
+  }
+
+  /**
+   * @inheritDoc
+   */
+  deactivate() {
+    super.deactivate();
+    this._featureVisibilityListeners.forEach((cb) => { cb(); });
+    this._featureVisibilityListeners = [];
+  }
+
+  /**
+   * @param {boolean} visibility
+   */
+  setVisibility(visibility) {
+    if (this.initialized) {
+      this.olLayer.setVisible(visibility);
+    }
+  }
+
+  /**
+   * @inheritDoc
+   */
+  destroy() {
+    this._featureVisibilityListeners.forEach((cb) => { cb(); });
+    this._featureVisibilityListeners = [];
+    super.destroy();
+  }
+}
+
+export default VectorOpenlayers;

package/src/vcs/vcm/layer/openlayers/vectorTileOpenlayers.js

@@ -0,0 +1,177 @@
+import OLVectorTileLayer from 'ol/layer/VectorTile.js';
+import VectorTileSource from 'ol/source/VectorTile.js';
+import TileState from 'ol/TileState.js';
+import LayerOpenlayers from './layerOpenlayers.js';
+import { mercatorProjection } from '../../util/projection.js';
+
+/**
+ * represents a specific vectorTileLayer for openlayers.
+ * @class
+ * @export
+ * @implements {VectorTileImplementation}
+ * @extends {LayerOpenlayers}
+ */
+class VectorTileOpenlayers extends LayerOpenlayers {
+  static get className() { return 'vcs.vcm.layer.openlayers.VectorTileOpenlayers'; }
+
+  /**
+   * @param {import("@vcmap/core").Openlayers} map
+   * @param {VectorTileImplementationOptions} options
+   */
+  constructor(map, options) {
+    super(map, options);
+
+    /** @type {import("@vcmap/core").TileProvider} */
+    this.tileProvider = options.tileProvider;
+
+    /** @type {import("ol/source").VectorTile} */
+    this.source = null;
+
+    /**
+     * @type {import("ol/size").Size}
+     */
+    this.tileSize = options.tileSize;
+
+    /**
+     * tiles to update on next TileRedraw
+     * @type {Set<string>}
+     * @private
+     */
+    this._tilesToUpdate = new Set();
+
+    /**
+     * @type {number|null}
+     * @private
+     */
+    this._reloadTimeout = null;
+
+    /**
+     * @type {number|undefined}
+     */
+    this.minLevel = options.minLevel;
+
+    /**
+     * @type {number|undefined}
+     */
+    this.maxLevel = options.maxLevel;
+
+    /**
+     * @type {import("@vcmap/core").Extent|undefined}
+     */
+    this.extent = options.extent;
+  }
+
+  /**
+   * @inheritDoc
+   * @returns {import("ol/layer/VectorTile").default}
+   */
+  getOLLayer() {
+    this.source = new VectorTileSource({
+      minZoom: 0,
+      maxZoom: 26,
+      tileSize: this.tileSize,
+      /**
+       * @param {import("ol/VectorTile").default} tile
+       * @returns {Promise<void>}
+       */
+      tileLoadFunction: async (tile) => {
+        const features =
+          await this.tileProvider.getFeaturesForTile(tile.tileCoord[1], tile.tileCoord[2], tile.tileCoord[0]);
+        if (features.length > 0) {
+          tile.setFeatures(features);
+        } else {
+          tile.setFeatures([]);
+          tile.setState(TileState.EMPTY);
+        }
+      },
+      // url needs to be set for the tileLoadFunction to work.
+      url: '/{z}/{x}/{y}',
+    });
+    const extent = this.extent && this.extent.isValid() ?
+      this.extent.getCoordinatesInProjection(mercatorProjection) : undefined;
+    // make it so that openlayers and cesium zoom level fit together
+    const minZoom = this.minLevel ? this.minLevel : undefined;
+    const maxZoom = this.maxLevel ? this.maxLevel + 1 : undefined;
+    const olLayer = new OLVectorTileLayer({
+      visible: false,
+      source: this.source,
+      renderBuffer: 200,
+      renderMode: 'image',
+      declutter: true,
+      extent,
+      minZoom,
+      maxZoom,
+    });
+    return olLayer;
+  }
+
+  /**
+   * rerenders the specified tiles
+   * rendering happens async
+   * @param {Array<string>} tileIds
+   * @api
+   */
+  updateTiles(tileIds) {
+    if (tileIds.length > 0) {
+      tileIds.forEach((tileId) => {
+        this._tilesToUpdate.add(tileId);
+      });
+      if (this.source) {
+        if (!this._reloadTimeout) {
+          this._reloadTimeout = window.setTimeout(() => {
+            this._tilesToUpdate.forEach((tileId) => {
+              // @ts-ignore
+              const { tileCache } = this.source;
+              if (tileCache.containsKey(tileId)) {
+                // change of key of tile (will trigger a reload)
+                const tile = tileCache.get(tileId);
+                tile.key = false;
+              }
+            });
+            this.source.changed();
+            this._tilesToUpdate.clear();
+            this._reloadTimeout = null;
+          }, 0);
+        }
+      }
+    }
+  }
+
+  /**
+   * @param {import("@vcmap/core").StyleItem} style
+   * @param {boolean=} silent
+   * @api
+   */
+  // eslint-disable-next-line no-unused-vars
+  updateStyle(style, silent) {
+    if (this.initialized) {
+      window.clearTimeout(this._reloadTimeout);
+      this._reloadTimeout = null;
+      this._tilesToUpdate.clear();
+      this.source.refresh();
+    }
+  }
+
+  /**
+   * @param {boolean} visibility
+   */
+  setVisibility(visibility) {
+    if (this.initialized) {
+      this.olLayer.setVisible(visibility);
+    }
+  }
+
+  /**
+   * @inheritDoc
+   */
+  destroy() {
+    if (this.source) {
+      this.source.clear();
+      this.source = null;
+    }
+    this.tileProvider = null;
+    super.destroy();
+  }
+}
+
+export default VectorTileOpenlayers;