itowns 2.44.3-next.4 → 2.44.3-next.40

package/lib/Layer/GeometryLayer.js

@@ -23,8 +23,6 @@ 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.
    *
-   * @extends Layer
-   *
    * @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.
@@ -36,7 +34,10 @@ class GeometryLayer extends Layer {
    * 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 {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`.
    *
@@ -55,12 +56,21 @@ class GeometryLayer extends Layer {
    */
   constructor(id, object3d) {
     let config = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-    config.cacheLifeTime = config.cacheLifeTime ?? CACHE_POLICIES.GEOMETRY;
+    const {
+      cacheLifeTime = CACHE_POLICIES.GEOMETRY,
+      visible = true,
+      opacity = 1.0,
+      ...layerConfig
+    } = config;
+    super(id, {
+      ...layerConfig,
+      cacheLifeTime
+    });
 
-    // Remove this part when Object.assign(this, config) will be removed from Layer Constructor
-    const visible = config.visible;
-    delete config.visible;
-    super(id, config);
+    /**
+     * @type {boolean}
+     * @readonly
+     */
     this.isGeometryLayer = true;
     if (!object3d || !object3d.isObject3D) {
       throw new Error(`Missing/Invalid object3d parameter (must be a
@@ -69,15 +79,36 @@ class GeometryLayer extends Layer {
     if (object3d.type === 'Group' && object3d.name === '') {
       object3d.name = id;
     }
+
+    /**
+     * @type {THREE.Object3D}
+     * @readonly
+     */
+    this.object3d = object3d;
     Object.defineProperty(this, 'object3d', {
-      value: object3d,
       writable: false,
       configurable: true
     });
-    this.opacity = 1.0;
+
+    /**
+     * @type {number}
+     */
+    this.opacity = opacity;
+
+    /**
+     * @type {boolean}
+     */
     this.wireframe = false;
+
+    /**
+     * @type {Layer[]}
+     */
     this.attachedLayers = [];
-    this.visible = visible ?? true;
+
+    /**
+     * @type {boolean}
+     */
+    this.visible = visible;
     Object.defineProperty(this.zoom, 'max', {
       value: Infinity,
       writable: false

package/lib/Layer/LabelLayer.js

@@ -5,7 +5,6 @@ import GeometryLayer from "./GeometryLayer.js";
 import Coordinates from "../Core/Geographic/Coordinates.js";
 import Extent from "../Core/Geographic/Extent.js";
 import Label from "../Core/Label.js";
-import { FEATURE_TYPES } from "../Core/Feature.js";
 import { readExpression, StyleContext } from "../Core/Style.js";
 import { ScreenGrid } from "../Renderer/Label2DRenderer.js";
 const context = new StyleContext();
@@ -168,17 +167,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,21 +221,26 @@ 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) {
-        return;
+      if (f.style.text) {
+        if (Object.keys(f.style.text).length === 0) {
+          return;
+        }
       }
       context.setFeature(f);
       const featureField = f.style?.text?.field;
@@ -242,19 +252,11 @@ class LabelLayer extends GeometryLayer {
       // determine if the altitude needs update with ElevationLayer
       labels.needsAltitude = labels.needsAltitude || this.forceClampToTerrain === true || isDefaultElevationStyle && !f.hasRawElevationData;
       f.geometries.forEach(g => {
-        // NOTE: this only works because only POINT is supported, it
-        // needs more work for LINE and POLYGON
-        coord.setFromArray(f.vertices, g.size * g.indices[0].offset);
-        // Transform coordinate to data.crs projection
-        coord.applyMatrix4(data.matrixWorld);
-        if (!_extent.isPointInside(coord)) {
-          return;
-        }
-        const geometryField = g.properties.style && g.properties.style.text && g.properties.style.text.field;
         context.setGeometry(g);
-        let content;
         this.style.setContext(context);
         const layerField = this.style.text && this.style.text.field;
+        const geometryField = g.properties.style && g.properties.style.text && g.properties.style.text.field;
+        let content;
         if (this.labelDomelement) {
           content = readExpression(this.labelDomelement, context);
         } else if (!geometryField && !featureField && !layerField) {
@@ -263,10 +265,26 @@ class LabelLayer extends GeometryLayer {
             return;
           }
         }
-        const label = new Label(content, coord.clone(), this.style);
-        label.layerId = this.id;
-        label.padding = this.margin || label.padding;
-        labels.push(label);
+        if (this.style.zoom.min > this.style.context.zoom || this.style.zoom.max <= this.style.context.zoom) {
+          return;
+        }
+
+        // NOTE: this only works fine for POINT.
+        // It needs more work for LINE and POLYGON as we currently only use the first point of the entity
+
+        g.indices.forEach(i => {
+          coord.setFromArray(f.vertices, g.size * i.offset);
+          // Transform coordinate to data.crs projection
+          coord.applyMatrix4(data.matrixWorld);
+          if (!_extent.isPointInside(coord)) {
+            return;
+          }
+          const label = new Label(content, coord.clone(), this.style);
+          label.layerId = this.id;
+          label.order = f.order;
+          label.padding = this.margin || label.padding;
+          labels.push(label);
+        });
       });
     });
     return labels;

package/lib/Layer/Layer.js

@@ -2,7 +2,7 @@ import * as THREE from 'three';
 import { STRATEGY_MIN_NETWORK_TRAFFIC } from "./LayerUpdateStrategy.js";
 import InfoLayer from "./InfoLayer.js";
 import Source from "../Source/Source.js";
-import Cache from "../Core/Scheduler/Cache.js";
+import { LRUCache } from 'lru-cache';
 import Style from "../Core/Style.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,17 @@ 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 LRUCache({
+      max: 500,
+      ...(cacheLifeTime !== Infinity && {
+        ttl: cacheLifeTime
+      })
+    });
+    this.mergeFeatures = mergeFeatures;
   }
   addInitializationStep() {
     // Possibility to add rejection handler, if it's necessary.
@@ -232,26 +272,17 @@ class Layer extends THREE.EventDispatcher {
     return data;
   }
   getData(from, to) {
-    const key = this.source.requestToKey(this.source.isVectorSource ? to : from);
-    let data = this.cache.getByArray(key);
+    const key = this.source.getDataKey(this.source.isVectorSource ? to : from);
+    let data = this.cache.get(key);
     if (!data) {
       data = this.source.loadData(from, this).then(feat => this.convert(feat, to), err => {
         throw err;
       });
-      this.cache.setByArray(data, key);
+      this.cache.set(key, data);
     }
     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