itowns 2.45.1-next.0 → 2.45.1-next.1

package/lib/Layer/ElevationLayer.js

@@ -0,0 +1,139 @@
+import RasterLayer from "./RasterLayer.js";
+import { updateLayeredMaterialNodeElevation } from "../Process/LayeredMaterialNodeProcessing.js";
+import { RasterElevationTile } from "../Renderer/RasterTile.js";
+
+/**
+ * @property {boolean} isElevationLayer - Used to checkout whether this layer is
+ * an ElevationLayer. Default is true. You should not change this, as it is used
+ * internally for optimisation.
+ * @property {number} noDataValue - Used to specify a **null** or **no data value** in the elevation terrain.
+ * @property {number} [zmin] - Used to specify a minimum value for the elevation terrain (if the data goes lower, it will be clamped).
+ * @property {number} [zmax] - Used to specify a maximum value for the elevation terrain (if the data goes higher, it will be clamped)
+ * @property {number} scale - Used to apply a scale on the elevation value. It
+ * can be used for exageration of the elevation, like in [this
+ * example](https://www.itowns-project.org/itowns/examples/#plugins_pyramidal_tiff).
+ * @property {boolean} useColorTextureElevation - the elevation is computed with one color texture channel,
+ * `this.colorTextureElevationMaxZ` and `this.colorTextureElevationMinZ`.
+ *
+ * The formula is:
+ *
+ * ```js
+ * elevation = color.r * (this.colorTextureElevationMaxZ - this.colorTextureElevationMinZ) + this.colorTextureElevationMinZ
+ * ```
+ * @property {number} colorTextureElevationMinZ - elevation minimum in `useColorTextureElevation` mode.
+ * @property {number} colorTextureElevationMaxZ - elevation maximum in `useColorTextureElevation` mode.
+ *
+ * @extends RasterLayer
+ */
+class ElevationLayer extends RasterLayer {
+  /**
+   * A simple layer, managing an elevation texture to add some reliefs on the
+   * plane or globe view for example.
+   *
+   * @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.
+   * @param {Object} [config] - Optional configuration, all elements in it
+   * will be merged as is in the layer. For example, if the configuration
+   * contains three elements `name, protocol, extent`, these elements will be
+   * available using `layer.name` or something else depending on the property
+   * name.
+   * @param {number} [config.noDataValue]   The value coding the noData in the data set
+   * @param {Object} [config.clampValues] - Optional information for clamping
+   * the elevation between a minimum and a maximum value
+   * @param {number} [config.clampValues.min]   The minimum value to clamp the elevation
+   * @param {number} [config.clampValues.max]   The maximum value to clamp the elevation
+   *
+   * @example
+   * // Create an ElevationLayer
+   * const elevation = new ElevationLayer('IGN_MNT', {
+   *      source: new WMTSSource({
+   *          "url": "https://data.geopf.fr/wmts?",
+   *           "crs": "EPSG:4326",
+   *           "format": "image/x-bil;bits=32",
+   *           "name": "ELEVATION.ELEVATIONGRIDCOVERAGE",
+   *      }),
+   * });
+   *
+   * // Add the layer
+   * view.addLayer(elevation);
+   */
+  constructor(id) {
+    let config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    const {
+      scale = 1.0,
+      noDataValue,
+      clampValues,
+      useRgbaTextureElevation,
+      useColorTextureElevation,
+      colorTextureElevationMinZ,
+      colorTextureElevationMaxZ,
+      bias,
+      mode,
+      ...rasterConfig
+    } = config;
+    super(id, rasterConfig);
+
+    /**
+     * @type {boolean}
+     * @readonly
+     */
+    this.isElevationLayer = true;
+    this.noDataValue = noDataValue;
+    if (config.zmin || config.zmax) {
+      console.warn('Config using zmin and zmax are deprecated, use {clampValues: {min, max}} structure.');
+    }
+
+    /**
+     * @type {number | undefined}
+     */
+    this.zmin = clampValues?.min ?? config.zmin;
+
+    /**
+     * @type {number | undefined}
+     */
+    this.zmax = clampValues?.max ?? config.zmax;
+    this.defineLayerProperty('scale', scale);
+    this.useRgbaTextureElevation = useRgbaTextureElevation;
+    this.useColorTextureElevation = useColorTextureElevation;
+    this.colorTextureElevationMinZ = colorTextureElevationMinZ;
+    this.colorTextureElevationMaxZ = colorTextureElevationMaxZ;
+    this.bias = bias;
+    this.mode = mode;
+  }
+
+  /**
+   * Setup RasterElevationTile added to TileMesh. This RasterElevationTile handles
+   * the elevation texture to displace TileMesh vertices.
+   *
+   * @param      {TileMesh}  node    The node to apply new RasterElevationTile;
+   * @return     {RasterElevationTile}  The raster elevation node added.
+   */
+  setupRasterNode(node) {
+    const rasterElevationNode = new RasterElevationTile(node.material, this);
+    node.material.addLayer(rasterElevationNode);
+    node.material.setSequenceElevation(this.id);
+    // bounding box initialisation
+    const updateBBox = () => node.setBBoxZ({
+      min: rasterElevationNode.min,
+      max: rasterElevationNode.max,
+      scale: this.scale
+    });
+    updateBBox();
+
+    // listen elevation updating
+    rasterElevationNode.addEventListener('rasterElevationLevelChanged', updateBBox);
+
+    // listen scaling elevation updating
+    this.addEventListener('scale-property-changed', updateBBox);
+    // remove scaling elevation updating if node is removed
+    node.addEventListener('dispose', () => {
+      this.removeEventListener('scale-property-changed', updateBBox);
+    });
+    return rasterElevationNode;
+  }
+  update(context, layer, node, parent) {
+    return updateLayeredMaterialNodeElevation(context, this, node, parent);
+  }
+}
+export default ElevationLayer;

package/lib/Layer/EntwinePointTileLayer.js

@@ -0,0 +1,71 @@
+import * as THREE from 'three';
+import EntwinePointTileNode from "../Core/EntwinePointTileNode.js";
+import PointCloudLayer from "./PointCloudLayer.js";
+import { Extent } from '@itowns/geographic';
+const bboxMesh = new THREE.Mesh();
+const box3 = new THREE.Box3();
+bboxMesh.geometry.boundingBox = box3;
+
+/**
+ * @property {boolean} isEntwinePointTileLayer - Used to checkout whether this
+ * layer is a EntwinePointTileLayer. Default is `true`. You should not change
+ * this, as it is used internally for optimisation.
+ *
+ * @extends PointCloudLayer
+ */
+class EntwinePointTileLayer extends PointCloudLayer {
+  /**
+   * Constructs a new instance of Entwine Point Tile layer.
+   *
+   * @example
+   * // Create a new point cloud layer
+   * const points = new EntwinePointTileLayer('EPT',
+   *  {
+   *      source: new EntwinePointTileSource({
+   *          url: 'https://server.geo/ept-dataset',
+   *      }
+   *  });
+   *
+   * View.prototype.addLayer.call(view, points);
+   *
+   * @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.
+   * @param {Object} config - Configuration, all elements in it
+   * will be merged as is in the layer. For example, if the configuration
+   * 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
+   * 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.isEntwinePointTileLayer = true;
+
+    /**
+     * @type {THREE.Vector3}
+     */
+    this.scale = new THREE.Vector3(1, 1, 1);
+    const resolve = this.addInitializationStep();
+    this.whenReady = this.source.whenReady.then(() => {
+      this.root = new EntwinePointTileNode(0, 0, 0, 0, this, -1);
+      this.root.bbox.min.fromArray(this.source.boundsConforming, 0);
+      this.root.bbox.max.fromArray(this.source.boundsConforming, 3);
+      this.minElevationRange = this.minElevationRange ?? this.source.boundsConforming[2];
+      this.maxElevationRange = this.maxElevationRange ?? this.source.boundsConforming[5];
+      this.extent = Extent.fromBox3(config.crs || 'EPSG:4326', this.root.bbox);
+      return this.root.loadOctree().then(resolve);
+    });
+  }
+  get spacing() {
+    return this.source.spacing;
+  }
+}
+export default EntwinePointTileLayer;

package/lib/Layer/FeatureGeometryLayer.js

@@ -0,0 +1,77 @@
+import { Group } from 'three';
+import GeometryLayer from "./GeometryLayer.js";
+import FeatureProcessing from "../Process/FeatureProcessing.js";
+import Feature2Mesh from "../Converter/Feature2Mesh.js";
+
+/**
+ * `FeatureGeometryLayer` displays geographic vector data (geojson, kml...) in object 3D.
+ * `FeatureGeometryLayer` is a pre-configured `GeometryLayer` to load and convert vector data.
+ * In deed, `GeometryLayer` allows customizing data loading (`update` method)
+ * and their conversion (`convert` method),
+ *
+ * @property {boolean} isFeatureGeometryLayer - Used to checkout whether this layer is
+ * a FeatureGeometryLayer. Default is true. You should not change this, as it is used
+ * internally for optimisation.
+ *
+ * @extends GeometryLayer
+ */
+class FeatureGeometryLayer 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.
+   * @param {Object} [options] - Optional configuration, all elements in it
+   * will be merged as is in the layer.
+   * @param {function} [options.batchId] - optional function to create batchId attribute.
+   * It is passed the feature property and the feature index.
+   * As the batchId is using an unsigned int structure on 32 bits, the batchId could be between 0 and 4,294,967,295.
+   * @param {THREE.Object3D} [options.object3d=new THREE.Group()] root object3d layer.
+   * @param {function} [options.onMeshCreated] this callback is called when the mesh is created. The callback parameters are the
+   * `mesh` and the `context`.
+   * @param {function} [options.filter] callback which filters the features of
+   * this layer. It takes an object with a `properties` property as argument
+   * and shall return a boolean.
+   * @param {boolean} [options.accurate=TRUE] If `accurate` is `true`, data are re-projected with maximum geographical accuracy.
+   * With `true`, `proj4` is used to transform data source.
+   *
+   * If `accurate` is `false`, re-projecting is faster but less accurate.
+   * With `false`, an affine transformation is used to transform data source.
+   * This method is an approximation. The error increases with the extent
+   * dimension of the object or queries.
+   *
+   * For example :
+   * * for a **100** meter dimension, there's a difference of **0.001** meter with the accurate method
+   * * for a **500** meter dimension, there's a difference of **0.05** meter with the accurate method
+   * * for a **20000** meter dimension, there's a difference of **40** meter with the accurate method
+   *
+   * **WARNING** If the source is `VectorTilesSource` then `accurate` is always false.
+   */
+  constructor(id) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    const {
+      object3d,
+      batchId,
+      onMeshCreated,
+      accurate = true,
+      filter,
+      ...geometryOptions
+    } = options;
+    super(id, object3d || new Group(), geometryOptions);
+    this.update = FeatureProcessing.update;
+    this.convert = Feature2Mesh.convert({
+      batchId
+    });
+    this.onMeshCreated = onMeshCreated;
+    this.isFeatureGeometryLayer = true;
+    this.accurate = accurate;
+    this.buildExtent = !this.accurate;
+    this.filter = filter;
+  }
+  preUpdate(context, sources) {
+    if (sources.has(this.parent)) {
+      this.object3d.clear();
+    }
+  }
+}
+export default FeatureGeometryLayer;

package/lib/Layer/GeoidLayer.js

@@ -0,0 +1,80 @@
+import Layer from "./Layer.js";
+import LayerUpdateState from "./LayerUpdateState.js";
+export function geoidLayerIsVisible(tilelayer) {
+  return tilelayer?.attachedLayers.filter(l => l.isGeoidLayer)[0]?.visible;
+}
+
+/**
+ * `GeoidLayer` is a specific `{@link Layer}` which supports geoid height data. When added to a `{@link View}`, it
+ * vertically translates each of the view's tiles by a proper geoid height value. For a given tile, the geoid height
+ * value used for translation is the geoid height computed at the center of the tile.
+ *
+ * @example
+ * // Create a GeoidLayer from a GTX geoid heights file.
+ * const geoidLayer = new GeoidLayer('geoid', {
+ *     source: new FileSource({
+ *         url: 'url-to-some-GTX-geoid-heights-file.gtx',
+ *         crs: 'EPSG:4326',
+ *         format: 'application/gtx',
+ *     }),
+ * });
+ */
+class GeoidLayer extends Layer {
+  /**
+   * Creates a new instance of `GeoidLayer`.
+   *
+   * @param   {string}    id              An unique identifier for the layer.
+   * @param   {Object}    config          The layer configuration. All elements in it will be merged as is in the
+                                          * layer. For example, if the configuration contains three elements `name,
+                                          * protocol, extent`, these elements will be available using `layer.name` or
+                                          * something else depending on the property name. Only `config.source`
+                                          * parameter is mandatory.
+   * @param   {Object}    config.source   The source of the geoid data displayed by the `GeoidLayer`. It is mandatory
+                                          * that the source data for a `GeoidLayer` be parsed into a
+                                          * `{@link GeoidGrid}`. You can refer to `{@link GTXParser}`,
+                                          * `{@link GDFParser}` and `{@link ISGParser}` to see how three standard
+                                          * geoid height grid file formats are parsed into `{@link GeoidGrid}`.
+   */
+  constructor(id) {
+    let config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    super(id, config);
+    this.isGeoidLayer = true;
+    this.defineLayerProperty('visible', true);
+  }
+  updateNodeZ(node) {
+    node.material.geoidHeight = this.visible ? node.geoidHeight : 0;
+    node.obb.updateZ({
+      geoidHeight: node.material.geoidHeight
+    });
+  }
+  update(context, layer, node, parent) {
+    if (!parent || !node.material) {
+      return;
+    }
+
+    // Don't update tile if its zoom is not within the layer's zoom limits
+    const extentsDestination = node.getExtentsByProjection(layer.crs);
+    const zoom = extentsDestination[0].zoom;
+    if (zoom > layer.zoom.max || zoom < layer.zoom.min) {
+      return;
+    }
+    if (node.layerUpdateState[layer.id] === undefined) {
+      node.layerUpdateState[layer.id] = new LayerUpdateState();
+      const updateNodeZ = () => this.updateNodeZ(node);
+      layer.addEventListener('visible-property-changed', updateNodeZ);
+      node.addEventListener('dispose', () => {
+        layer.removeEventListener('visible-property-changed', updateNodeZ);
+      });
+    }
+    if (layer.frozen || !layer.visible || !node.material.visible || !node.layerUpdateState[layer.id].canTryUpdate()) {
+      return;
+    }
+    node.layerUpdateState[layer.id].newTry();
+    return this.getData(node.extent, extentsDestination).then(result => {
+      node.geoidHeight = result.getHeightAtCoordinates(node.extent.center());
+      this.updateNodeZ(node);
+      node.layerUpdateState[layer.id].noMoreUpdatePossible();
+    });
+  }
+}
+export default GeoidLayer;

package/lib/Layer/GeometryLayer.js

@@ -0,0 +1,233 @@
+import Layer from "./Layer.js";
+import Picking from "../Core/Picking.js";
+import { CACHE_POLICIES } from "../Core/Scheduler/Cache.js";
+import ObjectRemovalHelper from "../Process/ObjectRemovalHelper.js";
+
+/**
+ * Fires when the opacity of the layer has changed.
+ * @event GeometryLayer#opacity-property-changed
+ */
+
+/**
+ * @property {boolean} isGeometryLayer - Used to checkout whether this layer is
+ * a GeometryLayer. Default is true. You should not change this, as it is used
+ * internally for optimisation.
+ * @property {number} [zoom.max=Infinity] - this is the maximum zoom beyond which it'll be hidden.
+ * The `max` is constant and the value is `Infinity` because there's no maximum display level after which it is hidden.
+ * This property is used only if the layer is attached to {@link TiledGeometryLayer}.
+ * @property {number} [zoom.min=0] - this is the minimum zoom from which it'll be visible.
+ * This property is used only if the layer is attached to {@link TiledGeometryLayer}.
+ */
+class GeometryLayer extends Layer {
+  /**
+   * A layer usually managing a geometry to display on a view. For example, it
+   * can be a layer of buildings extruded from a a WFS stream.
+   *
+   * @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.
+   * @param {THREE.Object3D} object3d - The object3D used to contain the
+   * geometry of the GeometryLayer. It is usually a `THREE.Group`, but it can
+   * be anything inheriting from a `THREE.Object3D`.
+   * @param {Object} [config] - Optional configuration, all elements in it
+   * will be merged as is in the layer. For example, if the configuration
+   * contains three elements `name, protocol, extent`, these elements will be
+   * available using `layer.name` or something else depending on the property
+   * name.
+   * @param {Source} config.source - Description and options of the source.
+   * @param {number} [config.cacheLifeTime=Infinity] - set life time value in cache.
+   * This value is used for [Cache]{@link Cache} expiration mechanism.
+   * @param {boolean} [config.visible]
+   *
+   * @throws {Error} `object3d` must be a valid `THREE.Object3d`.
+   *
+   * @example
+   * // Create a GeometryLayer
+   * const geometry = new GeometryLayer('buildings', new THREE.Object3D(), {
+   *      source: {
+   *          url: 'http://server.geo/wfs?',
+   *          protocol: 'wfs',
+   *          format: 'application/json'
+   *      },
+   * });
+   *
+   * // Add the layer
+   * view.addLayer(geometry);
+   */
+  constructor(id, object3d) {
+    let config = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    const {
+      cacheLifeTime = CACHE_POLICIES.GEOMETRY,
+      visible = true,
+      opacity = 1.0,
+      ...layerConfig
+    } = config;
+    super(id, {
+      ...layerConfig,
+      cacheLifeTime
+    });
+
+    /**
+     * @type {boolean}
+     * @readonly
+     */
+    this.isGeometryLayer = true;
+    if (!object3d || !object3d.isObject3D) {
+      throw new Error(`Missing/Invalid object3d parameter (must be a
+                three.js Object3D instance)`);
+    }
+    if (object3d.type === 'Group' && object3d.name === '') {
+      object3d.name = id;
+    }
+
+    /**
+     * @type {THREE.Object3D}
+     * @readonly
+     */
+    this.object3d = object3d;
+    Object.defineProperty(this, 'object3d', {
+      writable: false,
+      configurable: true
+    });
+
+    /**
+     * @type {number}
+     */
+    this.opacity = opacity;
+
+    /**
+     * @type {boolean}
+     */
+    this.wireframe = false;
+
+    /**
+     * @type {Layer[]}
+     */
+    this.attachedLayers = [];
+
+    /**
+     * @type {boolean}
+     */
+    this.visible = visible;
+    Object.defineProperty(this.zoom, 'max', {
+      value: Infinity,
+      writable: false
+    });
+
+    // Feature options
+    this.filteringExtent = !this.source.isFileSource;
+    this.structure = '3d';
+  }
+  get visible() {
+    return this.object3d.visible;
+  }
+  set visible(value) {
+    if (this.object3d.visible !== value) {
+      const event = {
+        type: 'visible-property-changed',
+        previous: {},
+        new: {}
+      };
+      event.previous.visible = this.object3d.visible;
+      event.new.visible = value;
+      this.dispatchEvent(event);
+      this.object3d.visible = value;
+    }
+  }
+
+  // Attached layers expect to receive the visual representation of a
+  // layer (= THREE object with a material).  So if a layer's update
+  // function don't process this kind of object, the layer must provide a
+  // getObjectToUpdateForAttachedLayers function that returns the correct
+  // object to update for attached layer.
+  // See 3dtilesLayer or PotreeLayer for examples.
+  // eslint-disable-next-line arrow-body-style
+  getObjectToUpdateForAttachedLayers(obj) {
+    if (obj.parent && obj.material) {
+      return {
+        element: obj,
+        parent: obj.parent
+      };
+    }
+  }
+
+  // Placeholder
+  // eslint-disable-next-line
+  postUpdate() {}
+
+  // Placeholder
+  // eslint-disable-next-line
+  culling() {
+    return true;
+  }
+
+  /**
+   * Attach another layer to this one. Layers attached to a GeometryLayer will
+   * be available in `geometryLayer.attachedLayers`.
+   *
+   * @param {Layer} layer - The layer to attach, that must have an `update`
+   * method.
+   */
+  attach(layer) {
+    if (!layer.update) {
+      throw new Error(`Missing 'update' function -> can't attach layer
+                ${layer.id}`);
+    }
+    this.attachedLayers.push(layer);
+    // To traverse GeometryLayer object3d attached
+    layer.parent = this;
+  }
+
+  /**
+   * Detach a layer attached to this one. See {@link attach} to learn how to
+   * attach a layer.
+   *
+   * @param {Layer} layer - The layer to detach.
+   *
+   * @return {boolean} Confirmation of the detachment of the layer.
+   */
+  detach(layer) {
+    const count = this.attachedLayers.length;
+    this.attachedLayers = this.attachedLayers.filter(attached => attached.id != layer.id);
+    layer.parent = undefined;
+    return this.attachedLayers.length < count;
+  }
+
+  /**
+   * All layer's 3D objects are removed from the scene and disposed from the video device.
+   * @param {boolean} [clearCache=false] Whether to clear the layer cache or not
+   */
+  delete(clearCache) {
+    if (clearCache) {
+      this.cache.clear();
+    }
+
+    // if Layer is attached
+    if (this.parent) {
+      ObjectRemovalHelper.removeChildrenAndCleanupRecursively(this, this.parent.object3d);
+    }
+    if (this.object3d.parent) {
+      this.object3d.parent.remove(this.object3d);
+    }
+    ObjectRemovalHelper.removeChildrenAndCleanupRecursively(this, this.object3d);
+  }
+
+  /**
+   * Picking method for this layer.
+   *
+   * @param {View} view - The view instance.
+   * @param {Object} coordinates - The coordinates to pick in the view. It
+   * should have at least `x` and `y` properties.
+   * @param {number} radius - Radius of the picking circle.
+   * @param {Array} target - target to push result.
+   *
+   * @return {Array} An array containing all targets picked under the
+   * specified coordinates.
+   */
+  pickObjectsAt(view, coordinates) {
+    let radius = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.options.defaultPickingRadius;
+    let target = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
+    return Picking.pickObjectsAt(view, coordinates, radius, this.object3d, target);
+  }
+}
+export default GeometryLayer;

package/lib/Layer/InfoLayer.js

@@ -0,0 +1,64 @@
+import { Extent } from '@itowns/geographic';
+export default class InfoLayer {
+  constructor(layer) {
+    this.layer = layer;
+  }
+  // eslint-disable-next-line
+  clear() {}
+  // eslint-disable-next-line
+  update() {}
+}
+
+/**
+ * InfoTiledGeometryLayer that provides some states layer informations. These
+ * informations are displayed tiles, displayed {@link ColorLayer} and {@link
+ * ElevationLayer} and extent of displayed tiles.
+ *
+ * @class InfoTiledGeometryLayer
+ *
+ * @property {object} displayed
+ * @property {Layer[]} displayed.layers - Displayed {@link ColorLayer} and {@link ElevationLayer}.
+ * @property {Extent} displayed.extent - {@link Extent} of displayed tiles.
+ * @property {Set} displayed.tiles - Set of displayed tiles.
+ */
+export class InfoTiledGeometryLayer extends InfoLayer {
+  constructor(tiledGeometryLayer) {
+    super(tiledGeometryLayer);
+    this.displayed = {
+      tiles: new Set()
+    };
+    Object.defineProperty(this.displayed, 'layers', {
+      get: () => {
+        let layers = [];
+        this.displayed.tiles.forEach(tile => {
+          const m = tile.material;
+          layers = [...new Set([...layers, ...m.colorLayerIds.filter(id => m.getLayer(id)), ...m.elevationLayerIds])];
+        });
+        return this.layer.attachedLayers.filter(l => layers.includes(l.id));
+      }
+    });
+    Object.defineProperty(this.displayed, 'extent', {
+      get: () => {
+        const extent = new Extent(this.layer.extent.crs, Infinity, -Infinity, Infinity, -Infinity);
+        extent.min = +Infinity;
+        extent.max = -Infinity;
+        this.displayed.tiles.forEach(tile => {
+          extent.union(tile.extent);
+          extent.min = Math.min(tile.obb.z.min, extent.min);
+          extent.max = Math.max(tile.obb.z.max, extent.max);
+        });
+        return extent;
+      }
+    });
+  }
+  clear() {
+    this.displayed.tiles.clear();
+  }
+  update(tile) {
+    if (tile.material.visible) {
+      this.displayed.tiles.add(tile);
+    } else {
+      this.displayed.tiles.delete(tile);
+    }
+  }
+}