@vcmap/core 5.0.0-rc.2 → 5.0.0-rc.5

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

@@ -1,15 +1,17 @@
+import { parseInteger, parseNumber } from '@vcsuite/parsers';
 import RBush from 'rbush';
 import knn from 'rbush-knn';
-import { v4 as uuidv4 } from 'uuid';
 import { getTransform } from 'ol/proj.js';
 import { createXYZ } from 'ol/tilegrid.js';
 import Feature from 'ol/Feature.js';
 import Polygon, { fromExtent } from 'ol/geom/Polygon.js';
 import Vector from 'ol/source/Vector.js';
 import { boundingExtent, buffer, containsCoordinate, getCenter } from 'ol/extent.js';
-import { Event as CesiumEvent } from '@vcmap/cesium';
-import { DataState, getStateFromStatesArray } from './ObliqueDataSet.js';
+import VcsEvent from '../event/vcsEvent.js';
+import ObliqueDataSet, { DataState, getStateFromStatesArray } from './ObliqueDataSet.js';
 import { ObliqueViewDirection } from './ObliqueViewDirection.js';
+import { mercatorProjection } from '../util/projection.js';
+import VcsObject from '../object.js';
 
 /**
  * @typedef {Object} ObliqueCameraOptions
@@ -52,13 +54,19 @@ import { ObliqueViewDirection } from './ObliqueViewDirection.js';
  */
 
 /**
- * @typedef {Object} ObliqueCollectionOptions
- * @property {string|undefined} name
- * @property {Array<import("@vcmap/core").ObliqueDataSet>} dataSets
- * @property {number|undefined} maxZoom
- * @property {number|undefined} minZoom
+ * @typedef {Object} ObliqueDataSetOptions
+ * @property {string} url
+ * @property {ProjectionOptions} [projection]
+ * @property {TerrainProviderOptions} [terrainProvider]
+ */
+
+/**
+ * @typedef {VcsObjectOptions} ObliqueCollectionOptions
+ * @property {Array<import("@vcmap/core").ObliqueDataSet|ObliqueDataSetOptions>} [dataSets]
+ * @property {number|undefined} [maxZoom]
+ * @property {number|undefined} [minZoom]
  * @property {number|undefined} [scaleFactor=4]
- * @property {number|undefined} hideLevels
+ * @property {number|undefined} [hideLevels]
  * @api
  */
 
@@ -68,7 +76,7 @@ import { ObliqueViewDirection } from './ObliqueViewDirection.js';
  */
 function getImageFeatures(images) {
   return images.map((image) => {
-    const transform = getTransform(image.meta.projection, 'EPSG:3857');
+    const transform = getTransform(image.meta.projection.proj, mercatorProjection.proj);
     const feature = new Feature({
       geometry: new Polygon([image.groundCoordinates.map(c => transform(c.slice(0, 2)))]),
       viewDirection: image.viewDirection,
@@ -103,18 +111,28 @@ function getTileFeatures(tiles) {
  * @class
  * @export
  */
-class ObliqueCollection {
+class ObliqueCollection extends VcsObject {
+  static get className() { return 'oblique.ObliqueCollection'; }
+
+  /**
+   * @returns {ObliqueCollectionOptions}
+   */
+  static getDefaultOptions() {
+    return {
+      maxZoom: 0,
+      minZoom: 0,
+      scaleFactor: 4,
+      dataSets: undefined,
+      hideLevels: 0,
+    };
+  }
+
   /**
    * @param {ObliqueCollectionOptions} options
    */
   constructor(options) {
-    /**
-     * The unique name of the collection
-     * @type {string}
-     * @api
-     */
-    this.name = options.name || uuidv4();
-
+    super(options);
+    const defaultOptions = ObliqueCollection.getDefaultOptions();
     /**
      * Maps each direction to an RTree
      * @type {Map<import("@vcmap/core").ObliqueViewDirection, RBush>}
@@ -136,10 +154,10 @@ class ObliqueCollection {
 
     /** @type {ObliqueViewOptions} */
     this.viewOptions = {
-      maxZoom: options.maxZoom || 0,
-      minZoom: options.minZoom || 0,
-      scaleFactor: options.scaleFactor || 4,
-      hideLevels: options.hideLevels || 0,
+      maxZoom: parseInteger(options.maxZoom, defaultOptions.maxZoom),
+      minZoom: parseInteger(options.minZoom, defaultOptions.minZoom),
+      scaleFactor: parseNumber(options.scaleFactor, defaultOptions.scaleFactor),
+      hideLevels: parseInteger(options.hideLevels, defaultOptions.hideLevels),
     };
 
     /** @type {boolean} */
@@ -147,10 +165,10 @@ class ObliqueCollection {
 
     /**
      * Event raised when images are loaded. Is passed an Array of ObliqueImages as its only argument.
-     * @type {import("@vcmap/cesium").Event}
+     * @type {import("@vcmap/core").VcsEvent<Array<import("@vcmap/core").ObliqueImage>>}
      * @api
      */
-    this.imagesLoaded = new CesiumEvent();
+    this.imagesLoaded = new VcsEvent();
 
     /**
      * @type {import("ol/source").Vector<import("ol/geom/Geometry").default>|null}
@@ -262,11 +280,18 @@ class ObliqueCollection {
 
   /**
    * Adds an oblique data set to this collection.
-   * @param {import("@vcmap/core").ObliqueDataSet} dataSet
+   * @param {import("@vcmap/core").ObliqueDataSet|ObliqueDataSetOptions} dataSetOptions
    * @private
    */
-  _addDataSet(dataSet) {
-    dataSet.imagesLoaded.addEventListener((images, tileCoordinate) => {
+  _addDataSet(dataSetOptions) {
+    /** @type {import("@vcmap/core").ObliqueDataSet} */
+    let dataSet;
+    if (dataSetOptions instanceof ObliqueDataSet) {
+      dataSet = dataSetOptions;
+    } else {
+      dataSet = new ObliqueDataSet(dataSetOptions.url, dataSetOptions.projection, dataSetOptions.terrainProvider);
+    }
+    dataSet.imagesLoaded.addEventListener(({ images, tileCoordinate }) => {
       this._loadImages(images, tileCoordinate);
     });
     this._loadImages(dataSet.images);
@@ -279,7 +304,7 @@ class ObliqueCollection {
    * @returns {Promise<void>}
    * @api
    */
-  async addDataSet(dataSet) {
+  async addDataSet(dataSet) { // XXX check for dataset here?
     if (this._loadingPromise) {
       await this._loadingPromise;
       await this._loadDataSet(dataSet);
@@ -322,7 +347,7 @@ class ObliqueCollection {
         directions.set(image.viewDirection, []);
       }
 
-      const transform = getTransform(image.meta.projection, 'EPSG:3857');
+      const transform = getTransform(image.meta.projection.proj, mercatorProjection.proj);
       const coord = image.centerPointOnGround.slice(0, 2);
       transform(coord, coord);
       directions.get(image.viewDirection).push({
@@ -491,7 +516,7 @@ class ObliqueCollection {
   async hasImageAtCoordinate(mercatorCoordinate, direction) {
     const image = await this.loadImageForCoordinate(mercatorCoordinate, direction);
     if (image) {
-      const transform = getTransform('EPSG:3857', image.meta.projection);
+      const transform = getTransform(mercatorProjection.proj, image.meta.projection.proj);
       const internalCoordinates = mercatorCoordinate.slice(0, 2);
       transform(internalCoordinates, internalCoordinates);
       const extent = boundingExtent(image.groundCoordinates);
@@ -513,7 +538,7 @@ class ObliqueCollection {
   async loadAdjacentImage(image, heading, deviation = Math.PI / 4) {
     const tree = this._directionTrees.get(image.viewDirection);
     if (tree) {
-      const transform = getTransform(image.meta.projection, 'EPSG:3857');
+      const transform = getTransform(image.meta.projection.proj, mercatorProjection.proj);
       const coords = image.groundCoordinates.map(c => transform(c.slice(0, 2)));
       const extent = boundingExtent(coords);
       await this.loadDataForExtent(buffer(extent, 200));
@@ -566,6 +591,33 @@ class ObliqueCollection {
       this._imageFeatureSource.clear(true);
       this._imageFeatureSource = null;
     }
+    this.imagesLoaded.destroy();
+  }
+
+  /**
+   * @returns {ObliqueCollectionOptions}
+   */
+  toJSON() {
+    /** @type {ObliqueCollectionOptions} */
+    const config = super.toJSON();
+    const defaultOptions = ObliqueCollection.getDefaultOptions();
+    if (this.viewOptions.maxZoom !== defaultOptions.maxZoom) {
+      config.maxZoom = this.viewOptions.maxZoom;
+    }
+    if (this.viewOptions.minZoom !== defaultOptions.minZoom) {
+      config.minZoom = this.viewOptions.minZoom;
+    }
+    if (this.viewOptions.scaleFactor !== defaultOptions.scaleFactor) {
+      config.scaleFactor = this.viewOptions.scaleFactor;
+    }
+    if (this.viewOptions.hideLevels !== defaultOptions.hideLevels) {
+      config.hideLevels = this.viewOptions.hideLevels;
+    }
+
+    if (this.dataSets.length > 0) {
+      config.dataSets = this.dataSets.map(d => d.toJSON());
+    }
+    return config;
   }
 }
 

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

@@ -1,9 +1,16 @@
-import { Event as CesiumEvent } from '@vcmap/cesium';
-import axios from 'axios';
 import { createXYZ } from 'ol/tilegrid.js';
-import { destroyCesiumEvent } from './helpers.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
+ * @property {Array<import("@vcmap/core").ObliqueImage>} images - the loaded images
+ * @property {string} [tileCoordinate] - an optional tile coordinate
+ */
 
 /**
  * Enumeration of data set states
@@ -43,10 +50,10 @@ export function getStateFromStatesArray(states) {
 class ObliqueDataSet {
   /**
    * @param {string} url
-   * @param {import("ol/proj/Projection").default} projection
-   * @param {import("@vcmap/cesium").CesiumTerrainProvider=} terrainProvider
+   * @param {import("@vcmap/core").Projection|ProjectionOptions=} projection
+   * @param {TerrainProviderOptions=} terrainProviderOptions
    */
-  constructor(url, projection, terrainProvider) {
+  constructor(url, projection, terrainProviderOptions) {
     /** @type {string} */
     this.url = url;
     if (!/\.json$/.test(this.url)) {
@@ -55,22 +62,36 @@ class ObliqueDataSet {
 
     /** @type {string} */
     this.baseUrl = this.url.replace(/\/?([^/]+\.json)?$/, '');
-    /** @type {import("ol/proj/Projection").default} */
-    this.projection = projection;
-    /** @type {import("@vcmap/cesium").CesiumTerrainProvider|undefined} */
-    this.terrainProvider = terrainProvider;
+
+    let projectionObject = projection;
+    if (projectionObject && !(projectionObject instanceof Projection)) {
+      projectionObject = new Projection(projectionObject);
+    }
+    /** @type {import("@vcmap/core").Projection} */
+    this.projection = /** @type {import("@vcmap/core").Projection} */ (projectionObject);
+    /**
+     * @type {TerrainProviderOptions}
+     * @private
+     */
+    this._terrainProviderOptions = terrainProviderOptions ? { ...terrainProviderOptions } : undefined;
+    /**
+     * @type {import("@vcmap/cesium").CesiumTerrainProvider|undefined}
+     * @private
+     */
+    this._terrainProvider = this._terrainProviderOptions ?
+      getTerrainProviderForUrl(this._terrainProviderOptions) :
+      undefined;
     /**
      * @type {Array<import("@vcmap/core").ObliqueImageMeta>}
      * @private
      */
     this._imageMetas = [];
     /**
-     * Event raised when images are loaded. Is passed an Array of ObliqueImages as the first argument and optionally
-     * a string representing the tile coordinate ("z/x/y"), if the images where loaded for a tile.
-     * @type {import("@vcmap/cesium").Event}
+     * Event raised when images are loaded.
+     * @type {import("@vcmap/core").VcsEvent<ObliqueDataSetImagesLoaded>}
      * @api
      */
-    this.imagesLoaded = new CesiumEvent();
+    this.imagesLoaded = new VcsEvent();
     /** @type {Map<string, DataState>} */
     this._tiles = new Map();
     /** @type {Map<string, Promise<void>>} */
@@ -118,6 +139,14 @@ class ObliqueDataSet {
     return this._state;
   }
 
+  /**
+   * @type {import("@vcmap/cesium").CesiumTerrainProvider|undefined}
+   * @readonly
+   */
+  get terrainProvider() {
+    return this._terrainProvider;
+  }
+
   /**
    * Loads the data set.
    * @returns {Promise<void>}
@@ -127,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;
@@ -194,7 +224,7 @@ class ObliqueDataSet {
       }
       if (images.length > 0) {
         this._images = images;
-        this.imagesLoaded.raiseEvent(images);
+        this.imagesLoaded.raiseEvent({ images });
       }
     }
   }
@@ -297,13 +327,12 @@ 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);
-          this.imagesLoaded.raiseEvent(images, stringTileCoordinates);
+          this.imagesLoaded.raiseEvent({ images, tileCoordinate: stringTileCoordinates });
         }
       })
       .catch((err) => {
@@ -344,13 +373,27 @@ class ObliqueDataSet {
   }
 
   destroy() {
-    destroyCesiumEvent(this.imagesLoaded);
+    this.imagesLoaded.destroy();
     this._images = [];
     this._imageMetas = [];
     this._tiles.clear();
     this._loadingPromises.clear();
     this._tileGrid = null;
-    this.terrainProvider = null;
+    this._terrainProvider = null;
+  }
+
+  /**
+   * @returns {ObliqueDataSetOptions}
+   */
+  toJSON() {
+    const config = { url: this.url };
+    if (this.projection) {
+      config.projection = this.projection.toJSON();
+    }
+    if (this._terrainProviderOptions) {
+      config.terrainProvider = { ...this._terrainProviderOptions };
+    }
+    return config;
   }
 }
 

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

@@ -13,7 +13,7 @@ import { getHeightFromTerrainProvider } from '../layer/terrainHelpers.js';
  * @property {import("@vcmap/cesium").Cartesian3|undefined} projectionCenter
  * @property {import("@vcmap/cesium").Matrix3|undefined} pToRealworld
  * @property {import("@vcmap/cesium").Matrix4|undefined} pToImage
- * @property {import("ol/proj/Projection").default|undefined} [projection]
+ * @property {import("@vcmap/core").Projection|undefined} [projection]
  * @property {import("@vcmap/cesium").CesiumTerrainProvider|undefined} terrainProvider
  * @api
  */

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

@@ -9,7 +9,7 @@ import { cartesian2DDistance } from '../util/math.js';
  * @property {import("ol/size").Size} size
  * @property {import("ol/size").Size} tileSize
  * @property {Array<number>} tileResolution
- * @property {import("ol/proj/Projection").default} projection
+ * @property {import("@vcmap/core").Projection} projection
  * @property {string} url
  * @property {import("@vcmap/cesium").CesiumTerrainProvider} terrainProvider
  * @property {string} name
@@ -64,7 +64,7 @@ class ObliqueImageMeta {
     this.tileResolution = options.tileResolution;
     /**
      * The world projection of the images associated with this meta
-     * @type {import("ol/proj/Projection").default}
+     * @type {import("@vcmap/core").Projection}
      * @api
      */
     this.projection = options.projection;

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

@@ -1,12 +1,12 @@
-import { Event as CesiumEvent } from '@vcmap/cesium';
 import { getTransform } from 'ol/proj.js';
 import View from 'ol/View.js';
 import { unByKey } from 'ol/Observable.js';
 import { DataState } from './ObliqueDataSet.js';
 import OLView from './ObliqueView.js';
-import { destroyCesiumEvent, transformFromImage } from './helpers.js';
+import { transformFromImage } from './helpers.js';
 import { getHeightFromTerrainProvider } from '../layer/terrainHelpers.js';
 import { mercatorProjection } from '../util/projection.js';
+import VcsEvent from '../event/vcsEvent.js';
 
 /**
  * @typedef {Object} ObliqueViewPoint
@@ -63,10 +63,10 @@ class ObliqueProvider {
 
     /**
      * Event raised once a new image is set on the provider. Will be passed the new image as the only argument.
-     * @type {import("@vcmap/cesium").Event}
+     * @type {import("@vcmap/core").VcsEvent<import("@vcmap/core").ObliqueImage>}
      * @api
      */
-    this.imageChanged = new CesiumEvent();
+    this.imageChanged = new VcsEvent();
     /**
      * Whether the post render handler should switch on image edge. Setting
      * this to false will suspend all post render handler switches.
@@ -232,7 +232,7 @@ class ObliqueProvider {
       }
       const pulledCenter = this._pullCoordinateToImageCenter(imageCoordinates.slice());
       const worldCoords = this._currentImage.transformImage2RealWorld(pulledCenter).slice(0, 2);
-      const transform = getTransform(this._currentImage.meta.projection, 'EPSG:3857');
+      const transform = getTransform(this._currentImage.meta.projection.proj, mercatorProjection.proj);
       const mercatorCoords = transform(worldCoords);
       const buffer = 200; // XXX make configurable?
       const extent = [
@@ -299,7 +299,10 @@ class ObliqueProvider {
     const [width, height] = this._currentImage.meta.size;
     let center = [width / 2, height / 2];
     if (optCenter) {
-      const worldCenter = getTransform('EPSG:3857', this._currentImage.meta.projection)(optCenter.slice(0, 2));
+      const worldCenter = getTransform(
+        mercatorProjection.proj,
+        this._currentImage.meta.projection.proj,
+      )(optCenter.slice(0, 2));
       const imageCenter = this._currentImage.transformRealWorld2Image(worldCenter, optCenter[2]);
       imageCenter[0] = withinBounds(imageCenter[0], width);
       imageCenter[1] = withinBounds(imageCenter[1], height);
@@ -424,7 +427,7 @@ class ObliqueProvider {
       this._postRenderListener = null;
     }
 
-    destroyCesiumEvent(this.imageChanged);
+    this.imageChanged.destroy();
     this._collection = null;
     this._olMap = null;
   }

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

@@ -1,11 +1,12 @@
 /* eslint no-underscore-dangle: ["error", { "allow": ["_listeners", "_scopes", "_toRemove"] }] */
 /* eslint-disable no-continue */
 import { boundingExtent, getBottomLeft, getBottomRight, getTopLeft, getTopRight } from 'ol/extent.js';
-import { get as getProjection, transform } from 'ol/proj.js';
+import { transform } from 'ol/proj.js';
 import { Cartesian2 } from '@vcmap/cesium';
 import { ObliqueViewDirection } from './ObliqueViewDirection.js';
 import { getHeightFromTerrainProvider } from '../layer/terrainHelpers.js';
 import { cartesian2DDistance } from '../util/math.js';
+import { mercatorProjection, wgs84Projection } from '../util/projection.js';
 
 /**
  * @type {import("@vcmap/cesium").Cartesian2}
@@ -292,7 +293,7 @@ export function transformCWIFC(inputOrigin, inputTarget, originIsImage, coordina
 /**
  * @typedef {Object} ImageTransformationOptions
  * @property {boolean|undefined} [dontUseTerrain]
- * @property {import("ol/proj/Projection").default|undefined} [dataProjection] - the projection of the input/output coordinates, assumes image source projection
+ * @property {import("@vcmap/core").Projection|undefined} [dataProjection] - the projection of the input/output coordinates, assumes image source projection
  * @property {number|undefined} [terrainErrorThreshold=1] - the transformToWorld process iterativly calculates a new Height Value from the terrainProvider until the difference to the new height value is smaller
  * @property {number|undefined} [terrainErrorCountThreshold=3] - how often the  transformToWorld process iterativly calculates a new Height Value from the terrainProvider
  * @api
@@ -313,8 +314,8 @@ export function transformToImage(image, worldCoordinate, options = {}) {
     gpInternalCoordinates = worldCoordinate;
   } else {
     gpInternalCoordinates = options.dataProjection ?
-      transform(worldCoordinate, options.dataProjection, image.meta.projection) :
-      transform(worldCoordinate, 'EPSG:3857', image.meta.projection);
+      transform(worldCoordinate, options.dataProjection.proj, image.meta.projection.proj) :
+      transform(worldCoordinate, mercatorProjection.proj, image.meta.projection.proj);
   }
 
   function useAverageHeight() {
@@ -369,14 +370,14 @@ function pickTerrain(pickTerrainOptions) {
     count,
     height,
   } = pickTerrainOptions;
-  const wgs84Projection = getProjection('EPSG:4326');
+
   return getHeightFromTerrainProvider(image.meta.terrainProvider, [worldCoordinate])
     .then(([worldCoordinateWithHeights]) => {
       if (worldCoordinateWithHeights[2] != null) {
         const newWorldCoords = transform(
           image.transformImage2RealWorld(imageCoordinate, worldCoordinateWithHeights[2]),
-          image.meta.projection,
-          wgs84Projection,
+          image.meta.projection.proj,
+          wgs84Projection.proj,
         );
         newWorldCoords[2] = worldCoordinateWithHeights[2];
         if (
@@ -406,11 +407,10 @@ function pickTerrain(pickTerrainOptions) {
  * @export
  */
 export async function transformFromImage(image, imageCoordinate, options = {}) {
-  const wgs84Projection = getProjection('EPSG:4326');
   const initialWorldCoords = transform(
     image.transformImage2RealWorld(imageCoordinate, image.averageHeight),
-    image.meta.projection,
-    wgs84Projection,
+    image.meta.projection.proj,
+    wgs84Projection.proj,
   );
 
   const terrainErrorThreshold = options.terrainErrorThreshold || 1;
@@ -430,8 +430,8 @@ export async function transformFromImage(image, imageCoordinate, options = {}) {
   }
 
   coordsObj.coords = options.dataProjection ?
-    transform(coordsObj.coords, wgs84Projection, options.dataProjection) :
-    transform(coordsObj.coords, wgs84Projection, getProjection('EPSG:3857'));
+    transform(coordsObj.coords, wgs84Projection.proj, options.dataProjection.proj) :
+    transform(coordsObj.coords, wgs84Projection.proj, mercatorProjection.proj);
   return coordsObj;
 }
 
@@ -453,31 +453,3 @@ export function hasSameOrigin(url) {
   const uri = new URL(url);
   return currentUri.host.toLowerCase() === uri.host.toLocaleLowerCase();
 }
-
-/**
- * destroys a cesium Event Emitter, (removes all listeners)
- * @param {import("@vcmap/cesium").Event} cesiumEvent
- */
-export function destroyCesiumEvent(cesiumEvent) {
-  // @ts-ignore
-  for (let i = 0; i < cesiumEvent._listeners.length; i++) {
-    // @ts-ignore
-    cesiumEvent._listeners[i] = undefined;
-  }
-  // @ts-ignore
-  for (let i = 0; i < cesiumEvent._scopes.length; i++) {
-    // @ts-ignore
-    cesiumEvent._scopes[i] = undefined;
-  }
-  // @ts-ignore
-  for (let i = 0; i < cesiumEvent._toRemove.length; i++) {
-    // @ts-ignore
-    cesiumEvent._toRemove[i] = undefined;
-  }
-  // @ts-ignore
-  cesiumEvent._listeners.length = 0;
-  // @ts-ignore
-  cesiumEvent._scopes.length = 0;
-  // @ts-ignore
-  cesiumEvent._toRemove.length = 0;
-}

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

@@ -1,11 +1,18 @@
-import { v4 as uuidv4 } from 'uuid';
-import proj4 from 'proj4';
-import { register } from 'ol/proj/proj4.js';
-import { get as getProjection } from 'ol/proj.js';
 import { Matrix3, Cartesian3, Matrix4 } from '@vcmap/cesium';
 import ObliqueImage from './ObliqueImage.js';
 import { obliqueViewDirectionNames } from './ObliqueViewDirection.js';
 import ImageMeta from './ObliqueImageMeta.js';
+import Projection from '../util/projection.js';
+
+let customObliqueProjectionId = 0;
+
+/**
+ * @returns {number}
+ */
+function getNextObliqueProjectionId() {
+  customObliqueProjectionId += 1;
+  return customObliqueProjectionId;
+}
 
 /**
  * @param {Object} json
@@ -33,7 +40,7 @@ export function getVersionFromImageJson(json) {
 /**
  * @param {ObliqueImageJson} json
  * @param {string} url
- * @param {(import("ol/proj/Projection").default|null)=} projection
+ * @param {import("@vcmap/core").Projection=} projection
  * @param {import("@vcmap/cesium").CesiumTerrainProvider=} terrainProvider
  * @returns {Array<import("@vcmap/core").ObliqueImageMeta>}
  */
@@ -47,10 +54,11 @@ export function parseImageMeta(json, url, projection, terrainProvider) {
   let imageProjection = projection;
   const imageMetas = [];
   if (!imageProjection && json.generalImageInfo.crs) {
-    const crsUuid = uuidv4();
-    proj4.defs(crsUuid, json.generalImageInfo.crs);
-    register(proj4);
-    imageProjection = getProjection(crsUuid);
+    imageProjection = new Projection({
+      epsg: getNextObliqueProjectionId(),
+      prefix: 'OBLIQUE:',
+      proj4: json.generalImageInfo.crs,
+    });
   }
 
   const defaultOptions = {

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;