itowns 2.44.3-next.2 → 2.44.3-next.21

package/lib/Core/Tile/Tile.js

@@ -0,0 +1,219 @@
+import * as THREE from 'three';
+import Coordinates from "../Geographic/Coordinates.js";
+import CRS from "../Geographic/Crs.js";
+import Extent from "../Geographic/Extent.js";
+import { getInfoTms, getCountTiles } from "./TileGrid.js";
+const _tmsCoord = new THREE.Vector2();
+const _dimensionTile = new THREE.Vector2();
+const r = {
+  row: 0,
+  col: 0,
+  invDiff: 0
+};
+function _rowColfromParent(/** @type {Tile} */tile, /** @type {number} */zoom) {
+  const diffLevel = tile.zoom - zoom;
+  const diff = 2 ** diffLevel;
+  r.invDiff = 1 / diff;
+  r.row = (tile.row - tile.row % diff) * r.invDiff;
+  r.col = (tile.col - tile.col % diff) * r.invDiff;
+  return r;
+}
+const _extent = new Extent('EPSG:4326', [0, 0, 0, 0]);
+const _extent2 = new Extent('EPSG:4326', [0, 0, 0, 0]);
+const _c = new Coordinates('EPSG:4326', 0, 0);
+class Tile {
+  /**
+   * Tile is a geographical bounding rectangle defined by zoom, row and column.
+   *
+   * @param {String} crs projection of limit values.
+   * @param {number} [zoom=0] zoom value
+   * @param {number} [row=0] row value
+   * @param {number} [col=0] column value
+   */
+  constructor(crs) {
+    let zoom = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    let row = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+    let col = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+    this.isTile = true;
+    this.crs = crs;
+    this.zoom = zoom;
+    this.row = row;
+    this.col = col;
+  }
+
+  /**
+   * Clone this tile
+   * @return {Tile} cloned tile
+   */
+  clone() {
+    return new Tile(this.crs, this.zoom, this.row, this.col);
+  }
+
+  /**
+   * Convert tile to the specified extent.
+   * @param {string} crs the projection of destination.
+   * @param {Extent} target copy the destination to target.
+   * @return {Extent}
+   */
+  toExtent(crs, target) {
+    CRS.isValid(crs);
+    target = target || new Extent('EPSG:4326', [0, 0, 0, 0]);
+    const {
+      epsg,
+      globalExtent,
+      globalDimension
+    } = getInfoTms(this.crs);
+    const countTiles = getCountTiles(this.crs, this.zoom);
+    _dimensionTile.set(1, 1).divide(countTiles).multiply(globalDimension);
+    target.west = globalExtent.west + (globalDimension.x - _dimensionTile.x * (countTiles.x - this.col));
+    target.east = target.west + _dimensionTile.x;
+    target.south = globalExtent.south + _dimensionTile.y * (countTiles.y - this.row - 1);
+    target.north = target.south + _dimensionTile.y;
+    target.crs = epsg;
+    target.zoom = this.zoom;
+    return crs == epsg ? target : target.as(crs, target);
+  }
+
+  /**
+   * Return true if `tile` is inside this tile.
+   *
+   * @param {Tile} tile the tile to check
+   *
+   * @return {boolean}
+   */
+  isInside(tile) {
+    if (this.zoom == tile.zoom) {
+      return this.row == tile.row && this.col == tile.col;
+    } else if (this.zoom < tile.zoom) {
+      return false;
+    } else {
+      _rowColfromParent(this, tile.zoom);
+      return r.row == tile.row && r.col == tile.col;
+    }
+  }
+
+  /**
+   * Return the translation and scale to transform this tile to input tile.
+   *
+   * @param {Tile} tile input tile
+   * @param {THREE.Vector4} target copy the result to target.
+   * @return {THREE.Vector4} {x: translation on west-east, y: translation on south-north, z: scale on west-east, w: scale on south-north}
+   */
+  offsetToParent(tile) {
+    let target = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : new THREE.Vector4();
+    if (this.crs != tile.crs) {
+      throw new Error('unsupported mix');
+    }
+    _rowColfromParent(this, tile.zoom);
+    return target.set(this.col * r.invDiff - r.col, this.row * r.invDiff - r.row, r.invDiff, r.invDiff);
+  }
+
+  /**
+   * Return parent tile with input level
+   *
+   * @param {number} levelParent level of parent.
+   * @return {Tile}
+   */
+  tiledExtentParent(levelParent) {
+    if (levelParent && levelParent < this.zoom) {
+      _rowColfromParent(this, levelParent);
+      return new Tile(this.crs, levelParent, r.row, r.col);
+    } else {
+      return this;
+    }
+  }
+
+  /**
+   * Set zoom, row and column values
+   *
+   * @param {number} [zoom=0] zoom value
+   * @param {number} [row=0] row value
+   * @param {number} [col=0] column value
+   *
+   * @return {Tile}
+   */
+  set() {
+    let zoom = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    let row = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    let col = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+    this.zoom = zoom;
+    this.row = row;
+    this.col = col;
+    return this;
+  }
+
+  /**
+   * Copy to this tile to input tile.
+   * @param {Tile} tile
+   * @return {Tile} copied extent
+   */
+  copy(tile) {
+    this.crs = tile.crs;
+    return this.set(tile.zoom, tile.row, tile.col);
+  }
+
+  /**
+   * Return values of tile in string, separated by the separator input.
+   * @param {string} separator
+   * @return {string}
+   */
+  toString() {
+    let separator = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    return `${this.zoom}${separator}${this.row}${separator}${this.col}`;
+  }
+}
+
+/**
+ * @param {Extent} e
+ * @param {string} tms
+ * @returns {Tile[]}
+ */
+export function tiledCovering(e, tms) {
+  if (e.crs == 'EPSG:4326' && tms == CRS.tms_3857) {
+    const WMTS_PM = [];
+    const extent = _extent.copy(e).as(CRS.formatToEPSG(tms), _extent2);
+    const {
+      globalExtent,
+      globalDimension,
+      sTs
+    } = getInfoTms(CRS.formatToEPSG(tms));
+    extent.clampByExtent(globalExtent);
+    extent.planarDimensions(_dimensionTile);
+    const zoom = e.zoom + 1 || Math.floor(Math.log2(Math.round(globalDimension.x / (_dimensionTile.x * sTs.x))));
+    const countTiles = getCountTiles(tms, zoom);
+    const center = extent.center(_c);
+    _tmsCoord.x = center.x - globalExtent.west;
+    _tmsCoord.y = globalExtent.north - extent.north;
+    _tmsCoord.divide(globalDimension).multiply(countTiles).floor();
+
+    // ]N; N+1] => N
+    const maxRow = Math.ceil((globalExtent.north - extent.south) / globalDimension.x * countTiles.y) - 1;
+    for (let r = maxRow; r >= _tmsCoord.y; r--) {
+      WMTS_PM.push(new Tile(tms, zoom, r, _tmsCoord.x));
+    }
+    return WMTS_PM;
+  } else {
+    const target = new Tile(tms, 0, 0, 0);
+    const {
+      globalExtent,
+      globalDimension,
+      sTs,
+      isInverted
+    } = getInfoTms(e.crs);
+    const center = e.center(_c);
+    e.planarDimensions(_dimensionTile);
+    // Each level has 2^n * 2^n tiles...
+    // ... so we count how many tiles of the same width as tile we can fit in the layer
+    // ... 2^zoom = tilecount => zoom = log2(tilecount)
+    const zoom = Math.floor(Math.log2(Math.round(globalDimension.x / (_dimensionTile.x * sTs.x))));
+    const countTiles = getCountTiles(tms, zoom);
+
+    // Now that we have computed zoom, we can deduce x and y (or row / column)
+    _tmsCoord.x = center.x - globalExtent.west;
+    _tmsCoord.y = isInverted ? globalExtent.north - center.y : center.y - globalExtent.south;
+    _tmsCoord.divide(globalDimension).multiply(countTiles).floor();
+    target.set(zoom, _tmsCoord.y, _tmsCoord.x);
+    return [target];
+  }
+}
+export default Tile;

package/lib/Core/Tile/TileGrid.js

@@ -0,0 +1,46 @@
+import * as THREE from 'three';
+import CRS from "../Geographic/Crs.js";
+import Extent from "../Geographic/Extent.js";
+const _countTiles = new THREE.Vector2();
+const _dim = new THREE.Vector2();
+export const globalExtentTMS = new Map();
+export const schemeTiles = new Map();
+const extent4326 = new Extent('EPSG:4326', -180, 180, -90, 90);
+globalExtentTMS.set('EPSG:4326', extent4326);
+
+// Compute global extent of TMS in EPSG:3857
+// It's square whose a side is between -180° to 180°.
+// So, west extent, it's 180 convert in EPSG:3857
+const extent3857 = extent4326.as('EPSG:3857');
+extent3857.clampSouthNorth(extent3857.west, extent3857.east);
+globalExtentTMS.set('EPSG:3857', extent3857);
+schemeTiles.set('default', new THREE.Vector2(1, 1));
+schemeTiles.set(CRS.tms_3857, schemeTiles.get('default'));
+schemeTiles.set(CRS.tms_4326, new THREE.Vector2(2, 1));
+export function getInfoTms(/** @type {string} */crs) {
+  const epsg = CRS.formatToEPSG(crs);
+  const globalExtent = globalExtentTMS.get(epsg);
+  const globalDimension = globalExtent.planarDimensions(_dim);
+  const tms = CRS.formatToTms(crs);
+  const sTs = schemeTiles.get(tms) || schemeTiles.get('default');
+  // The isInverted parameter is to be set to the correct value, true or false
+  // (default being false) if the computation of the coordinates needs to be
+  // inverted to match the same scheme as OSM, Google Maps or other system.
+  // See link below for more information
+  // https://alastaira.wordpress.com/2011/07/06/converting-tms-tile-coordinates-to-googlebingosm-tile-coordinates/
+  // in crs includes ':NI' => tms isn't inverted (NOT INVERTED)
+  const isInverted = !tms.includes(':NI');
+  return {
+    epsg,
+    globalExtent,
+    globalDimension,
+    sTs,
+    isInverted
+  };
+}
+export function getCountTiles(/** @type {string} */crs, /** @type {number} */zoom) {
+  const sTs = schemeTiles.get(CRS.formatToTms(crs)) || schemeTiles.get('default');
+  const count = 2 ** zoom;
+  _countTiles.set(count, count).multiply(sTs);
+  return _countTiles;
+}

package/lib/Core/TileMesh.js

@@ -1,6 +1,7 @@
 import * as THREE from 'three';
 import CRS from "./Geographic/Crs.js";
 import { geoidLayerIsVisible } from "../Layer/GeoidLayer.js";
+import { tiledCovering } from "./Tile/Tile.js";
 
 /**
  * A TileMesh is a THREE.Mesh with a geometricError and an OBB
@@ -29,7 +30,7 @@ class TileMesh extends THREE.Mesh {
     this.boundingSphere = new THREE.Sphere();
     this.obb.box3D.getBoundingSphere(this.boundingSphere);
     for (const tms of layer.tileMatrixSets) {
-      this.#_tms.set(tms, this.extent.tiledCovering(tms));
+      this.#_tms.set(tms, tiledCovering(this.extent, tms));
     }
     this.frustumCulled = false;
     this.matrixAutoUpdate = false;

package/lib/Core/View.js

@@ -30,7 +30,8 @@ export const VIEW_EVENTS = {
   LAYER_ADDED: 'layer-added',
   INITIALIZED: 'initialized',
   COLOR_LAYERS_ORDER_CHANGED,
-  CAMERA_MOVED: 'camera-moved'
+  CAMERA_MOVED: 'camera-moved',
+  DISPOSED: 'disposed'
 };
 
 /**
@@ -109,9 +110,11 @@ const coordinates = new Coordinates('EPSG:4326');
 const viewers = [];
 // Size of the camera frustrum, in meters
 let screenMeters;
+let id = 0;
 
 /**
- * @property {HTMLElement} domElement - Thhe domElement holding the canvas where the view is displayed
+ * @property {number} id - The id of the view. It's incremented at each new view instance, starting at 0.
+ * @property {HTMLElement} domElement - The domElement holding the canvas where the view is displayed
  * @property {String} referenceCrs - The coordinate reference system of the view
  * @property {MainLoop} mainLoop - itowns mainloop scheduling the operations
  * @property {THREE.Scene} scene - threejs scene of the view
@@ -136,10 +139,10 @@ class View extends THREE.EventDispatcher {
    * var view = itowns.View('EPSG:4326', viewerDiv, { camera: { type: itowns.CAMERA_TYPE.ORTHOGRAPHIC } });
    * var customControls = itowns.THREE.OrbitControls(view.camera3D, viewerDiv);
    *
-   * @param {string} crs - The default CRS of Three.js coordinates. Should be a cartesian CRS.
+   * @param {String} crs - The default CRS of Three.js coordinates. Should be a cartesian CRS.
    * @param {HTMLElement} viewerDiv - Where to instanciate the Three.js scene in the DOM
    * @param {Object} [options] - Optional properties.
-   * @param {object} [options.camera] - Options for the camera associated to the view. See {@link Camera} options.
+   * @param {Object} [options.camera] - Options for the camera associated to the view. See {@link Camera} options.
    * @param {MainLoop} [options.mainLoop] - {@link MainLoop} instance to use, otherwise a default one will be constructed
    * @param {WebGLRenderer|Object} [options.renderer] - {@link WebGLRenderer} instance to use, otherwise
    * a default one will be constructed. In this case, if options.renderer is an object, it will be used to
@@ -159,6 +162,7 @@ class View extends THREE.EventDispatcher {
     }
     super();
     this.domElement = viewerDiv;
+    this.id = id++;
     this.referenceCrs = crs;
     let engine;
     // options.renderer can be 2 separate things:
@@ -272,8 +276,6 @@ class View extends THREE.EventDispatcher {
     }
     // remove alls frameRequester
     this.removeAllFrameRequesters();
-    // remove alls events
-    this.removeAllEvents();
     // remove all layers
     const layers = this.getLayers(l => !l.isTiledGeometryLayer && !l.isAtmosphere);
     for (const layer of layers) {
@@ -290,6 +292,11 @@ class View extends THREE.EventDispatcher {
     viewers.splice(id, 1);
     // Remove remaining objects in the scene (e.g. helpers, debug, etc.)
     this.scene.traverse(ObjectRemovalHelper.cleanup);
+    this.dispatchEvent({
+      type: VIEW_EVENTS.DISPOSED
+    });
+    // remove alls events
+    this.removeAllEvents();
   }
 
   /**

package/lib/Layer/C3DTilesLayer.js

@@ -102,6 +102,7 @@ class C3DTilesLayer extends GeometryLayer {
    * @param  {View}  view  The view
    */
   constructor(id, config, view) {
+    console.warn('C3DTilesLayer is deprecated and will be removed in iTowns 3.0 version. Use OGC3DTilesLayer instead.');
     super(id, new THREE.Group(), {
       source: config.source
     });
@@ -143,7 +144,7 @@ class C3DTilesLayer extends GeometryLayer {
     }
 
     /** @type {Style} */
-    this._style = config.style || null;
+    this.style = config.style || null;
 
     /** @type {Map<string, THREE.MeshStandardMaterial>} */
     this.#fillColorMaterialsBuffer = new Map();
@@ -368,21 +369,15 @@ class C3DTilesLayer extends GeometryLayer {
           if (c3DTileFeature.object3d != object3d) {
             continue; // this feature do not belong to object3d
           }
+          this._style.context.setGeometry({
+            properties: c3DTileFeature
+          });
+
           /** @type {THREE.Color} */
-          let color = null;
-          if (typeof this._style.fill.color === 'function') {
-            color = new THREE.Color(this._style.fill.color(c3DTileFeature));
-          } else {
-            color = new THREE.Color(this._style.fill.color);
-          }
+          const color = new THREE.Color(this._style.fill.color);
 
           /** @type {number} */
-          let opacity = null;
-          if (typeof this._style.fill.opacity === 'function') {
-            opacity = this._style.fill.opacity(c3DTileFeature);
-          } else {
-            opacity = this._style.fill.opacity;
-          }
+          const opacity = this._style.fill.opacity;
           const materialId = color.getHexString() + opacity;
           let material = null;
           if (this.#fillColorMaterialsBuffer.has(materialId)) {
@@ -445,7 +440,13 @@ class C3DTilesLayer extends GeometryLayer {
     return this.#fillColorMaterialsBuffer.size;
   }
   set style(value) {
-    this._style = value;
+    if (value instanceof Style) {
+      this._style = value;
+    } else if (!value) {
+      this._style = null;
+    } else {
+      this._style = new Style(value);
+    }
     this.updateStyle();
   }
   get style() {

package/lib/Layer/LabelLayer.js

@@ -216,17 +216,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/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'
 };
 
 /**
@@ -95,6 +108,13 @@ export function enableKtx2Loader(path, renderer) {
 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 +129,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(), {
@@ -122,17 +142,17 @@ class OGC3DTilesLayer extends GeometryLayer {
     if (config.source.isOGC3DTilesIonSource) {
       this.tilesRenderer.registerPlugin(new CesiumIonAuthPlugin({
         apiToken: config.source.accessToken,
-        assetId: config.source.assetId
+        assetId: config.source.assetId,
+        autoRefreshToken: true
       }));
     } else if (config.source.isOGC3DTilesGoogleSource) {
       this.tilesRenderer.registerPlugin(new GoogleCloudAuthPlugin({
-        apiToken: config.source.key
+        apiToken: config.source.key,
+        autoRefreshToken: true
       }));
     }
     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
@@ -167,29 +187,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;
+  _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.lruCache = lruCache;
-    }
-    if (downloadQueue === null) {
-      downloadQueue = this.tilesRenderer.downloadQueue;
-    } 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];
+      });
     }
   }
 
@@ -233,6 +255,9 @@ class OGC3DTilesLayer extends GeometryLayer {
       });
       view.notifyChange(this);
     });
+    this._setupCacheAndQueues(view);
+    this._setupEvents();
+
     // Start loading tileset and tiles
     this.tilesRenderer.update();
   }
@@ -274,7 +299,7 @@ class OGC3DTilesLayer extends GeometryLayer {
 
     // Setup classification bufferAttribute
     if (model.isPoints) {
-      const classificationData = batchTable?.getData('Classification');
+      const classificationData = batchTable?.getPropertyArray('Classification');
       if (classificationData) {
         geometry.setAttribute('classification', new THREE.BufferAttribute(classificationData, 1));
       }
@@ -348,7 +373,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/Parser/GeoJsonParser.js

@@ -195,7 +195,7 @@ export default {
     _in.crs = _in.crs || readCRS(json);
     if (out.filteringExtent) {
       if (typeof out.filteringExtent == 'boolean') {
-        out.filterExtent = options.extent.as(_in.crs);
+        out.filterExtent = options.extent.isExtent ? options.extent.as(_in.crs) : options.extent.toExtent(_in.crs);
       } else if (out.filteringExtent.isExtent) {
         out.filterExtent = out.filteringExtent;
       }

package/lib/Parser/VectorTileParser.js

@@ -1,7 +1,7 @@
 import { Vector2, Vector3 } from 'three';
 import Protobuf from 'pbf';
 import { VectorTile } from '@mapbox/vector-tile';
-import { globalExtentTMS } from "../Core/Geographic/Extent.js";
+import { globalExtentTMS } from "../Core/Tile/TileGrid.js";
 import { FeatureCollection, FEATURE_TYPES } from "../Core/Feature.js";
 import { deprecatedParsingOptionsToNewOne } from "../Core/Deprecated/Undeprecator.js";
 import Coordinates from "../Core/Geographic/Coordinates.js";

package/lib/Parser/XbilParser.js

@@ -67,10 +67,22 @@ export function computeMinMaxElevation(texture, pitch, options) {
         }
       }
     }
-    if (options.zmin > min) {
+  }
+
+  // Clamp values to zmin and zmax values configured in ElevationLayer
+  if (options.zmin != null) {
+    if (min < options.zmin) {
       min = options.zmin;
     }
-    if (options.zmax < max) {
+    if (max < options.zmin) {
+      max = options.zmin;
+    }
+  }
+  if (options.zmax != null) {
+    if (min > options.zmax) {
+      min = options.zmax;
+    }
+    if (max > options.zmax) {
       max = options.zmax;
     }
   }