@vcmap/core 5.0.0-rc.0

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

@@ -0,0 +1,119 @@
+import { check } from '@vcsuite/check';
+import RasterLayer from './rasterLayer.js';
+import SingleImageCesium from './cesium/singleImageCesium.js';
+import SingleImageOpenlayers from './openlayers/singleImageOpenlayers.js';
+import CesiumMap from '../maps/cesium.js';
+import Openlayers from '../maps/openlayers.js';
+import Extent from '../util/extent.js';
+import { VcsClassRegistry } from '../classRegistry.js';
+
+/**
+ * @typedef {RasterLayerOptions} SingleImageOptions
+ * @property {string|undefined} credit -  credit
+ * @api
+ */
+
+/**
+ * @typedef {RasterLayerImplementationOptions} SingleImageImplementationOptions
+ * @property {string|undefined} credit
+ */
+
+/**
+ * Image layer for Cesium and Openlayers
+ * @class
+ * @export
+ * @extends {RasterLayer}
+ * @api stable
+ */
+class SingleImage extends RasterLayer {
+  static get className() { return 'vcs.vcm.layer.SingleImage'; }
+
+  /**
+   * @returns {SingleImageOptions}
+   */
+  static getDefaultOptions() {
+    return {
+      ...RasterLayer.getDefaultOptions(),
+      credit: undefined,
+    };
+  }
+
+  /**
+   * @param {SingleImageOptions} options
+   */
+  constructor(options) {
+    super(options);
+    const defaultOptions = SingleImage.getDefaultOptions();
+    /** @type {string} */
+    this.credit = options.credit || defaultOptions.credit;
+
+    if (!this.extent.isValid()) {
+      this.getLogger().warning(`layer ${this.name} was constructed with an invalid extent, defaulting to global extent`);
+      this.extent = new Extent({
+        epsg: 'EPSG:4326',
+        coordinates: [-180, -90, 180, 90],
+      });
+    }
+
+    this._supportedMaps = [
+      CesiumMap.className,
+      Openlayers.className,
+    ];
+  }
+
+  /**
+   * @returns {SingleImageImplementationOptions}
+   */
+  getImplementationOptions() {
+    return {
+      ...super.getImplementationOptions(),
+      credit: this.credit,
+    };
+  }
+
+  /**
+   * @param {import("@vcmap/core").VcsMap} map
+   * @returns {Array<SingleImageOpenlayers|SingleImageCesium>}
+   */
+  createImplementationsForMap(map) {
+    if (map instanceof CesiumMap) {
+      return [new SingleImageCesium(map, this.getImplementationOptions())];
+    } else if (map instanceof Openlayers) {
+      return [new SingleImageOpenlayers(map, this.getImplementationOptions())];
+    }
+    return [];
+  }
+
+  /**
+   * sets the image extent
+   * @param {Extent} extent
+   * @api
+   */
+  setExtent(extent) {
+    check(extent, Extent);
+    if (!extent.isValid()) {
+      throw new Error('Cannot set invalid extent');
+    }
+
+    this.extent = extent;
+    this.forceRedraw();
+  }
+
+  /**
+   * @inheritDoc
+   * @returns {SingleImageOptions}
+   */
+  getConfigObject() {
+    const config = /** @type {SingleImageOptions} */ (super.getConfigObject());
+    delete config.tilingSchema;
+
+    if (this.credit) {
+      config.credit = this.credit;
+    }
+
+    return config;
+  }
+}
+
+VcsClassRegistry.registerClass(SingleImage.className, SingleImage);
+export default SingleImage;

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

@@ -0,0 +1,122 @@
+import { parseBoolean } from '@vcsuite/parsers';
+import Layer from './layer.js';
+import { getHeightFromTerrainProvider, getTerrainProviderForUrl } from './terrainHelpers.js';
+import CesiumMap from '../maps/cesium.js';
+import TerrainCesium from './cesium/terrainCesium.js';
+import { VcsClassRegistry } from '../classRegistry.js';
+
+/**
+ * @typedef {LayerOptions} TerrainOptions
+ * @property {boolean} [requestVertexNormals=true] - if the terrain should be shaded
+ * @property {boolean} [requestWaterMask=false] - if a watermask should be requested
+ * @api
+ */
+
+/**
+ * @typedef {LayerImplementationOptions} TerrainImplementationOptions
+ * @property {boolean} requestVertexNormals
+ * @property {boolean} requestWaterMask
+ */
+
+/**
+ * represents a terrain layer.
+ * @class
+ * @export
+ * @extends {Layer}
+ * @api stable
+ */
+class Terrain extends Layer {
+  static get className() { return 'vcs.vcm.layer.Terrain'; }
+
+  /**
+   * @returns {TerrainOptions}
+   */
+  static getDefaultOptions() {
+    return {
+      ...Layer.getDefaultOptions(),
+      requestVertexNormals: true,
+      requestWaterMask: false,
+    };
+  }
+
+  /**
+   * @param {TerrainOptions} options
+   */
+  constructor(options) {
+    super(options);
+    const defaultOptions = Terrain.getDefaultOptions();
+
+    this._supportedMaps = [
+      CesiumMap.className,
+    ];
+
+    /**
+     * @type {boolean}
+     * @api
+     */
+    this.requestVertexNormals = parseBoolean(options.requestVertexNormals, defaultOptions.requestVertexNormals);
+
+    /**
+     * @type {boolean}
+     * @api
+     */
+    this.requestWaterMask = parseBoolean(options.requestWaterMask, defaultOptions.requestWaterMask);
+  }
+
+  /**
+   * @returns {TerrainImplementationOptions}
+   */
+  getImplementationOptions() {
+    return {
+      ...super.getImplementationOptions(),
+      requestVertexNormals: this.requestVertexNormals,
+      requestWaterMask: this.requestWaterMask,
+    };
+  }
+
+  /**
+   * @inheritDoc
+   * @param {import("@vcmap/core").VcsMap} map
+   * @returns {Array<TerrainCesium>}
+   */
+  createImplementationsForMap(map) {
+    if (map instanceof CesiumMap) {
+      return [new TerrainCesium(map, this.getImplementationOptions())];
+    }
+    return [];
+  }
+
+  /**
+   * getHeight for coordinates
+   * @param {Array<import("ol/coordinate").Coordinate>} coords - the height is added to the coordinates in place
+   * @returns {Promise<Array<import("ol/coordinate").Coordinate>>}
+   * @api stable
+   */
+  getHeightForWGS84Coordinates(coords) {
+    const terrainProvider = getTerrainProviderForUrl({
+      url: this.url,
+      requestVertexNormals: this.requestVertexNormals,
+      requestWaterMask: this.requestWaterMask,
+    });
+    return getHeightFromTerrainProvider(terrainProvider, coords, null, coords);
+  }
+
+  /**
+   * @returns {TerrainOptions}
+   */
+  getConfigObject() {
+    const config = /** @type {TerrainOptions} */ (super.getConfigObject());
+    const defaultOptions = Terrain.getDefaultOptions();
+
+    if (this.requestVertexNormals !== defaultOptions.requestVertexNormals) {
+      config.requestVertexNormals = this.requestVertexNormals;
+    }
+    if (this.requestWaterMask !== defaultOptions.requestWaterMask) {
+      config.requestWaterMask = this.requestWaterMask;
+    }
+    return config;
+  }
+}
+
+VcsClassRegistry.registerClass(Terrain.className, Terrain);
+export default Terrain;

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

@@ -0,0 +1,123 @@
+import { CesiumTerrainProvider, Cartographic, Cartesian2, sampleTerrainMostDetailed, sampleTerrain } from '@vcmap/cesium';
+import { getTransform } from 'ol/proj.js';
+import Projection, { wgs84Projection } from '../util/projection.js';
+
+/**
+ * @typedef {Object} TerrainProviderOptions
+ * @property {!string} url
+ * @property {boolean|undefined} requestVertexNormals
+ * @property {boolean|undefined} requestWaterMask
+ * @api
+ */
+
+/**
+ * @type {Object<string, import("@vcmap/cesium").CesiumTerrainProvider>}
+ */
+const terrainProviders = {};
+
+/**
+ * @param {TerrainProviderOptions} options
+ * @returns {import("@vcmap/cesium").CesiumTerrainProvider}
+ */
+export function getTerrainProviderForUrl(options) {
+  if (!terrainProviders[options.url]) {
+    terrainProviders[options.url] = new CesiumTerrainProvider(options);
+    return terrainProviders[options.url];
+  }
+  let terrainProvider = terrainProviders[options.url];
+  if ((options.requestVertexNormals !== undefined &&
+    terrainProvider.requestVertexNormals !== options.requestVertexNormals) ||
+    (options.requestWaterMask !== undefined &&
+      terrainProvider.requestWaterMask !== options.requestWaterMask)) {
+    terrainProviders[options.url] = new CesiumTerrainProvider(options);
+    terrainProvider = terrainProviders[options.url];
+  }
+  return terrainProvider;
+}
+
+/**
+ * @param {import("@vcmap/cesium").CesiumTerrainProvider} terrainProvider
+ * @param {Array<import("@vcmap/cesium").Cartographic>} positions
+ * @returns {Promise<Array<import("@vcmap/cesium").Cartographic>>}
+ */
+export function sampleCesiumTerrainMostDetailed(terrainProvider, positions) {
+  return new Promise((resolve, reject) => {
+    sampleTerrainMostDetailed(terrainProvider, positions)
+      .then((updatedPositions) => {
+        resolve(updatedPositions);
+      }, reject);
+  });
+}
+
+/**
+ * updates the height of the positions in place.
+ * @param {import("@vcmap/cesium").CesiumTerrainProvider} terrainProvider
+ * @param {number} level
+ * @param {Array<import("@vcmap/cesium").Cartographic>} positions
+ * @returns {Promise<Array<import("@vcmap/cesium").Cartographic>>}
+ */
+export function sampleCesiumTerrain(terrainProvider, level, positions) {
+  return new Promise((resolve, reject) => {
+    sampleTerrain(terrainProvider, level, positions)
+      .then((updatedPositions) => {
+        resolve(updatedPositions);
+      }, reject);
+  });
+}
+
+/**
+ * changes input coordinate Array in place, new height can also be accessed by coordinates[x][2]
+ * @param {import("@vcmap/cesium").CesiumTerrainProvider} terrainProvider
+ * @param {Array<import("ol/coordinate").Coordinate>} coordinates
+ * @param {(import("@vcmap/core").Projection|import("ol/proj/Projection").default)=} optSourceProjection - if input is not WGS84
+ * @param {Array<import("ol/coordinate").Coordinate>=} result
+ * @returns {Promise<Array<import("ol/coordinate").Coordinate>>}
+ */
+export function getHeightFromTerrainProvider(terrainProvider, coordinates, optSourceProjection, result) {
+  const usedProj = optSourceProjection instanceof Projection ?
+    optSourceProjection.proj :
+    optSourceProjection;
+
+  const sourceTransformer = usedProj ?
+    getTransform(
+      usedProj,
+      wgs84Projection.proj,
+    ) :
+    null;
+
+  const positions = coordinates.map((coord) => {
+    const wgs84 = sourceTransformer ?
+      sourceTransformer(coord, coord.slice(), coord.length) :
+      coord;
+    return Cartographic.fromDegrees(wgs84[0], wgs84[1]);
+  });
+
+  const outArray = result || coordinates.map(c => c.slice());
+  return new Promise((resolve, reject) => {
+    sampleTerrainMostDetailed(terrainProvider, positions)
+      .then((updatedPositions) => {
+        updatedPositions.forEach((position, index) => {
+          outArray[index][2] = position.height || 0;
+        });
+        resolve(outArray);
+      }, reject);
+  });
+}
+
+/**
+ * checks, whether a terrain tile is available at given position or not
+ * @param {import("@vcmap/cesium").CesiumTerrainProvider} terrainProvider
+ * @param {number} level
+ * @param {import("@vcmap/cesium").Cartographic} position
+ * @returns {boolean}
+ */
+export function isTerrainTileAvailable(terrainProvider, level, position) {
+  if (!terrainProvider.ready) {
+    return false;
+  }
+  const tileXY = terrainProvider.tilingScheme.positionToTileXY(
+    position, level, new Cartesian2(),
+  );
+  return terrainProvider.getTileDataAvailable(tileXY.x, tileXY.y, level);
+}
+

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

@@ -0,0 +1,72 @@
+import CesiumTilesetCesium from './cesium/cesiumTilesetCesium.js';
+
+/**
+ * @param {CesiumTilesetCesium} impl
+ * @param {number=} timeout
+ * @returns {Promise<void>}
+ */
+function waitForImplTilesLoaded(impl, timeout) {
+  return new Promise((resolve) => {
+    let timeoutNr;
+    const remover = impl.cesium3DTileset.allTilesLoaded.addEventListener(() => {
+      if (timeoutNr) {
+        clearTimeout(timeoutNr);
+      }
+      remover();
+      resolve();
+    });
+
+    if (timeout != null) {
+      timeoutNr = setTimeout(() => {
+        remover();
+        resolve();
+      }, timeout);
+    }
+  });
+}
+
+/**
+ * @param {import("@vcmap/core").CesiumTileset|import("@vcmap/core").FeatureStore} layer
+ * @param {number=} timeout
+ * @returns {Promise<void>}
+ */
+export async function tiledLayerLoaded(layer, timeout) {
+  const impls = /** @type {Array<CesiumTilesetCesium>} */
+    (layer.getImplementations().filter(i => i instanceof CesiumTilesetCesium));
+  if (!layer.active || impls.every(i => i.cesium3DTileset.tilesLoaded)) {
+    return;
+  }
+
+  await Promise.all(impls.map(i => waitForImplTilesLoaded(i, timeout)));
+}
+
+/**
+ * @param {import("@vcmap/cesium").Globe} globe
+ * @param {number=} timeout
+ * @returns {Promise<void>}
+ */
+export function globeLoaded(globe, timeout) {
+  if (globe.tilesLoaded) {
+    return Promise.resolve();
+  }
+
+  return new Promise((resolve) => {
+    let timeoutNr;
+    const remover = globe.tileLoadProgressEvent.addEventListener((count) => {
+      if (count < 1) {
+        if (timeoutNr) {
+          clearTimeout(timeoutNr);
+        }
+        remover();
+        resolve();
+      }
+    });
+
+    if (timeout != null) {
+      timeoutNr = setTimeout(() => {
+        remover();
+        resolve();
+      }, timeout);
+    }
+  });
+}

package/src/vcs/vcm/layer/tileProvider/mvtTileProvider.js

@@ -0,0 +1,104 @@
+import axios from 'axios';
+import MVT from 'ol/format/MVT.js';
+import Feature from 'ol/Feature.js';
+import { getCenter } from 'ol/extent.js';
+import TileProvider, { rectangleToExtent } from './tileProvider.js';
+import { getURL } from './urlTemplateTileProvider.js';
+
+/**
+ * @typedef {TileProviderOptions} MVTTileProviderOptions
+ * @property {string} url to pbf tiled datasource {x}, {y}, {z} are placeholders for x, y, zoom
+ * @property {string|undefined} idProperty if property exists will be used to set the ID of the feature
+ * @api
+ */
+
+/**
+ * Loads the pbf tiles
+ *
+ * @class
+ * @extends {TileProvider}
+ * @export
+ * @api
+ */
+class MVTTileProvider extends TileProvider {
+  /**
+   * @readonly
+   * @returns {string}
+   */
+  static get className() { return 'vcs.vcm.layer.tileProvider.MVTTileProvider'; }
+
+  /**
+   * @returns {MVTTileProviderOptions}
+   */
+  static getDefaultOptions() {
+    return {
+      ...TileProvider.getDefaultOptions(),
+      url: undefined,
+      idProperty: undefined,
+    };
+  }
+
+  /**
+   * @param {MVTTileProviderOptions} options
+   */
+  constructor(options) {
+    const defaultOptions = MVTTileProvider.getDefaultOptions();
+    super(options);
+
+    /**
+     * @type {string}
+     */
+    this.url = options.url || defaultOptions.url;
+
+    /**
+     * @type {string|undefined}
+     */
+    this.idProperty = options.idProperty || defaultOptions.idProperty;
+
+    /**
+     * @type {import("ol/format/MVT").default}
+     * @private
+     */
+    this._MVTFormat = new MVT({ featureClass: Feature });
+  }
+
+  /**
+   * @inheritDoc
+   * @param {number} x
+   * @param {number} y
+   * @param {number} z
+   * @returns {Promise<Array<import("ol").Feature<import("ol/geom/Geometry").default>>>}
+   */
+  async loader(x, y, z) {
+    const rectangle = this.tilingScheme.tileXYToRectangle(x, y, z);
+    const url = getURL(this.url, x, y, z, rectangle);
+    const extent = rectangleToExtent(rectangle);
+    const center = getCenter(extent);
+    const response = await axios.get(url, { responseType: 'arraybuffer' });
+    const features = /** @type {Array<import("ol").Feature<import("ol/geom/Geometry").default>>} */
+      (this._MVTFormat.readFeatures(response.data));
+    const sx = ((extent[2] - extent[0]) / 4096);
+    const sy = -((extent[3] - extent[1]) / 4096);
+    features.forEach((feature) => {
+      const idToUse = feature.get(this.idProperty);
+      if (idToUse != null) {
+        feature.setId(String(idToUse));
+      }
+      const geom = feature.getGeometry();
+      const flatCoordinates = geom.getFlatCoordinates();
+      const flatCoordinatesLength = flatCoordinates.length;
+      for (let i = 0; i < flatCoordinatesLength; i++) {
+        if (i % 2) {
+          flatCoordinates[i] = (flatCoordinates[i] - 2048) * sy;
+          flatCoordinates[i] += center[1];
+        } else {
+          flatCoordinates[i] = (flatCoordinates[i] - 2048) * sx;
+          flatCoordinates[i] += center[0];
+        }
+      }
+    });
+    return features;
+  }
+}
+
+export default MVTTileProvider;

package/src/vcs/vcm/layer/tileProvider/staticGeojsonTileProvider.js

@@ -0,0 +1,67 @@
+import axios from 'axios';
+import { parseGeoJSON } from '../geojsonHelpers.js';
+import TileProvider from './tileProvider.js';
+
+/**
+ * @typedef {TileProviderOptions} StaticGeojsonTileProviderOptions
+ * @property {string} url geojson
+ * @api
+ */
+
+/**
+ * Loads the provided geojson url and tiles the content in memory, data is only requested once
+ *
+ * @class
+ * @extends {TileProvider}
+ * @export
+ * @api
+ */
+class StaticGeojsonTileProvider extends TileProvider {
+  /**
+   * @readonly
+   * @returns {string}
+   */
+  static get className() { return 'vcs.vcm.layer.tileProvider.StaticGeojsonTileProvider'; }
+
+  /**
+   * @returns {StaticGeojsonTileProviderOptions}
+   */
+  static getDefaultOptions() {
+    return {
+      ...TileProvider.getDefaultOptions(),
+      url: undefined,
+      baseLevels: [0],
+    };
+  }
+
+  /**
+   * @param {StaticGeojsonTileProviderOptions} options
+   */
+  constructor(options) {
+    const defaultOptions = StaticGeojsonTileProvider.getDefaultOptions();
+    options.baseLevels = defaultOptions.baseLevels;
+    super(options);
+
+    /**
+     * @type {string}
+     */
+    this.url = options.url || defaultOptions.url;
+  }
+
+
+  /**
+   * @inheritDoc
+   * @param {number} x
+   * @param {number} y
+   * @param {number} z
+   * @returns {Promise<Array<import("ol").Feature<import("ol/geom/Geometry").default>>>}
+   */
+  // eslint-disable-next-line no-unused-vars
+  async loader(x, y, z) {
+    const response = await axios.get(this.url);
+    const { features } = parseGeoJSON(response.data, { dynamicStyle: true });
+    return features;
+  }
+}
+
+export default StaticGeojsonTileProvider;