@vcmap/core 5.0.0-rc.8 → 5.0.0

package/src/layer/singleImageLayer.ts

@@ -0,0 +1,110 @@
+import { check } from '@vcsuite/check';
+import RasterLayer, {
+  RasterLayerImplementationOptions,
+  RasterLayerOptions,
+} from './rasterLayer.js';
+import SingleImageCesiumImpl from './cesium/singleImageCesiumImpl.js';
+import SingleImageOpenlayersImpl from './openlayers/singleImageOpenlayersImpl.js';
+import CesiumMap from '../map/cesiumMap.js';
+import OpenlayersMap from '../map/openlayersMap.js';
+import Extent from '../util/extent.js';
+import { layerClassRegistry } from '../classRegistry.js';
+import { wgs84Projection } from '../util/projection.js';
+import VcsMap from '../map/vcsMap.js';
+
+export type SingleImageOptions = RasterLayerOptions & {
+  credit?: string;
+};
+
+export type SingleImageImplementationOptions =
+  RasterLayerImplementationOptions & {
+    credit?: string;
+  };
+
+/**
+ * Image layer for Cesium and OpenlayersMap
+ * @group Layer
+ */
+class SingleImageLayer extends RasterLayer<
+  SingleImageCesiumImpl | SingleImageOpenlayersImpl
+> {
+  static get className(): string {
+    return 'SingleImageLayer';
+  }
+
+  static getDefaultOptions(): SingleImageOptions {
+    return {
+      ...RasterLayer.getDefaultOptions(),
+      credit: undefined,
+    };
+  }
+
+  credit: string | undefined;
+
+  constructor(options: SingleImageOptions) {
+    super(options);
+    const defaultOptions = SingleImageLayer.getDefaultOptions();
+    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({
+        projection: wgs84Projection.toJSON(),
+        coordinates: [-180, -90, 180, 90],
+      });
+    }
+
+    this._supportedMaps = [CesiumMap.className, OpenlayersMap.className];
+  }
+
+  getImplementationOptions(): SingleImageImplementationOptions {
+    return {
+      ...super.getImplementationOptions(),
+      credit: this.credit,
+    };
+  }
+
+  createImplementationsForMap(
+    map: VcsMap,
+  ): (SingleImageOpenlayersImpl | SingleImageCesiumImpl)[] {
+    if (map instanceof CesiumMap) {
+      return [new SingleImageCesiumImpl(map, this.getImplementationOptions())];
+    } else if (map instanceof OpenlayersMap) {
+      return [
+        new SingleImageOpenlayersImpl(map, this.getImplementationOptions()),
+      ];
+    }
+    return [];
+  }
+
+  /**
+   * sets the image extent
+   * @param  extent
+   */
+  setExtent(extent: Extent): void {
+    check(extent, Extent);
+    if (!extent.isValid()) {
+      throw new Error('Cannot set invalid extent');
+    }
+
+    this.extent = extent;
+    // eslint-disable-next-line no-void
+    void this.forceRedraw();
+  }
+
+  toJSON(): SingleImageOptions {
+    const config: SingleImageOptions = super.toJSON();
+    delete config.tilingSchema;
+
+    if (this.credit) {
+      config.credit = this.credit;
+    }
+
+    return config;
+  }
+}
+
+layerClassRegistry.registerClass(SingleImageLayer.className, SingleImageLayer);
+export default SingleImageLayer;

package/src/layer/terrainHelpers.ts

@@ -0,0 +1,95 @@
+import {
+  CesiumTerrainProvider,
+  Cartographic,
+  Cartesian2,
+  sampleTerrainMostDetailed,
+} from '@vcmap-cesium/engine';
+import type { Coordinate } from 'ol/coordinate.js';
+import { getTransform } from 'ol/proj.js';
+import Projection, { wgs84Projection } from '../util/projection.js';
+
+export type TerrainProviderOptions = {
+  requestVertexNormals?: boolean;
+  requestWaterMask?: boolean;
+};
+
+const terrainProviders: Record<string, CesiumTerrainProvider> = {};
+
+/**
+ * @param  url
+ * @param  options
+ */
+export async function getTerrainProviderForUrl(
+  url: string,
+  options: TerrainProviderOptions,
+): Promise<CesiumTerrainProvider> {
+  if (!terrainProviders[url]) {
+    terrainProviders[url] = await CesiumTerrainProvider.fromUrl(url, options);
+    return terrainProviders[url];
+  }
+  let terrainProvider = terrainProviders[url];
+  if (
+    (options.requestVertexNormals !== undefined &&
+      terrainProvider.requestVertexNormals !== options.requestVertexNormals) ||
+    (options.requestWaterMask !== undefined &&
+      terrainProvider.requestWaterMask !== options.requestWaterMask)
+  ) {
+    terrainProviders[url] = await CesiumTerrainProvider.fromUrl(url, options);
+    terrainProvider = terrainProviders[url];
+  }
+  return terrainProvider;
+}
+
+/**
+ * changes input coordinate Array in place, new height can also be accessed by coordinates[x][2]
+ * @param  terrainProvider
+ * @param  coordinates
+ * @param  optSourceProjection - if input is not WGS84
+ * @param  result
+ */
+export function getHeightFromTerrainProvider(
+  terrainProvider: CesiumTerrainProvider,
+  coordinates: Coordinate[],
+  optSourceProjection?: Projection,
+  result?: Coordinate[],
+): Promise<Coordinate[]> {
+  const sourceTransformer = optSourceProjection
+    ? getTransform(optSourceProjection.proj, 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 sampleTerrainMostDetailed(terrainProvider, positions).then(
+    (updatedPositions) => {
+      updatedPositions.forEach((position, index) => {
+        outArray[index][2] = position.height || 0;
+      });
+      return outArray;
+    },
+  );
+}
+
+/**
+ * checks, whether a terrain tile is available at given position or not
+ * @param  terrainProvider
+ * @param  level
+ * @param  position
+ */
+export function isTerrainTileAvailable(
+  terrainProvider: CesiumTerrainProvider,
+  level: number,
+  position: Cartographic,
+): boolean {
+  const tileXY = terrainProvider.tilingScheme.positionToTileXY(
+    position,
+    level,
+    new Cartesian2(),
+  );
+  return !!terrainProvider.getTileDataAvailable(tileXY.x, tileXY.y, level);
+}

package/src/layer/terrainLayer.ts

@@ -0,0 +1,108 @@
+import { parseBoolean } from '@vcsuite/parsers';
+import type { Coordinate } from 'ol/coordinate.js';
+import Layer, { LayerImplementationOptions, LayerOptions } from './layer.js';
+import {
+  getHeightFromTerrainProvider,
+  getTerrainProviderForUrl,
+} from './terrainHelpers.js';
+import CesiumMap from '../map/cesiumMap.js';
+import TerrainCesiumImpl from './cesium/terrainCesiumImpl.js';
+import { layerClassRegistry } from '../classRegistry.js';
+import VcsMap from '../map/vcsMap.js';
+
+export type TerrainOptions = LayerOptions & {
+  requestVertexNormals?: boolean;
+  requestWaterMask?: boolean;
+};
+
+export type TerrainImplementationOptions = LayerImplementationOptions & {
+  requestVertexNormals: boolean;
+  requestWaterMask: boolean;
+};
+
+/**
+ * @group Layer
+ */
+class TerrainLayer extends Layer<TerrainCesiumImpl> {
+  static get className(): string {
+    return 'TerrainLayer';
+  }
+
+  static getDefaultOptions(): TerrainOptions {
+    return {
+      ...Layer.getDefaultOptions(),
+      requestVertexNormals: true,
+      requestWaterMask: false,
+    };
+  }
+
+  protected _supportedMaps = [CesiumMap.className];
+
+  requestVertexNormals: boolean;
+
+  requestWaterMask: boolean;
+
+  constructor(options: TerrainOptions) {
+    super(options);
+    const defaultOptions = TerrainLayer.getDefaultOptions();
+
+    this.requestVertexNormals = parseBoolean(
+      options.requestVertexNormals,
+      defaultOptions.requestVertexNormals,
+    );
+    this.requestWaterMask = parseBoolean(
+      options.requestWaterMask,
+      defaultOptions.requestWaterMask,
+    );
+  }
+
+  getImplementationOptions(): TerrainImplementationOptions {
+    return {
+      ...super.getImplementationOptions(),
+      requestVertexNormals: this.requestVertexNormals,
+      requestWaterMask: this.requestWaterMask,
+    };
+  }
+
+  createImplementationsForMap(map: VcsMap): TerrainCesiumImpl[] {
+    if (map instanceof CesiumMap) {
+      return [new TerrainCesiumImpl(map, this.getImplementationOptions())];
+    }
+    return [];
+  }
+
+  /**
+   * getHeight for coordinates
+   * @param  coords - the height is added to the coordinates in place
+   */
+  async getHeightForWGS84Coordinates(
+    coords: Coordinate[],
+  ): Promise<Coordinate[]> {
+    const terrainProvider = await getTerrainProviderForUrl(this.url, {
+      requestVertexNormals: this.requestVertexNormals,
+      requestWaterMask: this.requestWaterMask,
+    });
+    return getHeightFromTerrainProvider(
+      terrainProvider,
+      coords,
+      undefined,
+      coords,
+    );
+  }
+
+  toJSON(): TerrainOptions {
+    const config: TerrainOptions = super.toJSON();
+    const defaultOptions = TerrainLayer.getDefaultOptions();
+
+    if (this.requestVertexNormals !== defaultOptions.requestVertexNormals) {
+      config.requestVertexNormals = this.requestVertexNormals;
+    }
+    if (this.requestWaterMask !== defaultOptions.requestWaterMask) {
+      config.requestWaterMask = this.requestWaterMask;
+    }
+    return config;
+  }
+}
+
+layerClassRegistry.registerClass(TerrainLayer.className, TerrainLayer);
+export default TerrainLayer;

package/src/layer/tileLoadedHelper.ts

@@ -0,0 +1,70 @@
+import type { Globe } from '@vcmap-cesium/engine';
+import CesiumTilesetCesiumImpl from './cesium/cesiumTilesetCesiumImpl.js';
+import CesiumTilesetLayer from './cesiumTilesetLayer.js';
+import FeatureStoreLayer from './featureStoreLayer.js';
+
+function waitForImplTilesLoaded(
+  impl: CesiumTilesetCesiumImpl,
+  timeout?: number,
+): Promise<void> {
+  return new Promise((resolve) => {
+    let timeoutNr: number | undefined | NodeJS.Timeout;
+    const remover =
+      impl.cesium3DTileset?.allTilesLoaded.addEventListener(() => {
+        if (timeoutNr) {
+          clearTimeout(timeoutNr);
+        }
+        remover();
+        resolve();
+      }) ?? ((): void => {});
+
+    if (timeout != null) {
+      timeoutNr = setTimeout(() => {
+        remover();
+        resolve();
+      }, timeout);
+    }
+  });
+}
+
+export async function tiledLayerLoaded(
+  layer: CesiumTilesetLayer | FeatureStoreLayer,
+  timeout?: number,
+): Promise<void> {
+  const impls = layer
+    .getImplementations()
+    .filter(
+      (i) => i instanceof CesiumTilesetCesiumImpl,
+    ) as CesiumTilesetCesiumImpl[];
+  if (!layer.active || impls.every((i) => i.cesium3DTileset?.tilesLoaded)) {
+    return;
+  }
+
+  await Promise.all(impls.map((i) => waitForImplTilesLoaded(i, timeout)));
+}
+
+export function globeLoaded(globe: Globe, timeout?: number): Promise<void> {
+  if (globe.tilesLoaded) {
+    return Promise.resolve();
+  }
+
+  return new Promise((resolve) => {
+    let timeoutNr: number | undefined | NodeJS.Timeout;
+    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/layer/tileProvider/mvtTileProvider.ts

@@ -0,0 +1,121 @@
+import MVT from 'ol/format/MVT.js';
+import Feature from 'ol/Feature.js';
+import { getCenter } from 'ol/extent.js';
+import type { Geometry } from 'ol/geom.js';
+import TileProvider, {
+  rectangleToExtent,
+  TileProviderOptions,
+} from './tileProvider.js';
+import { getURL } from './urlTemplateTileProvider.js';
+import { requestArrayBuffer } from '../../util/fetch.js';
+import { tileProviderClassRegistry } from '../../classRegistry.js';
+
+export type MVTTileProviderOptions = TileProviderOptions & {
+  /**
+   * url to pbf tiled datasource {x}, {y}, {z} are placeholders for x, y, zoom
+   */
+  url: string;
+  /**
+   * if property exists will be used to set the ID of the feature
+   */
+  idProperty?: string;
+};
+
+/**
+ * Loads the pbf tiles
+ */
+class MVTTileProvider extends TileProvider {
+  static get className(): string {
+    return 'MVTTileProvider';
+  }
+
+  static getDefaultOptions(): MVTTileProviderOptions {
+    return {
+      ...TileProvider.getDefaultOptions(),
+      url: '',
+      idProperty: undefined,
+    };
+  }
+
+  url: string;
+
+  idProperty: string | undefined;
+
+  private _MVTFormat = new MVT({ featureClass: Feature });
+
+  constructor(options: MVTTileProviderOptions) {
+    const defaultOptions = MVTTileProvider.getDefaultOptions();
+    super(options);
+
+    this.url = options.url || defaultOptions.url;
+    this.idProperty = options.idProperty || defaultOptions.idProperty;
+  }
+
+  get locale(): string {
+    return super.locale;
+  }
+
+  /**
+   * sets the locale and clears the Cache if the URL is a locale aware Object.
+   */
+  set locale(value: string) {
+    if (this.locale !== value) {
+      super.locale = value;
+      if (this.url.includes('{locale}')) {
+        // eslint-disable-next-line no-void
+        void this.clearCache();
+      }
+    }
+  }
+
+  async loader(x: number, y: number, z: number): Promise<Feature[]> {
+    const rectangle = this.tilingScheme.tileXYToRectangle(x, y, z);
+    const url = getURL(this.url, x, y, z, rectangle, this.locale);
+    const extent = rectangleToExtent(rectangle);
+    const center = getCenter(extent);
+    const data = await requestArrayBuffer(url);
+    const features = this._MVTFormat.readFeatures(data) as Feature[];
+    const sx = (extent[2] - extent[0]) / 4096;
+    const sy = -((extent[3] - extent[1]) / 4096);
+    features.forEach((feature) => {
+      const idToUse = this.idProperty
+        ? (feature.get(this.idProperty) as string)
+        : null;
+      if (idToUse != null) {
+        feature.setId(String(idToUse));
+      }
+      const geom = feature.getGeometry() as Geometry;
+      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;
+  }
+
+  toJSON(): MVTTileProviderOptions {
+    const config: Partial<MVTTileProviderOptions> = super.toJSON();
+
+    if (this.url) {
+      config.url = this.url;
+    }
+
+    if (this.idProperty) {
+      config.idProperty = this.idProperty;
+    }
+    return config as MVTTileProviderOptions;
+  }
+}
+
+export default MVTTileProvider;
+tileProviderClassRegistry.registerClass(
+  MVTTileProvider.className,
+  MVTTileProvider,
+);

package/src/layer/tileProvider/staticGeojsonTileProvider.ts

@@ -0,0 +1,60 @@
+import type { GeoJSONObject } from 'ol/format/GeoJSON.js';
+import type { Feature } from 'ol/index.js';
+import { parseGeoJSON } from '../geojsonHelpers.js';
+import TileProvider, { TileProviderOptions } from './tileProvider.js';
+import { requestJson } from '../../util/fetch.js';
+import { tileProviderClassRegistry } from '../../classRegistry.js';
+
+export type StaticGeoJSONTileProviderOptions = TileProviderOptions & {
+  url: string;
+};
+
+/**
+ * Loads the provided geojson url and tiles the content in memory, data is only requested once
+ */
+class StaticGeoJSONTileProvider extends TileProvider {
+  static get className(): string {
+    return 'StaticGeoJSONTileProvider';
+  }
+
+  static getDefaultOptions(): StaticGeoJSONTileProviderOptions {
+    return {
+      ...TileProvider.getDefaultOptions(),
+      url: '',
+      baseLevels: [0],
+    };
+  }
+
+  url: string;
+
+  constructor(options: StaticGeoJSONTileProviderOptions) {
+    const defaultOptions = StaticGeoJSONTileProvider.getDefaultOptions();
+    options.baseLevels = defaultOptions.baseLevels;
+    super(options);
+
+    this.url = options.url || defaultOptions.url;
+  }
+
+  // eslint-disable-next-line no-unused-vars
+  async loader(_x: number, _y: number, _z: number): Promise<Feature[]> {
+    const data = await requestJson<GeoJSONObject>(this.url);
+    const { features } = parseGeoJSON(data, { dynamicStyle: true });
+    return features;
+  }
+
+  toJSON(): StaticGeoJSONTileProviderOptions {
+    const config: Partial<StaticGeoJSONTileProviderOptions> = super.toJSON();
+    delete config.baseLevels;
+
+    if (this.url) {
+      config.url = this.url;
+    }
+    return config as StaticGeoJSONTileProviderOptions;
+  }
+}
+
+export default StaticGeoJSONTileProvider;
+tileProviderClassRegistry.registerClass(
+  StaticGeoJSONTileProvider.className,
+  StaticGeoJSONTileProvider,
+);