@vcmap/core 5.0.0-rc.3 → 5.0.0-rc.6

package/src/vcs/vcm/oblique/ObliqueDataSet.js

@@ -1,10 +1,10 @@
-import axios from 'axios';
 import { createXYZ } from 'ol/tilegrid.js';
 import { cartesian2DDistance } from '../util/math.js';
 import { parseImageData, parseImageMeta, parseLegacyImageData, getVersionFromImageJson } from './parseImageJson.js';
 import VcsEvent from '../event/vcsEvent.js';
 import { getTerrainProviderForUrl } from '../layer/terrainHelpers.js';
 import Projection from '../util/projection.js';
+import { requestJson } from '../util/fetch.js';
 
 /**
  * @typedef {Object} ObliqueDataSetImagesLoaded
@@ -156,9 +156,10 @@ class ObliqueDataSet {
     if (!this._loadingPromise) {
       this._state = DataState.LOADING;
 
-      this._loadingPromise = axios.get(this.url)
-        .then(({ data }) => {
-          this._initialize(data);
+      this._loadingPromise = requestJson(this.url)
+        .then(data => this._initialize(data))
+        .catch((err) => {
+          return Promise.reject(err);
         });
     }
     return this._loadingPromise;
@@ -326,9 +327,8 @@ class ObliqueDataSet {
     }
 
     this._tiles.set(stringTileCoordinates, DataState.LOADING);
-    const promise = axios
-      .get(`${this.baseUrl}/${stringTileCoordinates}.json`)
-      .then(({ data }) => {
+    const promise = requestJson(`${this.baseUrl}/${stringTileCoordinates}.json`)
+      .then((data) => {
         const images = parseImageData(data, this._imageMetas);
         if (images.length > 0) {
           this._images = this._images.concat(images);

package/src/vcs/vcm/oblique/ObliqueImageMeta.js

@@ -11,7 +11,7 @@ import { cartesian2DDistance } from '../util/math.js';
  * @property {Array<number>} tileResolution
  * @property {import("@vcmap/core").Projection} projection
  * @property {string} url
- * @property {import("@vcmap/cesium").CesiumTerrainProvider} terrainProvider
+ * @property {import("@vcmap/cesium").CesiumTerrainProvider} [terrainProvider]
  * @property {string} name
  * @property {string|undefined} [format='jpg']
  * @api
@@ -75,7 +75,7 @@ class ObliqueImageMeta {
     this.url = options.url;
     /**
      * An optional terrain provider
-     * @type {import("@vcmap/cesium").CesiumTerrainProvider}
+     * @type {import("@vcmap/cesium").CesiumTerrainProvider|undefined}
      * @api
      */
     this.terrainProvider = options.terrainProvider;

package/src/vcs/vcm/oblique/ObliqueProvider.js

@@ -7,6 +7,7 @@ import { transformFromImage } from './helpers.js';
 import { getHeightFromTerrainProvider } from '../layer/terrainHelpers.js';
 import { mercatorProjection } from '../util/projection.js';
 import VcsEvent from '../event/vcsEvent.js';
+import { isDefaultImageSymbol } from './defaultObliqueCollection.js';
 
 /**
  * @typedef {Object} ObliqueViewPoint
@@ -293,7 +294,7 @@ class ObliqueProvider {
     const previousView = this._currentView;
     this._currentView = olView;
     if (isNewImage) {
-      this._currentView.setImageName(this._currentImage.name);
+      this._currentView.setImageName(this._currentImage.name, this._currentImage[isDefaultImageSymbol]);
     }
 
     const [width, height] = this._currentImage.meta.size;

package/src/vcs/vcm/oblique/ObliqueView.js

@@ -6,6 +6,29 @@ import TileImage from 'ol/source/TileImage.js';
 import Tile from 'ol/layer/Tile.js';
 import { hasSameOrigin } from './helpers.js';
 
+/** @type {string} */
+let defaultImage = '';
+
+/**
+ * @returns {string}
+ */
+function getDefaultImage() {
+  if (!defaultImage) {
+    const canvas = document.createElement('canvas');
+    canvas.height = 512;
+    canvas.width = 512;
+    const context = canvas.getContext('2d');
+    context.fillStyle = '#409D76';
+    context.fillRect(0, 0, 512, 512);
+    context.font = 'bold 46px Monospace, Courier New';
+    context.fillStyle = '#424242';
+    context.textAlign = 'center';
+    context.fillText('No Image', 256, 256);
+    defaultImage = canvas.toDataURL('png');
+  }
+  return defaultImage;
+}
+
 /**
  * @typedef {Object} ObliqueViewOptions
  * @property {number} minZoom
@@ -108,9 +131,16 @@ class ObliqueView {
   /**
    * Sets the layers source to request data for this image
    * @param {string} name
+   * @param {boolean} [isDefaultImage=false]
    * @api
    */
-  setImageName(name) {
+  setImageName(name, isDefaultImage = false) {
+    if (isDefaultImage) {
+      this.tileImageSource.setTileLoadFunction(/** @param {import("ol").ImageTile} tile */ (tile) => {
+        /** @type {HTMLImageElement} */ (tile.getImage()).src = getDefaultImage();
+        tile.load();
+      });
+    }
     this.tileImageSource.setTileUrlFunction((coords) => {
       const [z, x, yInverted] = coords;
       const y = -yInverted - 1;

package/src/vcs/vcm/oblique/defaultObliqueCollection.js

@@ -0,0 +1,62 @@
+import ObliqueCollection from './ObliqueCollection.js';
+import ObliqueImage from './ObliqueImage.js';
+import ObliqueImageMeta from './ObliqueImageMeta.js';
+import { ObliqueViewDirection } from './ObliqueViewDirection.js';
+import { mercatorProjection } from '../util/projection.js';
+
+const defaultMeta = new ObliqueImageMeta({
+  name: 'defaultObliqueMeta',
+  size: [512, 512],
+  tileSize: [512, 512],
+  tileResolution: [1],
+  projection: mercatorProjection,
+  format: 'png',
+  url: '',
+});
+
+/**
+ * @type {symbol}
+ * @private
+ */
+export const isDefaultImageSymbol = Symbol('isDefaultImage');
+
+/**
+ * This is a special oblique collection wich is shown, if no other oblique collection is set on an Oblique map.
+ * It will render a single image which indicates that no images can be loaded.
+ * @class
+ * @extends {ObliqueCollection}
+ */
+class DefaultObliqueCollection extends ObliqueCollection {
+  constructor() {
+    super({});
+  }
+
+  /**
+   * @param {import("ol/coordinate").Coordinate} mercatorCoordinate
+   * @param {ObliqueViewDirection} viewDirection
+   * @returns {ObliqueImage}
+   */
+  // eslint-disable-next-line no-unused-vars
+  getImageForCoordinate(mercatorCoordinate, viewDirection) {
+    const groundCoordinates = [
+      [mercatorCoordinate[0] - 100, mercatorCoordinate[1] - 100, 0],
+      [mercatorCoordinate[0] + 100, mercatorCoordinate[1] - 100, 0],
+      [mercatorCoordinate[0] + 100, mercatorCoordinate[1] + 100, 0],
+      [mercatorCoordinate[0] - 100, mercatorCoordinate[1] + 100, 0],
+    ];
+
+    const image = new ObliqueImage({
+      meta: defaultMeta,
+      viewDirection: ObliqueViewDirection.NORTH,
+      viewDirectionAngle: 0,
+      name: this.name,
+      groundCoordinates,
+      centerPointOnGround: mercatorCoordinate,
+    });
+
+    image[isDefaultImageSymbol] = true;
+    return image;
+  }
+}
+
+export default DefaultObliqueCollection;

package/src/vcs/vcm/util/clipping/clippingPlaneHelper.js

@@ -19,7 +19,7 @@ import Polygon from 'ol/geom/Polygon.js';
 
 import { check, checkMaybe } from '@vcsuite/check';
 import Projection, { mercatorProjection, wgs84Projection } from '../projection.js';
-import { createOrUpdateFromGeometry } from '../featureconverter/extent3d.js';
+import Extent3D from '../featureconverter/extent3D.js';
 import { enforceEndingVertex, enforceRightHand, getFlatCoordinatesFromGeometry } from '../geometryHelpers.js';
 
 /**
@@ -75,9 +75,9 @@ function createVerticalPlanes(coords) {
  */
 function createHorizontalPlanes(feature, coords, options) {
   const clippingPlanes = [];
-  const extent = createOrUpdateFromGeometry(feature.getGeometry());
-  let min = Number.isFinite(extent[2]) ? extent[2] : 0;
-  let max = Number.isFinite(extent[5]) ? extent[5] : 0;
+  const extent = Extent3D.fromGeometry(feature.getGeometry());
+  let min = Number.isFinite(extent.minZ) ? extent.minZ : 0;
+  let max = Number.isFinite(extent.maxZ) ? extent.maxZ : 0;
   const extruded = feature.get('olcs_extrudedHeight');
   if (extruded) {
     max += extruded;

package/src/vcs/vcm/util/extent.js

@@ -1,8 +1,10 @@
 import Projection from './projection.js';
 
 /**
- * @typedef {ProjectionOptions} ExtentOptions
- * @property {import("ol/extent").Extent|undefined} coordinates - if not specified, the extent of the projection is used
+ * @typedef {Object} ExtentOptions
+ * @property {string} [type]
+ * @property {import("ol/extent").Extent|undefined} [coordinates] - if not specified, the extent of the projection is used
+ * @property {ProjectionOptions} [projection] - if not specified the default projection is assumed
  * @api
  */
 
@@ -45,12 +47,7 @@ class Extent {
    */
   constructor(options = {}) {
     /** @type {Projection} */
-    this.projection = new Projection({
-      epsg: options.epsg,
-      proj4: options.proj4,
-      alias: options.alias,
-      prefix: options.prefix,
-    });
+    this.projection = new Projection(options.projection);
 
     /** @type {import("ol/extent").Extent|null} */
     this.extent = options.coordinates || this.projection.proj.getExtent();
@@ -87,7 +84,7 @@ class Extent {
   toJSON() {
     return {
       coordinates: this.extent.slice(),
-      ...this.projection.toJSON(),
+      projection: this.projection.toJSON(),
       type: Extent.className,
     };
   }
@@ -122,7 +119,7 @@ class Extent {
    * @api
    */
   static validateOptions(options) {
-    return Projection.validateOptions(options) && checkExtentValidity(options.coordinates);
+    return Projection.validateOptions(options.projection || {}) && checkExtentValidity(options.coordinates);
   }
 
   /**

package/src/vcs/vcm/util/featureProvider/featureProviderHelpers.js

@@ -1,6 +1,6 @@
 import { getCenter } from 'ol/extent.js';
 import Projection from '../projection.js';
-import { createOrUpdateFromGeometry } from '../featureconverter/extent3d.js';
+import Extent3D from '../featureconverter/extent3D.js';
 
 /**
  * @param {VectorClickedObject} feature
@@ -32,9 +32,8 @@ export function getGenericFeatureFromProvidedFeature(feature, layer) {
 
   let heightOffset = clickedPosition.height;
   if (!isModel) {
-    const extent = createOrUpdateFromGeometry(geometry);
-    const max = Number.isFinite(extent[5]) ? extent[5] : 0;
-    heightOffset = max;
+    const extent = Extent3D.fromGeometry(geometry);
+    heightOffset = Number.isFinite(extent.maxZ) ? extent.maxZ : 0;
   }
   const relativeToGround = !isModel && feature.get('olcs_altitudeMode') === 'relativeToGround';
 

package/src/vcs/vcm/util/featureProvider/wmsFeatureProvider.js

@@ -1,4 +1,3 @@
-import axios from 'axios';
 import GML2 from 'ol/format/GML2.js';
 import WFS from 'ol/format/WFS.js';
 import GeoJSON from 'ol/format/GeoJSON.js';
@@ -10,6 +9,7 @@ import AbstractFeatureProvider from './abstractFeatureProvider.js';
 import Projection, { mercatorProjection } from '../projection.js';
 import { getWMSSource } from '../../layer/wmsHelpers.js';
 import Extent from '../extent.js';
+import { requestJson } from '../fetch.js';
 
 /**
  * @typedef {AbstractFeatureProviderOptions} WMSFeatureProviderOptions
@@ -155,12 +155,11 @@ class WMSFeatureProvider extends AbstractFeatureProvider {
   }
 
   /**
-   * @param {import("axios").AxiosResponse<*>} response
+   * @param {import("ol/format/GeoJSON").GeoJSONObject} data
    * @param {import("ol/coordinate").Coordinate} coordinate
    * @returns {Array<import("ol").Feature<import("ol/geom/Geometry").default>>}
    */
-  featureResponseCallback(response, coordinate) {
-    const { data } = response;
+  featureResponseCallback(data, coordinate) {
     /** @type {Array<import("ol").Feature<import("ol/geom/Geometry").default>>} */
     let features;
 
@@ -211,8 +210,14 @@ class WMSFeatureProvider extends AbstractFeatureProvider {
     );
 
     if (url) {
-      const response = await axios.get(url);
-      return this.featureResponseCallback(response, coordinate)
+      let data;
+      try {
+        data = await requestJson(url);
+      } catch (ex) {
+        this.getLogger().error(`Failed fetching WMS FeatureInfo ${url}`);
+        return [];
+      }
+      return this.featureResponseCallback(data, coordinate)
         .map(f => this.getProviderFeature(f));
     }
     return [];

package/src/vcs/vcm/util/featureconverter/extent3D.js

@@ -0,0 +1,181 @@
+import GeometryType from 'ol/geom/GeometryType.js';
+import { check } from '@vcsuite/check';
+
+
+class Extent3D {
+  /**
+   * @param {Array<number>} array
+   * @returns {Extent3D}
+   */
+  static fromArray(array) {
+    check(array, [Number]);
+    check(array.length, 6);
+    return new Extent3D(array[0], array[1], array[2], array[3], array[4], array[5]);
+  }
+
+  /**
+   * @param {import("ol/geom").Geometry} geometry
+   * @returns {Extent3D}
+   */
+  static fromGeometry(geometry) {
+    const extent = new Extent3D();
+    extent.extendWithGeometry(geometry);
+    return extent;
+  }
+
+  /**
+   * @param {VectorHeightInfo} heightInfo
+   * @returns {Extent3D}
+   */
+  static fromHeightInfo(heightInfo) {
+    const extent = new Extent3D();
+    extent.extendWithHeightInfo(heightInfo);
+    return extent;
+  }
+
+  /**
+   * @param {number} minX
+   * @param {number} minY
+   * @param {number} minZ
+   * @param {number} maxX
+   * @param {number} maxY
+   * @param {number} maxZ
+   */
+  constructor(minX = Infinity, minY = Infinity, minZ = Infinity, maxX = -Infinity, maxY = -Infinity, maxZ = -Infinity) {
+    /**
+     * @type {number}
+     */
+    this.minX = minX;
+    /**
+     * @type {number}
+     */
+    this.minY = minY;
+    /**
+     * @type {number}
+     */
+    this.minZ = minZ;
+    /**
+     * @type {number}
+     */
+    this.maxX = maxX;
+    /**
+     * @type {number}
+     */
+    this.maxY = maxY;
+    /**
+     * @type {number}
+     */
+    this.maxZ = maxZ;
+  }
+
+  /**
+   * @param {import("ol/geom").Geometry} geometry
+   */
+  extendWithGeometry(geometry) {
+    if (geometry.getType() === GeometryType.GEOMETRY_COLLECTION) {
+      /** @type {import("ol/geom/GeometryCollection").default} */ (geometry)
+        .getGeometriesArray().forEach((geom) => { this.extendWithGeometry(geom); });
+    } else if (geometry.getType() === GeometryType.CIRCLE) {
+      const flatCoordinates = /** @type {import("ol/geom/Circle").default} */ (geometry).getFlatCoordinates();
+      const stride = /** @type {import("ol/geom/Circle").default} */ (geometry).getStride();
+      const radius = flatCoordinates[stride] - flatCoordinates[0];
+      this.extendXY(
+        flatCoordinates[0] - radius,
+        flatCoordinates[1] - radius,
+      );
+      this.extendXY(
+        flatCoordinates[0] + radius,
+        flatCoordinates[1] + radius,
+      );
+      if (stride > 2) {
+        this.extendZ(flatCoordinates[2]);
+      }
+    } else {
+      const flatCoordinates = /** @type {import("ol/geom/SimpleGeometry").default} */ (geometry).getFlatCoordinates();
+      const stride = /** @type {import("ol/geom/SimpleGeometry").default} */ (geometry).getStride();
+      this.extendFlatCoordinates(flatCoordinates, stride);
+    }
+  }
+
+  /**
+   * @param {VectorHeightInfo} heightInfo
+   */
+  extendWithHeightInfo(heightInfo) {
+    if (heightInfo.extruded) {
+      const calculatedFeatureMaxHeight =
+        heightInfo.groundLevel + heightInfo.storeyHeightsAboveGround.reduce((accumulator, currentValue) => {
+          return accumulator + currentValue;
+        }, 0);
+      this.extendZ(calculatedFeatureMaxHeight);
+      const calculatedFeatureMinHeight =
+        heightInfo.groundLevel - heightInfo.storeyHeightsBelowGround.reduce((accumulator, currentValue) => {
+          return accumulator + currentValue;
+        }, 0);
+      this.extendZ(calculatedFeatureMinHeight);
+    }
+  }
+
+  /**
+   * @param {number} x
+   * @param {number} y
+   * @param {number} z
+   */
+  extendXYZ(x, y, z) {
+    this.minX = Math.min(this.minX, x);
+    this.minY = Math.min(this.minY, y);
+    this.minZ = Math.min(this.minZ, z);
+    this.maxX = Math.max(this.maxX, x);
+    this.maxY = Math.max(this.maxY, y);
+    this.maxZ = Math.max(this.maxZ, z);
+  }
+
+  /**
+   * @param {number} x
+   * @param {number} y
+   */
+  extendXY(x, y) {
+    this.minX = Math.min(this.minX, x);
+    this.minY = Math.min(this.minY, y);
+    this.maxX = Math.max(this.maxX, x);
+    this.maxY = Math.max(this.maxY, y);
+  }
+
+  /**
+   * @param {number} z
+   */
+  extendZ(z) {
+    this.minZ = Math.min(this.minZ, z);
+    this.maxZ = Math.max(this.maxZ, z);
+  }
+
+  /**
+   * @param {Array<number>} flatCoordinates
+   * @param {number} stride
+   */
+  extendFlatCoordinates(flatCoordinates, stride) {
+    const { length } = flatCoordinates;
+    for (let offset = 0; offset < length; offset += stride) {
+      if (stride > 2) {
+        this.extendXYZ(flatCoordinates[offset], flatCoordinates[offset + 1], flatCoordinates[offset + 2]);
+      } else {
+        this.extendXY(flatCoordinates[offset], flatCoordinates[offset + 1]);
+      }
+    }
+  }
+
+  /**
+   * @returns {import("ol/extent").Extent}
+   */
+  to2D() {
+    return [this.minX, this.minY, this.maxX, this.maxY];
+  }
+
+  /**
+   * @returns {Array<number>}
+   */
+  toArray() {
+    return [this.minX, this.minY, this.minZ, this.maxX, this.maxY, this.maxZ];
+  }
+}
+
+export default Extent3D;

package/src/vcs/vcm/util/fetch.js

@@ -0,0 +1,32 @@
+/**
+ * @param {string} url
+ * @param {RequestInit=} init
+ * @returns {Promise<Response>}
+ */
+export async function requestUrl(url, init) {
+  const response = await fetch(url, init);
+  if (!response.ok) {
+    throw new Error(`Failed fetching url ${url} with status: ${response.status}`);
+  }
+  return response;
+}
+
+/**
+ * @param {string} url
+ * @param {RequestInit=} init
+ * @returns {Promise<any>}
+ */
+export async function requestJson(url, init) {
+  const response = await requestUrl(url, init);
+  return response.json();
+}
+
+/**
+ * @param {string} url
+ * @param {RequestInit=} init
+ * @returns {Promise<ArrayBuffer>}
+ */
+export async function requestArrayBuffer(url, init) {
+  const response = await requestUrl(url, init);
+  return response.arrayBuffer();
+}