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

package/src/{vcs/vcm/layer/pointCloud.js → layer/pointCloudLayer.js}

@@ -1,10 +1,10 @@
 import { checkMaybe } from '@vcsuite/check';
-import CesiumTileset from './cesiumTileset.js';
-import DeclarativeStyleItem from '../util/style/declarativeStyleItem.js';
-import VectorStyleItem from '../util/style/vectorStyleItem.js';
-import CesiumMap from '../maps/cesium.js';
-import PointCloudCesium from './cesium/pointCloudCesium.js';
-import { VcsClassRegistry } from '../classRegistry.js';
+import CesiumTilesetLayer from './cesiumTilesetLayer.js';
+import DeclarativeStyleItem from '../style/declarativeStyleItem.js';
+import VectorStyleItem from '../style/vectorStyleItem.js';
+import CesiumMap from '../map/cesiumMap.js';
+import CesiumTilesetCesiumImpl from './cesium/cesiumTilesetCesiumImpl.js';
+import { layerClassRegistry } from '../classRegistry.js';
 
 /**
  * @typedef {CesiumTilesetOptions} PointCloudOptions
@@ -24,7 +24,7 @@ import { VcsClassRegistry } from '../classRegistry.js';
 export const defaultPointCloudStyle = new DeclarativeStyleItem({});
 
 /**
- * represents a specific PointCloud layer for cesium.
+ * represents a specific PointCloudLayer layer for cesium.
  * <h3>Config Parameter</h3>
  * <ul>
  *  <li>url: string: url to the p3dm dataset
@@ -32,19 +32,18 @@ export const defaultPointCloudStyle = new DeclarativeStyleItem({});
  * </ul>
  *
  * @class
- * @export
- * @extends {CesiumTileset}
+ * @extends {CesiumTilesetLayer}
  * @api stable
  */
-class PointCloud extends CesiumTileset {
-  static get className() { return 'vcs.vcm.layer.PointCloud'; }
+class PointCloudLayer extends CesiumTilesetLayer {
+  static get className() { return 'PointCloudLayer'; }
 
   /**
    * @returns {PointCloudOptions}
    */
   static getDefaultOptions() {
     return {
-      ...CesiumTileset.getDefaultOptions(),
+      ...CesiumTilesetLayer.getDefaultOptions(),
       pointSize: null,
     };
   }
@@ -55,7 +54,7 @@ class PointCloud extends CesiumTileset {
   constructor(options) {
     super(options);
 
-    const defaultOptions = PointCloud.getDefaultOptions();
+    const defaultOptions = PointCloudLayer.getDefaultOptions();
     /**
      * The default point size to fall back on, if no point size is given. Uses Cesium default of 1 if null.
      * @api
@@ -72,7 +71,7 @@ class PointCloud extends CesiumTileset {
 
   /**
    * @inheritDoc
-   * @param {(Reference|DeclarativeStyleItemOptions|VectorStyleItemOptions|import("@vcmap/core").StyleItem|string)=} styleOptions
+   * @param {(DeclarativeStyleItemOptions|VectorStyleItemOptions|import("@vcmap/core").StyleItem)=} styleOptions
    * @param {(VectorStyleItem|DeclarativeStyleItem)=} defaultStyle
    * @returns {import("@vcmap/core").StyleItem}
    */
@@ -92,28 +91,21 @@ class PointCloud extends CesiumTileset {
   set pointSize(size) {
     checkMaybe(size, [Number, String]);
     this._pointSize = size;
-    this.getImplementations().forEach((impl) => {
-      /** @type {PointCloudCesium} */ (impl).updatePointSize(size);
-    });
+    /** @type {DeclarativeStyleItem} */ (this.style).pointSize = size?.toString();
   }
 
-  /**
-   * @returns {PointCloudImplementationOptions}
-   */
-  getImplementationOptions() {
-    return {
-      ...super.getImplementationOptions(),
-      pointSize: this.pointSize,
-    };
+  async initialize() {
+    await super.initialize();
+    this.pointSize = this._pointSize;
   }
 
   /**
    * @param {import("@vcmap/core").VcsMap} map
-   * @returns {Array<PointCloudCesium>}
+   * @returns {Array<CesiumTilesetCesiumImpl>}
    */
   createImplementationsForMap(map) {
     if (map instanceof CesiumMap) {
-      return [new PointCloudCesium(map, this.getImplementationOptions())];
+      return [new CesiumTilesetCesiumImpl(map, this.getImplementationOptions())];
     }
 
     return [];
@@ -129,8 +121,8 @@ class PointCloud extends CesiumTileset {
   }
 
   /**
-   * Sets a new declarative style. Cannot set a Vector style on PointCloud layers.
-   * @param {string|import("ol/style/Style").default|import("ol/style/Style").StyleFunction|import("@vcmap/core").StyleItem} style
+   * Sets a new declarative style. Cannot set a VectorLayer style on PointCloudLayer layers.
+   * @param {import("ol/style/Style").default|import("ol/style/Style").StyleFunction|import("@vcmap/core").StyleItem} style
    * @param {boolean=} silent
    * @api
    */
@@ -148,7 +140,7 @@ class PointCloud extends CesiumTileset {
    */
   toJSON() {
     const config = /** @type {PointCloudOptions} */ (super.toJSON());
-    const defaultOptions = PointCloud.getDefaultOptions();
+    const defaultOptions = PointCloudLayer.getDefaultOptions();
 
     if (this.defaultPointSize !== defaultOptions.pointSize) {
       config.pointSize = this.defaultPointSize;
@@ -158,5 +150,5 @@ class PointCloud extends CesiumTileset {
   }
 }
 
-VcsClassRegistry.registerClass(PointCloud.className, PointCloud);
-export default PointCloud;
+layerClassRegistry.registerClass(PointCloudLayer.className, PointCloudLayer);
+export default PointCloudLayer;

package/src/{vcs/vcm/layer → layer}/rasterLayer.js

@@ -1,12 +1,12 @@
-import { ImagerySplitDirection, WebMercatorTilingScheme, GeographicTilingScheme, Cartographic } from '@vcmap/cesium';
+import { SplitDirection, WebMercatorTilingScheme, GeographicTilingScheme, Cartographic } from '@vcmap/cesium';
 import { getBottomLeft, getBottomRight, getTopLeft, getTopRight } from 'ol/extent.js';
 
 import { parseInteger, parseNumberRange, parseEnumValue } from '@vcsuite/parsers';
 import { wgs84Projection } from '../util/projection.js';
 import Layer from './layer.js';
-import VcsEvent from '../event/vcsEvent.js';
+import VcsEvent from '../vcsEvent.js';
 import Extent from '../util/extent.js';
-import { VcsClassRegistry } from '../classRegistry.js';
+import { layerClassRegistry } from '../classRegistry.js';
 
 /**
  * @typedef {LayerOptions} RasterLayerOptions
@@ -24,14 +24,14 @@ import { VcsClassRegistry } from '../classRegistry.js';
  * @property {number} maxLevel
  * @property {string} tilingSchema
  * @property {number} opacity
- * @property {import("@vcmap/cesium").ImagerySplitDirection} splitDirection
+ * @property {import("@vcmap/cesium").SplitDirection} splitDirection
  * @property {Extent|undefined} extent
  */
 
 /**
  * @typedef {import("@vcmap/core").LayerImplementation<import("@vcmap/core").VcsMap>} RasterLayerImplementation
  * @property {function(number):void} updateOpacity
- * @property {function(import("@vcmap/cesium").ImagerySplitDirection):void} updateSplitDirection
+ * @property {function(import("@vcmap/cesium").SplitDirection):void} updateSplitDirection
  * @api
  */
 
@@ -41,7 +41,6 @@ import { VcsClassRegistry } from '../classRegistry.js';
  * @api
  * @property {string} GEOGRAPHIC
  * @property {string} MERCATOR
- * @export
  */
 export const TilingScheme = {
   GEOGRAPHIC: 'geographic',
@@ -112,13 +111,12 @@ export function calculateMinLevel(extent, tilingScheme, maxLevel, minLevel = 0)
  * This abstract class allows for automatic loading scheme determination
  * for raster layers
  * @class
- * @export
  * @extends {Layer}
  * @implements {SplitLayer}
  * @abstract
  */
 class RasterLayer extends Layer {
-  static get className() { return 'vcs.vcm.layer.RasterLayer'; }
+  static get className() { return 'RasterLayer'; }
 
   /**
    * @returns {RasterLayerOptions}
@@ -166,18 +164,18 @@ class RasterLayer extends Layer {
      */
     this._opacity = parseNumberRange(options.opacity, defaultOptions.opacity, 0.0, 1.0);
 
-    /** @type {import("@vcmap/cesium").ImagerySplitDirection} */
-    this._splitDirection = ImagerySplitDirection.NONE;
+    /** @type {import("@vcmap/cesium").SplitDirection} */
+    this._splitDirection = SplitDirection.NONE;
 
     if (options.splitDirection) {
       this._splitDirection = options.splitDirection === 'left' ?
-        ImagerySplitDirection.LEFT :
-        ImagerySplitDirection.RIGHT;
+        SplitDirection.LEFT :
+        SplitDirection.RIGHT;
     }
 
     /**
      * raised if the split direction changes, is passed the split direction as its only argument
-     * @type {VcsEvent<import("@vcmap/cesium").ImagerySplitDirection>}
+     * @type {VcsEvent<import("@vcmap/cesium").SplitDirection>}
      * @api
      */
     this.splitDirectionChanged = new VcsEvent();
@@ -186,12 +184,12 @@ class RasterLayer extends Layer {
   /**
    * The split directions of this layer
    * @api
-   * @type {import("@vcmap/cesium").ImagerySplitDirection}
+   * @type {import("@vcmap/cesium").SplitDirection}
    */
   get splitDirection() { return this._splitDirection; }
 
   /**
-   * @param {import("@vcmap/cesium").ImagerySplitDirection} direction
+   * @param {import("@vcmap/cesium").SplitDirection} direction
    */
   set splitDirection(direction) {
     if (direction !== this._splitDirection) {
@@ -272,8 +270,8 @@ class RasterLayer extends Layer {
       config.opacity = this.opacity;
     }
 
-    if (this._splitDirection !== ImagerySplitDirection.NONE) {
-      config.splitDirection = this._splitDirection === ImagerySplitDirection.RIGHT ?
+    if (this._splitDirection !== SplitDirection.NONE) {
+      config.splitDirection = this._splitDirection === SplitDirection.RIGHT ?
         'right' :
         'left';
     }
@@ -290,5 +288,5 @@ class RasterLayer extends Layer {
   }
 }
 
-VcsClassRegistry.registerClass(RasterLayer.className, RasterLayer);
+layerClassRegistry.registerClass(RasterLayer.className, RasterLayer);
 export default RasterLayer;

package/src/{vcs/vcm/layer/singleImage.js → layer/singleImageLayer.js}

@@ -1,11 +1,12 @@
 import { check } from '@vcsuite/check';
 import RasterLayer from './rasterLayer.js';
-import SingleImageCesium from './cesium/singleImageCesium.js';
-import SingleImageOpenlayers from './openlayers/singleImageOpenlayers.js';
-import CesiumMap from '../maps/cesium.js';
-import Openlayers from '../maps/openlayers.js';
+import SingleImageCesiumImpl from './cesium/singleImageCesiumImpl.js';
+import SingleImageOpenlayersImpl from './openlayers/singleImageOpenlayersImpl.js';
+import CesiumMap from '../map/cesiumMap.js';
+import OpenlayersMap from '../map/openlayersMap.js';
 import Extent from '../util/extent.js';
-import { VcsClassRegistry } from '../classRegistry.js';
+import { layerClassRegistry } from '../classRegistry.js';
+import { wgs84Projection } from '../util/projection.js';
 
 /**
  * @typedef {RasterLayerOptions} SingleImageOptions
@@ -19,14 +20,13 @@ import { VcsClassRegistry } from '../classRegistry.js';
  */
 
 /**
- * Image layer for Cesium and Openlayers
+ * Image layer for Cesium and OpenlayersMap
  * @class
- * @export
  * @extends {RasterLayer}
  * @api stable
  */
-class SingleImage extends RasterLayer {
-  static get className() { return 'vcs.vcm.layer.SingleImage'; }
+class SingleImageLayer extends RasterLayer {
+  static get className() { return 'SingleImageLayer'; }
 
   /**
    * @returns {SingleImageOptions}
@@ -43,21 +43,21 @@ class SingleImage extends RasterLayer {
    */
   constructor(options) {
     super(options);
-    const defaultOptions = SingleImage.getDefaultOptions();
+    const defaultOptions = SingleImageLayer.getDefaultOptions();
     /** @type {string} */
     this.credit = options.credit || defaultOptions.credit;
 
     if (!this.extent.isValid()) {
       this.getLogger().warning(`layer ${this.name} was constructed with an invalid extent, defaulting to global extent`);
       this.extent = new Extent({
-        epsg: 'EPSG:4326',
+        projection: wgs84Projection.toJSON(),
         coordinates: [-180, -90, 180, 90],
       });
     }
 
     this._supportedMaps = [
       CesiumMap.className,
-      Openlayers.className,
+      OpenlayersMap.className,
     ];
   }
 
@@ -73,13 +73,13 @@ class SingleImage extends RasterLayer {
 
   /**
    * @param {import("@vcmap/core").VcsMap} map
-   * @returns {Array<SingleImageOpenlayers|SingleImageCesium>}
+   * @returns {Array<SingleImageOpenlayersImpl|SingleImageCesiumImpl>}
    */
   createImplementationsForMap(map) {
     if (map instanceof CesiumMap) {
-      return [new SingleImageCesium(map, this.getImplementationOptions())];
-    } else if (map instanceof Openlayers) {
-      return [new SingleImageOpenlayers(map, this.getImplementationOptions())];
+      return [new SingleImageCesiumImpl(map, this.getImplementationOptions())];
+    } else if (map instanceof OpenlayersMap) {
+      return [new SingleImageOpenlayersImpl(map, this.getImplementationOptions())];
     }
     return [];
   }
@@ -115,5 +115,5 @@ class SingleImage extends RasterLayer {
   }
 }
 
-VcsClassRegistry.registerClass(SingleImage.className, SingleImage);
-export default SingleImage;
+layerClassRegistry.registerClass(SingleImageLayer.className, SingleImageLayer);
+export default SingleImageLayer;

package/src/{vcs/vcm/layer → layer}/terrainHelpers.js

@@ -1,6 +1,6 @@
-import { CesiumTerrainProvider, Cartographic, Cartesian2, sampleTerrainMostDetailed, sampleTerrain } from '@vcmap/cesium';
+import { CesiumTerrainProvider, Cartographic, Cartesian2, sampleTerrainMostDetailed } 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
@@ -26,7 +26,7 @@ export function getTerrainProviderForUrl(options) {
   }
   let terrainProvider = terrainProviders[options.url];
   if ((options.requestVertexNormals !== undefined &&
-    terrainProvider.requestVertexNormals !== options.requestVertexNormals) ||
+      terrainProvider.requestVertexNormals !== options.requestVertexNormals) ||
     (options.requestWaterMask !== undefined &&
       terrainProvider.requestWaterMask !== options.requestWaterMask)) {
     terrainProviders[options.url] = new CesiumTerrainProvider(options);
@@ -35,52 +35,18 @@ export function getTerrainProviderForUrl(options) {
   return terrainProvider;
 }
 
-/**
- * @param {import("@vcmap/cesium").CesiumTerrainProvider} terrainProvider
- * @param {Array<import("@vcmap/cesium").Cartographic>} positions
- * @returns {Promise<Array<import("@vcmap/cesium").Cartographic>>}
- */
-export function sampleCesiumTerrainMostDetailed(terrainProvider, positions) {
-  return new Promise((resolve, reject) => {
-    sampleTerrainMostDetailed(terrainProvider, positions)
-      .then((updatedPositions) => {
-        resolve(updatedPositions);
-      }, reject);
-  });
-}
-
-/**
- * updates the height of the positions in place.
- * @param {import("@vcmap/cesium").CesiumTerrainProvider} terrainProvider
- * @param {number} level
- * @param {Array<import("@vcmap/cesium").Cartographic>} positions
- * @returns {Promise<Array<import("@vcmap/cesium").Cartographic>>}
- */
-export function sampleCesiumTerrain(terrainProvider, level, positions) {
-  return new Promise((resolve, reject) => {
-    sampleTerrain(terrainProvider, level, positions)
-      .then((updatedPositions) => {
-        resolve(updatedPositions);
-      }, reject);
-  });
-}
-
 /**
  * changes input coordinate Array in place, new height can also be accessed by coordinates[x][2]
  * @param {import("@vcmap/cesium").CesiumTerrainProvider} terrainProvider
  * @param {Array<import("ol/coordinate").Coordinate>} coordinates
- * @param {(import("@vcmap/core").Projection|import("ol/proj/Projection").default)=} optSourceProjection - if input is not WGS84
+ * @param {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;
@@ -93,15 +59,13 @@ export function getHeightFromTerrainProvider(terrainProvider, coordinates, optSo
   });
 
   const outArray = result || coordinates.map(c => c.slice());
-  return new Promise((resolve, reject) => {
-    sampleTerrainMostDetailed(terrainProvider, positions)
-      .then((updatedPositions) => {
-        updatedPositions.forEach((position, index) => {
-          outArray[index][2] = position.height || 0;
-        });
-        resolve(outArray);
-      }, reject);
-  });
+  return sampleTerrainMostDetailed(terrainProvider, positions)
+    .then((updatedPositions) => {
+      updatedPositions.forEach((position, index) => {
+        outArray[index][2] = position.height || 0;
+      });
+      return outArray;
+    });
 }
 
 /**

package/src/{vcs/vcm/layer/terrain.js → layer/terrainLayer.js}

@@ -1,9 +1,9 @@
 import { parseBoolean } from '@vcsuite/parsers';
 import Layer from './layer.js';
 import { getHeightFromTerrainProvider, getTerrainProviderForUrl } from './terrainHelpers.js';
-import CesiumMap from '../maps/cesium.js';
-import TerrainCesium from './cesium/terrainCesium.js';
-import { VcsClassRegistry } from '../classRegistry.js';
+import CesiumMap from '../map/cesiumMap.js';
+import TerrainCesiumImpl from './cesium/terrainCesiumImpl.js';
+import { layerClassRegistry } from '../classRegistry.js';
 
 /**
  * @typedef {LayerOptions} TerrainOptions
@@ -21,12 +21,11 @@ import { VcsClassRegistry } from '../classRegistry.js';
 /**
  * represents a terrain layer.
  * @class
- * @export
  * @extends {Layer}
  * @api stable
  */
-class Terrain extends Layer {
-  static get className() { return 'vcs.vcm.layer.Terrain'; }
+class TerrainLayer extends Layer {
+  static get className() { return 'TerrainLayer'; }
 
   /**
    * @returns {TerrainOptions}
@@ -44,7 +43,7 @@ class Terrain extends Layer {
    */
   constructor(options) {
     super(options);
-    const defaultOptions = Terrain.getDefaultOptions();
+    const defaultOptions = TerrainLayer.getDefaultOptions();
 
     this._supportedMaps = [
       CesiumMap.className,
@@ -77,11 +76,11 @@ class Terrain extends Layer {
   /**
    * @inheritDoc
    * @param {import("@vcmap/core").VcsMap} map
-   * @returns {Array<TerrainCesium>}
+   * @returns {Array<TerrainCesiumImpl>}
    */
   createImplementationsForMap(map) {
     if (map instanceof CesiumMap) {
-      return [new TerrainCesium(map, this.getImplementationOptions())];
+      return [new TerrainCesiumImpl(map, this.getImplementationOptions())];
     }
     return [];
   }
@@ -106,7 +105,7 @@ class Terrain extends Layer {
    */
   toJSON() {
     const config = /** @type {TerrainOptions} */ (super.toJSON());
-    const defaultOptions = Terrain.getDefaultOptions();
+    const defaultOptions = TerrainLayer.getDefaultOptions();
 
     if (this.requestVertexNormals !== defaultOptions.requestVertexNormals) {
       config.requestVertexNormals = this.requestVertexNormals;
@@ -118,5 +117,5 @@ class Terrain extends Layer {
   }
 }
 
-VcsClassRegistry.registerClass(Terrain.className, Terrain);
-export default Terrain;
+layerClassRegistry.registerClass(TerrainLayer.className, TerrainLayer);
+export default TerrainLayer;

package/src/{vcs/vcm/layer → layer}/tileLoadedHelper.js

@@ -1,7 +1,7 @@
-import CesiumTilesetCesium from './cesium/cesiumTilesetCesium.js';
+import CesiumTilesetCesiumImpl from './cesium/cesiumTilesetCesiumImpl.js';
 
 /**
- * @param {CesiumTilesetCesium} impl
+ * @param {CesiumTilesetCesiumImpl} impl
  * @param {number=} timeout
  * @returns {Promise<void>}
  */
@@ -26,13 +26,13 @@ function waitForImplTilesLoaded(impl, timeout) {
 }
 
 /**
- * @param {import("@vcmap/core").CesiumTileset|import("@vcmap/core").FeatureStore} layer
+ * @param {import("@vcmap/core").CesiumTilesetLayer|import("@vcmap/core").FeatureStoreLayer} layer
  * @param {number=} timeout
  * @returns {Promise<void>}
  */
 export async function tiledLayerLoaded(layer, timeout) {
-  const impls = /** @type {Array<CesiumTilesetCesium>} */
-    (layer.getImplementations().filter(i => i instanceof CesiumTilesetCesium));
+  const impls = /** @type {Array<CesiumTilesetCesiumImpl>} */
+    (layer.getImplementations().filter(i => i instanceof CesiumTilesetCesiumImpl));
   if (!layer.active || impls.every(i => i.cesium3DTileset.tilesLoaded)) {
     return;
   }

package/src/{vcs/vcm/layer → layer}/tileProvider/mvtTileProvider.js

@@ -1,9 +1,10 @@
-import axios from 'axios';
 import MVT from 'ol/format/MVT.js';
 import Feature from 'ol/Feature.js';
 import { getCenter } from 'ol/extent.js';
 import TileProvider, { rectangleToExtent } from './tileProvider.js';
 import { getURL } from './urlTemplateTileProvider.js';
+import { requestArrayBuffer } from '../../util/fetch.js';
+import { tileProviderClassRegistry } from '../../classRegistry.js';
 
 /**
  * @typedef {TileProviderOptions} MVTTileProviderOptions
@@ -17,7 +18,6 @@ import { getURL } from './urlTemplateTileProvider.js';
  *
  * @class
  * @extends {TileProvider}
- * @export
  * @api
  */
 class MVTTileProvider extends TileProvider {
@@ -25,7 +25,7 @@ class MVTTileProvider extends TileProvider {
    * @readonly
    * @returns {string}
    */
-  static get className() { return 'vcs.vcm.layer.tileProvider.MVTTileProvider'; }
+  static get className() { return 'MVTTileProvider'; }
 
   /**
    * @returns {MVTTileProviderOptions}
@@ -62,6 +62,26 @@ class MVTTileProvider extends TileProvider {
     this._MVTFormat = new MVT({ featureClass: Feature });
   }
 
+  /**
+   * @type {string}
+   */
+  get locale() {
+    return super.locale;
+  }
+
+  /**
+   * sets the locale and clears the Cache if the URL is a locale aware Object.
+   * @param {string} value
+   */
+  set locale(value) {
+    if (this.locale !== value) {
+      super.locale = value;
+      if (this.url.includes('{locale}')) {
+        this.clearCache();
+      }
+    }
+  }
+
   /**
    * @inheritDoc
    * @param {number} x
@@ -71,12 +91,12 @@ class MVTTileProvider extends TileProvider {
    */
   async loader(x, y, z) {
     const rectangle = this.tilingScheme.tileXYToRectangle(x, y, z);
-    const url = getURL(this.url, x, y, z, rectangle);
+    const url = getURL(this.url, x, y, z, rectangle, this.locale);
     const extent = rectangleToExtent(rectangle);
     const center = getCenter(extent);
-    const response = await axios.get(url, { responseType: 'arraybuffer' });
+    const data = await requestArrayBuffer(url);
     const features = /** @type {Array<import("ol").Feature<import("ol/geom/Geometry").default>>} */
-      (this._MVTFormat.readFeatures(response.data));
+      (this._MVTFormat.readFeatures(data));
     const sx = ((extent[2] - extent[0]) / 4096);
     const sy = -((extent[3] - extent[1]) / 4096);
     features.forEach((feature) => {
@@ -99,6 +119,23 @@ class MVTTileProvider extends TileProvider {
     });
     return features;
   }
+
+  /**
+   * @returns {MVTTileProviderOptions}
+   */
+  toJSON() {
+    const config = /** @type {MVTTileProviderOptions} */ (super.toJSON());
+
+    if (this.url) {
+      config.url = this.url;
+    }
+
+    if (this.idProperty) {
+      config.idProperty = this.idProperty;
+    }
+    return config;
+  }
 }
 
 export default MVTTileProvider;
+tileProviderClassRegistry.registerClass(MVTTileProvider.className, MVTTileProvider);