itowns 2.44.3-next.3 → 2.44.3-next.30

package/lib/Layer/LabelLayer.js

@@ -168,17 +168,23 @@ class LabelLayer extends GeometryLayer {
    */
   constructor(id) {
     let config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    const domElement = config.domElement;
-    delete config.domElement;
-    super(id, config.object3d || new THREE.Group(), config);
+    const {
+      domElement,
+      performance = true,
+      forceClampToTerrain = false,
+      margin,
+      ...geometryConfig
+    } = config;
+    super(id, config.object3d || new THREE.Group(), geometryConfig);
     this.isLabelLayer = true;
     this.domElement = new DomNode();
     this.domElement.show();
     this.domElement.dom.id = `itowns-label-${this.id}`;
     this.buildExtent = true;
     this.crs = config.source.crs;
-    this.performance = config.performance || true;
-    this.forceClampToTerrain = config.forceClampToTerrain || false;
+    this.performance = performance;
+    this.forceClampToTerrain = forceClampToTerrain;
+    this.margin = margin;
     this.toHide = new THREE.Group();
     this.labelDomelement = domElement;
 
@@ -216,17 +222,21 @@ class LabelLayer extends GeometryLayer {
    *
    * @param {FeatureCollection} data - The FeatureCollection to read the
    * labels from.
-   * @param {Extent} extent
+   * @param {Extent|Tile} extentOrTile
    *
    * @return {Label[]} An array containing all the created labels.
    */
-  convert(data, extent) {
+  convert(data, extentOrTile) {
     const labels = [];
 
     // Converting the extent now is faster for further operation
-    extent.as(data.crs, _extent);
+    if (extentOrTile.isExtent) {
+      extentOrTile.as(data.crs, _extent);
+    } else {
+      extentOrTile.toExtent(data.crs, _extent);
+    }
     coord.crs = data.crs;
-    context.setZoom(extent.zoom);
+    context.setZoom(extentOrTile.zoom);
     data.features.forEach(f => {
       // TODO: add support for LINE and POLYGON
       if (f.type !== FEATURE_TYPES.POINT) {

package/lib/Layer/Layer.js

@@ -90,62 +90,96 @@ class Layer extends THREE.EventDispatcher {
    */
   constructor(id) {
     let config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    /* istanbul ignore next */
-    if (config.projection) {
-      console.warn('Layer projection parameter is deprecated, use crs instead.');
-      config.crs = config.crs || config.projection;
-    }
-    if (config.source === undefined || config.source === true) {
-      throw new Error(`Layer ${id} needs Source`);
-    }
+    const {
+      source,
+      name,
+      style = {},
+      subdivisionThreshold = 256,
+      addLabelLayer = false,
+      cacheLifeTime,
+      options = {},
+      updateStrategy,
+      zoom,
+      mergeFeatures = true,
+      crs
+    } = config;
     super();
+
+    /**
+     * @type {boolean}
+     * @readonly
+     */
     this.isLayer = true;
-    if (config.style && !(config.style instanceof Style)) {
-      if (typeof config.style.fill?.pattern === 'string') {
-        console.warn('Using style.fill.pattern = { source: Img|url } is adviced');
-        config.style.fill.pattern = {
-          source: config.style.fill.pattern
-        };
-      }
-      config.style = new Style(config.style);
-    }
-    this.style = config.style || new Style();
-    this.subdivisionThreshold = config.subdivisionThreshold || 256;
-    this.sizeDiagonalTexture = (2 * (this.subdivisionThreshold * this.subdivisionThreshold)) ** 0.5;
-    Object.assign(this, config);
+
+    /**
+     * @type {string}
+     * @readonly
+     */
+    this.id = id;
     Object.defineProperty(this, 'id', {
-      value: id,
       writable: false
     });
-    // Default properties
-    this.options = config.options || {};
-    if (!this.updateStrategy) {
-      this.updateStrategy = {
-        type: STRATEGY_MIN_NETWORK_TRAFFIC,
-        options: {}
-      };
+
+    /**
+     * @type {string}
+     */
+    this.name = name;
+    if (source === undefined || source === true) {
+      throw new Error(`Layer ${id} needs Source`);
     }
-    this.defineLayerProperty('frozen', false);
-    if (config.zoom) {
-      this.zoom = {
-        max: config.zoom.max,
-        min: config.zoom.min || 0
-      };
-      if (this.zoom.max == undefined) {
-        this.zoom.max = Infinity;
+    /**
+     * @type {Source}
+     */
+    this.source = source || new Source({
+      url: 'none'
+    });
+    this.crs = crs;
+    if (style && !(style instanceof Style)) {
+      if (typeof style.fill?.pattern === 'string') {
+        console.warn('Using style.fill.pattern = { source: Img|url } is adviced');
+        style.fill.pattern = {
+          source: style.fill.pattern
+        };
       }
+      this.style = new Style(style);
     } else {
-      this.zoom = {
-        max: Infinity,
-        min: 0
-      };
+      this.style = style || new Style();
     }
+
+    /**
+     * @type {number}
+     */
+    this.subdivisionThreshold = subdivisionThreshold;
+    this.sizeDiagonalTexture = (2 * (this.subdivisionThreshold * this.subdivisionThreshold)) ** 0.5;
+    this.addLabelLayer = addLabelLayer;
+
+    // Default properties
+    this.options = options;
+    this.updateStrategy = updateStrategy ?? {
+      type: STRATEGY_MIN_NETWORK_TRAFFIC,
+      options: {}
+    };
+    this.defineLayerProperty('frozen', false);
+    this.zoom = {
+      min: zoom?.min ?? 0,
+      max: zoom?.max ?? Infinity
+    };
     this.info = new InfoLayer(this);
-    this.source = this.source || new Source({
-      url: 'none'
-    });
+
+    /**
+     * @type {boolean}
+     */
     this.ready = false;
+
+    /**
+     * @type {Array<Promise<any>>}
+     * @protected
+     */
     this._promises = [];
+
+    /**
+     * @type {Promise<this>}
+     */
     this.whenReady = new Promise((re, rj) => {
       this._resolve = re;
       this._reject = rj;
@@ -157,11 +191,12 @@ class Layer extends THREE.EventDispatcher {
       return this;
     });
     this._promises.push(this.source.whenReady);
-    this.cache = new Cache(config.cacheLifeTime);
-    this.mergeFeatures = this.mergeFeatures === undefined ? true : config.mergeFeatures;
 
-    // TODO: verify but this.source.filter seems be always undefined.
-    this.filter = this.filter || this.source.filter;
+    /**
+     * @type {Cache}
+     */
+    this.cache = new Cache(cacheLifeTime);
+    this.mergeFeatures = mergeFeatures;
   }
   addInitializationStep() {
     // Possibility to add rejection handler, if it's necessary.
@@ -243,15 +278,6 @@ class Layer extends THREE.EventDispatcher {
     return data;
   }
 
-  /**
-   * Determines whether the specified feature is valid data.
-   *
-   * @param      {Feature}  feature  The feature
-   * @returns {Feature} the feature is returned if it's valided
-   */
-  // eslint-disable-next-line
-  isValidData() {}
-
   /**
    * Remove and dispose all objects from layer.
    * @param {boolean} [clearCache=false] Whether to clear the layer cache or not

package/lib/Layer/OGC3DTilesLayer.js

@@ -6,19 +6,20 @@ import { DRACOLoader } from "../ThreeExtended/loaders/DRACOLoader.js";
 import { KTX2Loader } from "../ThreeExtended/loaders/KTX2Loader.js";
 import ReferLayerProperties from "./ReferencingLayerProperties.js";
 import PointsMaterial, { PNTS_MODE, PNTS_SHAPE, PNTS_SIZE_MODE, ClassificationScheme } from "../Renderer/PointsMaterial.js";
+import { VIEW_EVENTS } from "../Core/View.js";
 const _raycaster = new THREE.Raycaster();
 
+// Stores lruCache, downloadQueue and parseQueue for each id of view {@link View}
+// every time a tileset has been added
+// https://github.com/iTowns/itowns/issues/2426
+const viewers = {};
+
 // Internal instance of GLTFLoader, passed to 3d-tiles-renderer-js to support GLTF 1.0 and 2.0
 // Temporary exported to be used in deprecated B3dmParser
 export const itownsGLTFLoader = new iGLTFLoader();
 itownsGLTFLoader.register(() => new GLTFMeshFeaturesExtension());
 itownsGLTFLoader.register(() => new GLTFStructuralMetadataExtension());
 itownsGLTFLoader.register(() => new GLTFCesiumRTCExtension());
-
-// Instantiated by the first tileset. Used to share cache and download and parse queues between tilesets
-let lruCache = null;
-let downloadQueue = null;
-let parseQueue = null;
 export const OGC3DTILES_LAYER_EVENTS = {
   /**
    * Fired when a new root or child tile set is loaded
@@ -52,7 +53,19 @@ export const OGC3DTILES_LAYER_EVENTS = {
    * @property {Object} tile - the tile metadata from the tileset
    * @property {boolean} visible - the tile visible state
    */
-  TILE_VISIBILITY_CHANGE: 'tile-visibility-change'
+  TILE_VISIBILITY_CHANGE: 'tile-visibility-change',
+  /**
+   * Fired when a new batch of tiles start loading (can be fired multiple times, e.g. when the camera moves and new tiles
+   * start loading)
+   * @event OGC3DTilesLayer#tiles-load-start
+   */
+  TILES_LOAD_START: 'tiles-load-start',
+  /**
+   * Fired when all visible tiles are loaded (can be fired multiple times, e.g. when the camera moves and new tiles
+   * are loaded)
+   * @event OGC3DTilesLayer#tiles-load-end
+   */
+  TILES_LOAD_END: 'tiles-load-end'
 };
 
 /**
@@ -92,9 +105,37 @@ export function enableKtx2Loader(path, renderer) {
   ktx2Loader.detectSupport(renderer);
   itownsGLTFLoader.setKTX2Loader(ktx2Loader);
 }
+
+/**
+ * Enable loading 3D Tiles and GLTF with
+ * [meshopt](https://github.com/KhronosGroup/glTF/blob/main/extensions/2.0/Vendor/EXT_meshopt_compression/README.md) compression extension.
+ *
+ * @param {MeshOptDecoder.constructor} MeshOptDecoder - The Meshopt decoder
+ * module.
+ *
+ * @example
+ * import * as itowns from 'itowns';
+ * import { MeshoptDecoder } from 'three/addons/libs/meshopt_decoder.module.js';
+ *
+ * // Enable support of EXT_meshopt_compression
+ * itowns.enableMeshoptDecoder(MeshoptDecoder);
+ */
+export function enableMeshoptDecoder(MeshOptDecoder) {
+  if (!MeshOptDecoder) {
+    throw new Error('MeshOptDecoder module is mandatory');
+  }
+  itownsGLTFLoader.setMeshoptDecoder(MeshOptDecoder);
+}
 class OGC3DTilesLayer extends GeometryLayer {
   /**
    * Layer for [3D Tiles](https://www.ogc.org/standard/3dtiles/) datasets.
+   *
+   * Advanced configuration note: 3D Tiles rendering is delegated to 3DTilesRendererJS that exposes several
+   * configuration options accessible through the tilesRenderer property of this class. see the
+   * [3DTilesRendererJS doc](https://github.com/NASA-AMMOS/3DTilesRendererJS/blob/master/README.md). Also note that
+   * the cache is shared amongst 3D tiles layers and can be configured through tilesRenderer.lruCache (see the
+   * [following documentation](https://github.com/NASA-AMMOS/3DTilesRendererJS/blob/master/README.md#lrucache-1).
+   *
    * @extends Layer
    *
    * @param {String} id - unique layer id.
@@ -109,8 +150,8 @@ class OGC3DTilesLayer extends GeometryLayer {
    * @param {String} [config.pntsSizeMode= PNTS_SIZE_MODE.VALUE] {@link PointsMaterial} Point cloud size mode (passed to {@link PointsMaterial}).
    * Only 'VALUE' or 'ATTENUATED' are possible. VALUE use constant size, ATTENUATED compute size depending on distance
    * from point to camera.
-   * @param {Number} [config.pntsMinAttenuatedSize=1] Minimum scale used by 'ATTENUATED' size mode.
-   * @param {Number} [config.pntsMaxAttenuatedSize=7] Maximum scale used by 'ATTENUATED' size mode.
+   * @param {Number} [config.pntsMinAttenuatedSize=3] Minimum scale used by 'ATTENUATED' size mode.
+   * @param {Number} [config.pntsMaxAttenuatedSize=10] Maximum scale used by 'ATTENUATED' size mode.
    */
   constructor(id, config) {
     super(id, new THREE.Group(), {
@@ -133,8 +174,6 @@ class OGC3DTilesLayer extends GeometryLayer {
     }
     this.tilesRenderer.registerPlugin(new ImplicitTilingPlugin());
     this.tilesRenderer.manager.addHandler(/\.gltf$/, itownsGLTFLoader);
-    this._setupCacheAndQueues();
-    this._setupEvents();
     this.object3d.add(this.tilesRenderer.group);
 
     // Add an initialization step that is resolved when the root tileset is loaded (see this._setup below), meaning
@@ -169,29 +208,31 @@ class OGC3DTilesLayer extends GeometryLayer {
     this.pntsShape = config.pntsShape ?? PNTS_SHAPE.CIRCLE;
     this.classification = config.classification ?? ClassificationScheme.DEFAULT;
     this.pntsSizeMode = config.pntsSizeMode ?? PNTS_SIZE_MODE.VALUE;
-    this.pntsMinAttenuatedSize = config.pntsMinAttenuatedSize || 1;
-    this.pntsMaxAttenuatedSize = config.pntsMaxAttenuatedSize || 7;
+    this.pntsMinAttenuatedSize = config.pntsMinAttenuatedSize || 3;
+    this.pntsMaxAttenuatedSize = config.pntsMaxAttenuatedSize || 10;
   }
 
   /**
-   * Sets the lruCache and download and parse queues so they are shared amongst all tilesets.
+   * Sets the lruCache and download and parse queues so they are shared amongst
+   * all tilesets from a same {@link View} view.
+   * @param {View} view - view associated to this layer.
    * @private
    */
-  _setupCacheAndQueues() {
-    if (lruCache === null) {
-      lruCache = this.tilesRenderer.lruCache;
-    } else {
-      this.tilesRenderer.lruCache = lruCache;
-    }
-    if (downloadQueue === null) {
-      downloadQueue = this.tilesRenderer.downloadQueue;
+  _setupCacheAndQueues(view) {
+    const id = view.id;
+    if (viewers[id]) {
+      this.tilesRenderer.lruCache = viewers[id].lruCache;
+      this.tilesRenderer.downloadQueue = viewers[id].downloadQueue;
+      this.tilesRenderer.parseQueue = viewers[id].parseQueue;
     } else {
-      this.tilesRenderer.downloadQueue = downloadQueue;
-    }
-    if (parseQueue === null) {
-      parseQueue = this.tilesRenderer.parseQueue;
-    } else {
-      this.tilesRenderer.parseQueue = parseQueue;
+      viewers[id] = {
+        lruCache: this.tilesRenderer.lruCache,
+        downloadQueue: this.tilesRenderer.downloadQueue,
+        parseQueue: this.tilesRenderer.parseQueue
+      };
+      view.addEventListener(VIEW_EVENTS.DISPOSED, evt => {
+        delete viewers[evt.target.id];
+      });
     }
   }
 
@@ -235,6 +276,9 @@ class OGC3DTilesLayer extends GeometryLayer {
       });
       view.notifyChange(this);
     });
+    this._setupCacheAndQueues(view);
+    this._setupEvents();
+
     // Start loading tileset and tiles
     this.tilesRenderer.update();
   }
@@ -312,7 +356,8 @@ class OGC3DTilesLayer extends GeometryLayer {
     const {
       face,
       index,
-      object
+      object,
+      instanceId
     } = intersects[0];
 
     /** @type{number|null} */
@@ -320,7 +365,7 @@ class OGC3DTilesLayer extends GeometryLayer {
     if (object.isPoints && index) {
       batchId = object.geometry.getAttribute('_BATCHID')?.getX(index) ?? index;
     } else if (object.isMesh && face) {
-      batchId = object.geometry.getAttribute('_BATCHID')?.getX(face.a);
+      batchId = object.geometry.getAttribute('_BATCHID')?.getX(face.a) ?? instanceId;
     }
     if (batchId === undefined) {
       return null;
@@ -350,7 +395,13 @@ class OGC3DTilesLayer extends GeometryLayer {
     _raycaster.near = camera.near;
     _raycaster.far = camera.far;
     _raycaster.firstHitOnly = true;
-    _raycaster.intersectObject(this.tilesRenderer.group, true, target);
+    const picked = _raycaster.intersectObject(this.tilesRenderer.group, true);
+    // Store the layer of the picked object to conform to the interface of what's returned by Picking.js (used for
+    // other GeometryLayers
+    picked.forEach(p => {
+      p.layer = this;
+    });
+    target.push(...picked);
     return target;
   }
 

package/lib/Layer/OrientedImageLayer.js

@@ -96,14 +96,20 @@ class OrientedImageLayer extends GeometryLayer {
    */
   constructor(id) {
     let config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    /* istanbul ignore next */
+    const {
+      backgroundDistance,
+      background = createBackground(backgroundDistance),
+      onPanoChanged = () => {},
+      getCamerasNameFromFeature = () => {},
+      ...geometryOptions
+    } = config;
     if (config.projection) {
       console.warn('OrientedImageLayer projection parameter is deprecated, use crs instead.');
       config.crs = config.crs || config.projection;
     }
-    super(id, new THREE.Group(), config);
+    super(id, new THREE.Group(), geometryOptions);
     this.isOrientedImageLayer = true;
-    this.background = config.background || createBackground(config.backgroundDistance);
+    this.background = background;
     if (this.background) {
       // Add layer id to easily identify the objects later on (e.g. to delete the geometries when deleting the layer)
       this.background.layer = this.background.layer ?? {};
@@ -115,10 +121,10 @@ class OrientedImageLayer extends GeometryLayer {
     this.currentPano = undefined;
 
     // store a callback to fire event when current panoramic change
-    this.onPanoChanged = config.onPanoChanged || (() => {});
+    this.onPanoChanged = onPanoChanged;
 
     // function to get cameras name from panoramic feature
-    this.getCamerasNameFromFeature = config.getCamerasNameFromFeature || (() => {});
+    this.getCamerasNameFromFeature = getCamerasNameFromFeature;
     const resolve = this.addInitializationStep();
     this.mergeFeatures = false;
     this.filteringExtent = false;

package/lib/Layer/PointCloudLayer.js

@@ -113,6 +113,8 @@ function changeAngleRange(layer) {
  * @property {number} [maxIntensityRange=1] - The maximal intensity of the
  * layer. Changing this value will affect the material, if it has the
  * corresponding uniform. The value is normalized between 0 and 1.
+ *
+ * @extends GeometryLayer
  */
 class PointCloudLayer extends GeometryLayer {
   /**
@@ -120,8 +122,6 @@ class PointCloudLayer extends GeometryLayer {
    * Constructs a new instance of a Point Cloud Layer. This should not be used
    * directly, but rather implemented using `extends`.
    *
-   * @extends GeometryLayer
-   *
    * @param {string} id - The id of the layer, that should be unique. It is
    * not mandatory, but an error will be emitted if this layer is added a
    * {@link View} that already has a layer going by that id.
@@ -130,40 +130,86 @@ class PointCloudLayer extends GeometryLayer {
    * contains three elements `name, protocol, extent`, these elements will be
    * available using `layer.name` or something else depending on the property
    * name. See the list of properties to know which one can be specified.
+   * @param {Source} config.source - Description and options of the source.
    */
   constructor(id) {
     let config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    super(id, config.object3d || new THREE.Group(), config);
+    const {
+      object3d = new THREE.Group(),
+      group = new THREE.Group(),
+      bboxes = new THREE.Group(),
+      octreeDepthLimit = -1,
+      pointBudget = 2000000,
+      pointSize = 2,
+      sseThreshold = 2,
+      minIntensityRange = 1,
+      maxIntensityRange = 65536,
+      minElevationRange = 0,
+      maxElevationRange = 1000,
+      minAngleRange = -90,
+      maxAngleRange = 90,
+      material = {},
+      mode = PNTS_MODE.COLOR,
+      ...geometryLayerConfig
+    } = config;
+    super(id, object3d, geometryLayerConfig);
+
+    /**
+     * @type {boolean}
+     * @readonly
+     */
     this.isPointCloudLayer = true;
     this.protocol = 'pointcloud';
-    this.group = config.group || new THREE.Group();
+    this.group = group;
     this.object3d.add(this.group);
-    this.bboxes = config.bboxes || new THREE.Group();
+    this.bboxes = bboxes || new THREE.Group();
     this.bboxes.visible = false;
     this.object3d.add(this.bboxes);
     this.group.updateMatrixWorld();
 
     // default config
-    this.octreeDepthLimit = config.octreeDepthLimit || -1;
-    this.pointBudget = config.pointBudget || 2000000;
-    this.pointSize = config.pointSize === 0 || !isNaN(config.pointSize) ? config.pointSize : 4;
-    this.sseThreshold = config.sseThreshold || 2;
-    this.defineLayerProperty('minIntensityRange', config.minIntensityRange || 1, changeIntensityRange);
-    this.defineLayerProperty('maxIntensityRange', config.maxIntensityRange || 65536, changeIntensityRange);
-    this.defineLayerProperty('minElevationRange', config.minElevationRange || 0, changeElevationRange);
-    this.defineLayerProperty('maxElevationRange', config.maxElevationRange || 1000, changeElevationRange);
-    this.defineLayerProperty('minAngleRange', config.minAngleRange || -90, changeAngleRange);
-    this.defineLayerProperty('maxAngleRange', config.maxAngleRange || 90, changeAngleRange);
-    this.material = config.material || {};
+    /**
+     * @type {number}
+     */
+    this.octreeDepthLimit = octreeDepthLimit;
+
+    /**
+     * @type {number}
+     */
+    this.pointBudget = pointBudget;
+
+    /**
+     * @type {number}
+     */
+    this.pointSize = pointSize;
+
+    /**
+     * @type {number}
+     */
+    this.sseThreshold = sseThreshold;
+    this.defineLayerProperty('minIntensityRange', minIntensityRange, changeIntensityRange);
+    this.defineLayerProperty('maxIntensityRange', maxIntensityRange, changeIntensityRange);
+    this.defineLayerProperty('minElevationRange', minElevationRange, changeElevationRange);
+    this.defineLayerProperty('maxElevationRange', maxElevationRange, changeElevationRange);
+    this.defineLayerProperty('minAngleRange', minAngleRange, changeAngleRange);
+    this.defineLayerProperty('maxAngleRange', maxAngleRange, changeAngleRange);
+
+    /**
+     * @type {THREE.Material}
+     */
+    this.material = material;
     if (!this.material.isMaterial) {
-      config.material = config.material || {};
-      config.material.intensityRange = new THREE.Vector2(this.minIntensityRange, this.maxIntensityRange);
-      config.material.elevationRange = new THREE.Vector2(this.minElevationRange, this.maxElevationRange);
-      config.material.angleRange = new THREE.Vector2(this.minAngleRange, this.maxAngleRange);
-      this.material = new PointsMaterial(config.material);
+      this.material.intensityRange = new THREE.Vector2(this.minIntensityRange, this.maxIntensityRange);
+      this.material.elevationRange = new THREE.Vector2(this.minElevationRange, this.maxElevationRange);
+      this.material.angleRange = new THREE.Vector2(this.minAngleRange, this.maxAngleRange);
+      this.material = new PointsMaterial(this.material);
     }
-    this.material.defines = this.material.defines || {};
-    this.mode = config.mode || PNTS_MODE.COLOR;
+    this.mode = mode || PNTS_MODE.COLOR;
+
+    /**
+     * @type {PointCloudNode | undefined}
+     */
+    this.root = undefined;
   }
   preUpdate(context, changeSources) {
     // See https://cesiumjs.org/hosted-apps/massiveworlds/downloads/Ring/WorldScaleTerrainRendering.pptx
@@ -245,9 +291,6 @@ class PointCloudLayer extends GeometryLayer {
           redraw: true,
           earlyDropFunction: cmd => !cmd.requester.visible || !this.visible
         }).then(pts => {
-          if (this.onPointsCreated) {
-            this.onPointsCreated(layer, pts);
-          }
           elt.obj = pts;
           // store tightbbox to avoid ping-pong (bbox = larger => visible, tight => invisible)
           elt.tightbbox = pts.tightbbox;
@@ -256,11 +299,12 @@ class PointCloudLayer extends GeometryLayer {
           // be added nor cleaned
           this.group.add(elt.obj);
           elt.obj.updateMatrixWorld(true);
-          elt.promise = null;
-        }, err => {
-          if (err.isCancelledCommandException) {
-            elt.promise = null;
+        }).catch(err => {
+          if (!err.isCancelledCommandException) {
+            return err;
           }
+        }).finally(() => {
+          elt.promise = null;
         });
       }
     }

package/lib/Layer/Potree2Layer.js

@@ -99,13 +99,13 @@ function parseAttributes(jsonAttributes) {
  * @property {boolean} isPotreeLayer - Used to checkout whether this layer
  * is a Potree2Layer. Default is `true`. You should not change this, as it is
  * used internally for optimisation.
+ *
+ * @extends PointCloudLayer
  */
 class Potree2Layer extends PointCloudLayer {
   /**
    * Constructs a new instance of Potree2 layer.
    *
-   * @extends PointCloudLayer
-   *
    * @example
    * // Create a new point cloud layer
    * const points = new Potree2Layer('points',
@@ -132,6 +132,11 @@ class Potree2Layer extends PointCloudLayer {
    */
   constructor(id, config) {
     super(id, config);
+
+    /**
+     * @type {boolean}
+     * @readonly
+     */
     this.isPotreeLayer = true;
     const resolve = this.addInitializationStep();
     this.source.whenReady.then(metadata => {

package/lib/Layer/PotreeLayer.js

@@ -10,13 +10,13 @@ bboxMesh.geometry.boundingBox = box3;
  * @property {boolean} isPotreeLayer - Used to checkout whether this layer
  * is a PotreeLayer. Default is `true`. You should not change this, as it is
  * used internally for optimisation.
+ *
+ * @extends PointCloudLayer
  */
 class PotreeLayer extends PointCloudLayer {
   /**
    * Constructs a new instance of Potree layer.
    *
-   * @extends PointCloudLayer
-   *
    * @example
    * // Create a new point cloud layer
    * const points = new PotreeLayer('points',
@@ -37,12 +37,17 @@ class PotreeLayer extends PointCloudLayer {
    * contains three elements `name, protocol, extent`, these elements will be
    * available using `layer.name` or something else depending on the property
    * name. See the list of properties to know which one can be specified.
-   * @param {string} [config.crs=ESPG:4326] - The CRS of the {@link View} this
+   * @param {string} [config.crs='ESPG:4326'] - The CRS of the {@link View} this
    * layer will be attached to. This is used to determine the extent of this
    * layer.  Default to `EPSG:4326`.
    */
   constructor(id, config) {
     super(id, config);
+
+    /**
+     * @type {boolean}
+     * @readonly
+     */
     this.isPotreeLayer = true;
     const resolve = this.addInitializationStep();
     this.source.whenReady.then(cloud => {