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

package/index.d.ts

@@ -3124,7 +3124,7 @@ export function sampleCesiumTerrain(terrainProvider: import("@vcmap/cesium").Ces
  * changes input coordinate Array in place, new height can also be accessed by coordinates[x][2]
  * @param [optSourceProjection] - if input is not WGS84
  */
-export function getHeightFromTerrainProvider(terrainProvider: import("@vcmap/cesium").CesiumTerrainProvider, coordinates: import("ol/coordinate").Coordinate[], optSourceProjection?: Projection | import("ol/proj/Projection").default, result?: import("ol/coordinate").Coordinate[]): Promise<import("ol/coordinate").Coordinate[]>;
+export function getHeightFromTerrainProvider(terrainProvider: import("@vcmap/cesium").CesiumTerrainProvider, coordinates: import("ol/coordinate").Coordinate[], optSourceProjection?: Projection, result?: import("ol/coordinate").Coordinate[]): Promise<import("ol/coordinate").Coordinate[]>;
 
 /**
  * checks, whether a terrain tile is available at given position or not
@@ -5158,7 +5158,7 @@ export class Oblique extends BaseOLMap {
     switchThreshold: any;
     mapChangeEvent: any;
     readonly collection: ObliqueCollection;
-    readonly imageChanged: import("@vcmap/cesium").Event;
+    readonly imageChanged: VcsEvent<ObliqueImage>;
     readonly currentImage: ObliqueImage | null;
     getExtentOfCurrentImage(): Extent;
     getCurrentImage(): ObliqueImage;
@@ -5365,9 +5365,14 @@ export interface ObliqueVersion {
     buildNumber: number;
 }
 
-export interface ObliqueCollectionOptions {
-    name?: string | undefined;
-    dataSets: ObliqueDataSet[];
+export interface ObliqueDataSetOptions {
+    url: string;
+    projection?: ProjectionOptions;
+    terrainProvider?: TerrainProviderOptions;
+}
+
+export interface ObliqueCollectionOptions extends VcsObjectOptions {
+    dataSets?: (ObliqueDataSet | ObliqueDataSetOptions)[];
     maxZoom?: number | undefined;
     minZoom?: number | undefined;
     scaleFactor?: number | undefined;
@@ -5376,16 +5381,13 @@ export interface ObliqueCollectionOptions {
 
 export class ObliqueCollection {
     constructor(options: ObliqueCollectionOptions);
-    /**
-     * The unique name of the collection
-     */
-    name: string;
+    static getDefaultOptions(): ObliqueCollectionOptions;
     viewOptions: ObliqueViewOptions;
 
     /**
      * Event raised when images are loaded. Is passed an Array of ObliqueImages as its only argument.
      */
-    imagesLoaded: import("@vcmap/cesium").Event;
+    imagesLoaded: VcsEvent<ObliqueImage[]>;
     readonly dataSets: ObliqueDataSet[];
     /**
      * Indicates, that this collection has been loaded
@@ -5476,6 +5478,20 @@ export class ObliqueCollection {
      * Destroys all data sets and all images and any image/tile features for this collection
      */
     destroy(): void;
+    toJSON(): ObliqueCollectionOptions;
+}
+
+/**
+ */
+export interface ObliqueDataSetImagesLoaded {
+    /**
+     * the loaded images
+    */
+    images: ObliqueImage[];
+    /**
+     * an optional tile coordinate
+    */
+    tileCoordinate?: string;
 }
 
 /**
@@ -5490,16 +5506,14 @@ export const enum DataState {
 export function getStateFromStatesArray(states: DataState[]): DataState;
 
 export class ObliqueDataSet {
-    constructor(url: string, projection: import("ol/proj/Projection").default, terrainProvider?: import("@vcmap/cesium").CesiumTerrainProvider);
+    constructor(url: string, projection: Projection | ProjectionOptions, terrainProviderOptions?: TerrainProviderOptions);
     url: string;
     baseUrl: string;
-    projection: import("ol/proj/Projection").default;
-    terrainProvider: import("@vcmap/cesium").CesiumTerrainProvider | undefined;
+    projection: Projection;
     /**
-     * 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.
+     * Event raised when images are loaded.
      */
-    imagesLoaded: import("@vcmap/cesium").Event;
+    imagesLoaded: VcsEvent<ObliqueDataSetImagesLoaded>;
 
 
 
@@ -5513,6 +5527,7 @@ export class ObliqueDataSet {
      * reflect the state of loaded tiles.
      */
     readonly state: DataState;
+    readonly terrainProvider: import("@vcmap/cesium").CesiumTerrainProvider | undefined;
     /**
      * Loads the data set.
      */
@@ -5546,6 +5561,7 @@ export class ObliqueDataSet {
      * Loads all the tiles for a given extent.
      */
     loadDataForExtent(extent: import("ol/extent").Extent): Promise<void>;
+    toJSON(): ObliqueDataSetOptions;
 }
 
 export interface ObliqueImageOptions {
@@ -5558,7 +5574,7 @@ export interface ObliqueImageOptions {
     projectionCenter?: import("@vcmap/cesium").Cartesian3 | undefined;
     pToRealworld?: import("@vcmap/cesium").Matrix3 | undefined;
     pToImage?: import("@vcmap/cesium").Matrix4 | undefined;
-    projection?: import("ol/proj/Projection").default | undefined;
+    projection?: Projection | undefined;
     terrainProvider?: import("@vcmap/cesium").CesiumTerrainProvider | undefined;
 }
 
@@ -5624,7 +5640,7 @@ export interface ObliqueImageMetaOptions {
     size: import("ol/size").Size;
     tileSize: import("ol/size").Size;
     tileResolution: number[];
-    projection: import("ol/proj/Projection").default;
+    projection: Projection;
     url: string;
     terrainProvider: import("@vcmap/cesium").CesiumTerrainProvider;
     name: string;
@@ -5657,7 +5673,7 @@ export class ObliqueImageMeta {
     /**
      * The world projection of the images associated with this meta
      */
-    projection: import("ol/proj/Projection").default;
+    projection: Projection;
     url: string;
     /**
      * An optional terrain provider
@@ -5692,7 +5708,7 @@ export class ObliqueProvider {
     /**
      * Event raised once a new image is set on the provider. Will be passed the new image as the only argument.
      */
-    imageChanged: import("@vcmap/cesium").Event;
+    imageChanged: VcsEvent<ObliqueImage>;
     /**
      * Whether the post render handler should switch on image edge. Setting
      * this to false will suspend all post render handler switches.
@@ -5821,7 +5837,7 @@ export interface ImageTransformationOptions {
     /**
      * the projection of the input/output coordinates, assumes image source projection
     */
-    dataProjection?: import("ol/proj/Projection").default | undefined;
+    dataProjection?: Projection | undefined;
     /**
      * the transformToWorld process iterativly calculates a new Height Value from the terrainProvider until the difference to the new height value is smaller
     */
@@ -5858,17 +5874,12 @@ export function transformFromImage(image: ObliqueImage, imageCoordinate: import(
 
 export function hasSameOrigin(url: string): boolean;
 
-/**
- * destroys a cesium Event Emitter, (removes all listeners)
- */
-export function destroyCesiumEvent(cesiumEvent: import("@vcmap/cesium").Event): void;
-
 /**
  * @returns version
  */
 export function getVersionFromImageJson(json: any): ObliqueVersion;
 
-export function parseImageMeta(json: ObliqueImageJson, url: string, projection?: import("ol/proj/Projection").default | null, terrainProvider?: import("@vcmap/cesium").CesiumTerrainProvider): ObliqueImageMeta[];
+export function parseImageMeta(json: ObliqueImageJson, url: string, projection?: Projection, terrainProvider?: import("@vcmap/cesium").CesiumTerrainProvider): ObliqueImageMeta[];
 
 export function parseImageData(json: ObliqueImageJson, imageMetas: ObliqueImageMeta[]): ObliqueImage[];
 
@@ -6181,6 +6192,7 @@ export interface ExtentOptions extends ProjectionOptions {
  */
 export class Extent {
     constructor(options?: ExtentOptions);
+    static className: string;
     projection: Projection;
     extent: import("ol/extent").Extent | null;
     getCoordinatesInProjection(destination: Projection, result?: import("ol/extent").Extent): import("ol/extent").Extent;
@@ -6578,6 +6590,11 @@ export class IndexedCollection<T extends any> extends Collection<T> {
      * Event raised if an item is relocated within the collection. Is passed the moved item.
      */
     moved: VcsEvent<T>;
+    /**
+     * Get the symbol which is attached to an item prior to its removal. If an item is removed, the current index of the item
+     * is set on the item with this symbol.
+     */
+    readonly previousIndexSymbol: symbol;
     /**
      * Returns an item at index.
      */
@@ -6589,6 +6606,7 @@ export class IndexedCollection<T extends any> extends Collection<T> {
      * @returns the index at which the item was inserted
      */
     add(item: T, index?: number): number | null;
+    remove(item: T): void;
     protected _move(item: T, itemIndex: number, targetIndex: number): number;
     /**
      * Lowers an item within the array
@@ -6626,6 +6644,12 @@ export class LayerCollection extends IndexedCollection<Layer> {
      * The exclusive manager for this collection. Layers within this collection are automatically added and tracked.
      */
     exclusiveManager: ExclusiveManager;
+    /**
+     * A symbol to describe the local z index of a layer. The local z index must not equal the layers z index, but is
+     * always consistent in comparison to the neighbouring layers. If a layer is moved other then by z index, the collection
+     * ensures consistency by setting a new local z index if needed.
+     */
+    readonly zIndexSymbol: symbol;
     /**
      * Adds a layer to the collection. Can optionally be passed an index at which to insert the layer.
      * @returns returns the layer index or null, if the layers name is not unique
@@ -6745,6 +6769,7 @@ export function cartesian3DDistance(p1: import("ol/coordinate").Coordinate, p2:
 /**
  */
 export interface ProjectionOptions {
+    type?: string;
     /**
      * EPSG of the projection, for example: "EPSG:4326" if not specified, uses the framework projection
     */
@@ -6757,6 +6782,10 @@ export interface ProjectionOptions {
      * aliases to define
     */
     alias?: string[] | undefined | null;
+    /**
+     * an alternate prefix to use for custom projection
+    */
+    prefix?: string | undefined;
 }
 
 /**
@@ -6770,6 +6799,7 @@ export function setDefaultProjectionOptions(options: ProjectionOptions): void;
  */
 export class Projection {
     constructor(options: ProjectionOptions);
+    static className: any;
     /**
      * epsg code in the format "EPSG:25832"
      */

package/index.js

@@ -98,7 +98,7 @@ export { default as ObliqueImageMeta } from './src/vcs/vcm/oblique/ObliqueImageM
 export { default as ObliqueProvider } from './src/vcs/vcm/oblique/ObliqueProvider.js';
 export { default as ObliqueView } from './src/vcs/vcm/oblique/ObliqueView.js';
 export { ObliqueViewDirection, obliqueViewDirectionNames, getDirectionName } from './src/vcs/vcm/oblique/ObliqueViewDirection.js';
-export { sortRealWordEdgeCoordinates, checkLineIntersection, transformCWIFC, transformToImage, transformFromImage, hasSameOrigin, destroyCesiumEvent } from './src/vcs/vcm/oblique/helpers.js';
+export { sortRealWordEdgeCoordinates, checkLineIntersection, transformCWIFC, transformToImage, transformFromImage, hasSameOrigin } from './src/vcs/vcm/oblique/helpers.js';
 export { getVersionFromImageJson, parseImageMeta, parseImageData, parseLegacyImageData } from './src/vcs/vcm/oblique/parseImageJson.js';
 export { default as ClippingObject } from './src/vcs/vcm/util/clipping/clippingObject.js';
 export { default as ClippingObjectManager } from './src/vcs/vcm/util/clipping/clippingObjectManager.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vcmap/core",
-  "version": "5.0.0-rc.2",
+  "version": "5.0.0-rc.3",
   "description": "",
   "main": "index.js",
   "type": "module",

package/src/vcs/vcm/interaction/coordinateAtPixel.js

@@ -85,7 +85,7 @@ class CoordinateAtPixel extends AbstractInteraction {
       if (Number.isFinite(pixel[0]) && Number.isFinite(pixel[1])) {
         return transformFromImage(image, pixel, {
           dontUseTerrain: !!move,
-          dataProjection: mercatorProjection.proj,
+          dataProjection: mercatorProjection,
         }).then((coordinates) => {
           event.obliqueParameters = { pixel };
           event.position = coordinates.coords;

package/src/vcs/vcm/layer/oblique/obliqueHelpers.js

@@ -91,7 +91,7 @@ export async function mercatorGeometryToImageGeometry(inputSourceGeometry, desti
   const coordinates = sourceGeometry.getCoordinates();
   /** type {Array.<import("ol/coordinate").Coordinate>} */
   const flattenCoordinates = getFlatCoordinatesFromGeometry(sourceGeometry, coordinates);
-  let transformer = getTransform(mercatorProjection.proj, image.meta.projection);
+  let transformer = getTransform(mercatorProjection.proj, image.meta.projection.proj);
 
   let updatedPositions = [];
   if (image.meta.terrainProvider) {
@@ -99,7 +99,7 @@ export async function mercatorGeometryToImageGeometry(inputSourceGeometry, desti
       Projection.mercatorToWgs84(coord, true);
       return Cartographic.fromDegrees(coord[0], coord[1]);
     });
-    transformer = getTransform(wgs84Projection.proj, image.meta.projection);
+    transformer = getTransform(wgs84Projection.proj, image.meta.projection.proj);
     updatedPositions = await sampleTerrainMostDetailed(image.meta.terrainProvider, cartographicCoordinates);
   }
 

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

@@ -1,6 +1,6 @@
 import { CesiumTerrainProvider, Cartographic, Cartesian2, sampleTerrainMostDetailed, sampleTerrain } from '@vcmap/cesium';
 import { getTransform } from 'ol/proj.js';
-import Projection, { wgs84Projection } from '../util/projection.js';
+import { wgs84Projection } from '../util/projection.js';
 
 /**
  * @typedef {Object} TerrainProviderOptions
@@ -69,18 +69,14 @@ export function sampleCesiumTerrain(terrainProvider, level, positions) {
  * 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 {import("@vcmap/core").Projection=} 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 ?
+  const sourceTransformer = optSourceProjection ?
     getTransform(
-      usedProj,
+      optSourceProjection.proj,
       wgs84Projection.proj,
     ) :
     null;

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

@@ -1,5 +1,5 @@
 import { boundingExtent, containsXY } from 'ol/extent.js';
-import { get as getProjection, getTransform, transform, transformExtent } from 'ol/proj.js';
+import { getTransform, transform, transformExtent } from 'ol/proj.js';
 import { check } from '@vcsuite/check';
 import { parseBoolean, parseNumber } from '@vcsuite/parsers';
 import Extent from '../util/extent.js';
@@ -243,7 +243,7 @@ class Oblique extends BaseOLMap {
   get collection() { return this._obliqueProvider.collection; }
 
   /**
-   * @type {import("@vcmap/cesium").Event}
+   * @type {import("@vcmap/core").VcsEvent<import("@vcmap/core").ObliqueImage>}
    * @readonly
    * @api
    */
@@ -294,7 +294,7 @@ class Oblique extends BaseOLMap {
     if (image) {
       const coords = boundingExtent(image.groundCoordinates);
       return new Extent({
-        coordinates: transformExtent(coords, image.meta.projection, mercatorProjection.proj),
+        coordinates: transformExtent(coords, image.meta.projection.proj, mercatorProjection.proj),
         epsg: 'EPSG:3857',
       });
     }
@@ -399,7 +399,7 @@ class Oblique extends BaseOLMap {
       return null;
     }
 
-    const transformationOptions = { dataProjection: getProjection('EPSG:4326') };
+    const transformationOptions = { dataProjection: wgs84Projection };
     const { coords } = await transformFromImage(image, viewCenter, transformationOptions);
     return this._computeViewpointInternal(coords);
   }
@@ -421,7 +421,7 @@ class Oblique extends BaseOLMap {
 
     const gpInternalProjection = image.transformImage2RealWorld(gpImageCoordinates, image.averageHeight);
 
-    const transfrom = getTransform(image.meta.projection, wgs84Projection.proj);
+    const transfrom = getTransform(image.meta.projection.proj, wgs84Projection.proj);
     const gpWGS84 = transfrom(gpInternalProjection.slice(0, 2));
     return this._computeViewpointInternal(gpWGS84);
   }
@@ -489,7 +489,7 @@ class Oblique extends BaseOLMap {
     const bl = image.transformImage2RealWorld([extent[0], extent[1]]);
     const ur = image.transformImage2RealWorld([extent[2], extent[3]]);
     const bbox = [bl[0], bl[1], ur[0], ur[1]];
-    const transformedBbox = transformExtent(bbox, image.meta.projection, wgs84Projection.proj);
+    const transformedBbox = transformExtent(bbox, image.meta.projection.proj, wgs84Projection.proj);
     return containsXY(transformedBbox, coords[0], coords[1]);
   }
 

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';
+
+/**
+ * @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>}
@@ -194,7 +223,7 @@ class ObliqueDataSet {
       }
       if (images.length > 0) {
         this._images = images;
-        this.imagesLoaded.raiseEvent(images);
+        this.imagesLoaded.raiseEvent({ images });
       }
     }
   }
@@ -303,7 +332,7 @@ class ObliqueDataSet {
         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/extent.js

@@ -35,6 +35,11 @@ function checkExtentValidity(extent) {
  * @api
  */
 class Extent {
+  /**
+   * @type {string}
+   */
+  static get className() { return 'vcs.vcm.util.Extent'; }
+
   /**
    * @param {ExtentOptions=} options object
    */
@@ -44,6 +49,7 @@ class Extent {
       epsg: options.epsg,
       proj4: options.proj4,
       alias: options.alias,
+      prefix: options.prefix,
     });
 
     /** @type {import("ol/extent").Extent|null} */
@@ -79,7 +85,11 @@ class Extent {
    * @returns {ExtentOptions}
    */
   toJSON() {
-    return { coordinates: this.extent.slice(), ...this.projection.toJSON() };
+    return {
+      coordinates: this.extent.slice(),
+      ...this.projection.toJSON(),
+      type: Extent.className,
+    };
   }
 
   /**

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

@@ -42,8 +42,22 @@ class IndexedCollection extends Collection {
      * @api
      */
     this.moved = new VcsEvent();
+
+    /**
+     * @type {symbol}
+     * @private
+     */
+    this._previousIndexSymbol = Symbol('previousIndex');
   }
 
+  /**
+   * Get the symbol which is attached to an item prior to its removal. If an item is removed, the current index of the item
+   * is set on the item with this symbol.
+   * @type {symbol}
+   * @readonly
+   */
+  get previousIndexSymbol() { return this._previousIndexSymbol; }
+
   /**
    * Returns an item at index.
    * @param {number} index
@@ -76,6 +90,15 @@ class IndexedCollection extends Collection {
     return null;
   }
 
+  /**
+   * @inheritDoc
+   * @param {T} item
+   */
+  remove(item) {
+    item[this._previousIndexSymbol] = this._array.indexOf(item);
+    super.remove(item);
+  }
+
   /**
    * @param {T} item
    * @param {number} itemIndex

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

@@ -44,9 +44,6 @@ class LayerCollection extends IndexedCollection {
     this._layerEventListeners = {};
 
     /**
-     * A symbol to describe the local z index of a layer. The local z index must not equal the layers z index, but is
-     * always consistent in comparison to the neighbouring layers. If a layer is moved other then by z index, the collection
-     * ensures consistency by setting a new local z index if needed.
      * @type {symbol}
      * @private
      */
@@ -67,6 +64,15 @@ class LayerCollection extends IndexedCollection {
     this.exclusiveManager = new ExclusiveManager();
   }
 
+  /**
+   * A symbol to describe the local z index of a layer. The local z index must not equal the layers z index, but is
+   * always consistent in comparison to the neighbouring layers. If a layer is moved other then by z index, the collection
+   * ensures consistency by setting a new local z index if needed.
+   * @type {symbol}
+   * @readonly
+   */
+  get zIndexSymbol() { return this._zIndexSymbol; }
+
   /**
    * @param {import("@vcmap/core").Layer} layer
    * @private
@@ -116,10 +122,9 @@ class LayerCollection extends IndexedCollection {
   _zIndexChanged(layer) {
     const currentIndex = this.indexOf(layer);
     if (currentIndex > -1) {
-      const increased = layer[this._zIndexSymbol] < layer.zIndex;
       layer[this._zIndexSymbol] = layer.zIndex;
       let zIndexPosition = this._findZIndexPosition(layer.zIndex);
-      if (increased && zIndexPosition > 0) {
+      if (zIndexPosition > 0 && zIndexPosition > currentIndex) {
         zIndexPosition -= 1; // remove self from count
       }
       zIndexPosition = zIndexPosition != null ? zIndexPosition : this._array.length - 1;

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

@@ -3,12 +3,15 @@ import { register } from 'ol/proj/proj4.js';
 import proj4 from 'proj4';
 import { getLogger as getLoggerByName } from '@vcsuite/logger';
 import { check } from '@vcsuite/check';
+import { VcsClassRegistry } from '../classRegistry.js';
 
 /**
  * @typedef {Object} ProjectionOptions
+ * @property {string} [type]
  * @property {string|number} [epsg] -  EPSG of the projection, for example: "EPSG:4326" if not specified, uses the framework projection
  * @property {string|undefined|null} [proj4] - definition of the projection. See for example: {@link http://spatialreference.org/ref/epsg/4326/proj4/} proj4
  * @property {Array<string>|undefined|null} [alias] - aliases to define
+ * @property {string|undefined} [prefix='EPSG:'] - an alternate prefix to use for custom projection
  * @api stable
  */
 
@@ -36,7 +39,8 @@ let defaultProjectionOption = {
  * @returns {string}
  */
 function parseEPSGCode(value, prefix = 'EPSG:') {
-  const matches = `${value}`.match(/^(?:epsg:)?(\d+)/i);
+  const regex = new RegExp(`^(?:${prefix})?(\\d+)`, 'i');
+  const matches = `${value}`.match(regex);
   if (matches && matches[1]) {
     return `${prefix}${matches[1]}`;
   }
@@ -73,9 +77,11 @@ function validateProjectionOptions(options) {
  * @returns {ProjectionOptions} valid options
  */
 function registerProjection(options) {
-  const saneOptions = {};
+  const saneOptions = {
+    prefix: options.prefix,
+  };
   if (options.epsg) {
-    saneOptions.epsg = parseEPSGCode(options.epsg);
+    saneOptions.epsg = parseEPSGCode(options.epsg, options.prefix);
     if (saneOptions.epsg) {
       if (options.proj4) {
         saneOptions.proj4 = options.proj4;
@@ -123,6 +129,11 @@ export function setDefaultProjectionOptions(options) {
  * @api stable
  */
 class Projection {
+  /**
+   * @returns {string}
+   */
+  static get className() { return 'vcs.vcm.util.Projection'; }
+
   /**
    * @param {ProjectionOptions} options
    */
@@ -143,6 +154,20 @@ class Projection {
     if (!this.proj) {
       this._epsg = Projection.parseEPSGCode(defaultProjectionOption.epsg);
     }
+
+    /**
+     * Cached for toJSON
+     * @type {Array<string>}
+     * @private
+     */
+    this._alias = saneOptions.alias;
+
+    /**
+     * Cached for toJSON
+     * @type {string}
+     * @private
+     */
+    this._prefix = saneOptions.prefix;
   }
 
   /**
@@ -264,11 +289,18 @@ class Projection {
    */
   toJSON() {
     const configObject = {
+      type: Projection.className,
       epsg: this.epsg,
     };
     if (this.proj4) {
       configObject.proj4 = this.proj4;
     }
+    if (Array.isArray(this._alias) && this._alias.length > 0) {
+      configObject.alias = this._alias.slice();
+    }
+    if (this._prefix) {
+      configObject.prefix = this._prefix;
+    }
     return configObject;
   }
 
@@ -346,3 +378,5 @@ export const wgs84Projection = new Projection({ epsg: 4326 });
  * @export
  */
 export const mercatorProjection = new Projection({ epsg: 3857 });
+
+VcsClassRegistry.registerClass(Projection.className, Projection);

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

@@ -3,6 +3,7 @@ import { parseBoolean, parseNumber } from '@vcsuite/parsers';
 import Projection, { wgs84Projection } from './projection.js';
 import VcsObject from '../object.js';
 import Extent from './extent.js';
+import { VcsClassRegistry } from '../classRegistry.js';
 
 /**
  * compares two numeric properties
@@ -331,3 +332,5 @@ class ViewPoint extends VcsObject {
 }
 
 export default ViewPoint;
+
+VcsClassRegistry.registerClass(ViewPoint.className, ViewPoint);