Merge pull request #13338 from tschaub/get-layer-data

Get pixel data

src/ol/layer/BaseTile.js

@@ -136,6 +136,26 @@ class BaseTileLayer extends Layer {
   setUseInterimTilesOnError(useInterimTilesOnError) {
     this.set(TileProperty.USE_INTERIM_TILES_ON_ERROR, useInterimTilesOnError);
   }
+
+  /**
+   * Get data for a pixel location.  The return type depends on the source data.  For image tiles,
+   * a four element RGBA array will be returned.  For data tiles, the array length will match the
+   * number of bands in the dataset.  For requests outside the layer extent, `null` will be returned.
+   * Data for a image tiles can only be retrieved if the source's `crossOrigin` property is set.
+   *
+   * ```js
+   * // display layer data on every pointer move
+   * map.on('pointermove', (event) => {
+   *   console.log(layer.getData(event.pixel));
+   * });
+   * ```
+   * @param {import("../pixel").Pixel} pixel Pixel.
+   * @return {Uint8ClampedArray|Uint8Array|Float32Array|DataView|null} Pixel data.
+   * @api
+   */
+  getData(pixel) {
+    return super.getData(pixel);
+  }
 }
 
 export default BaseTileLayer;

src/ol/layer/Image.js

@@ -27,6 +27,25 @@ class ImageLayer extends BaseImageLayer {
   createRenderer() {
     return new CanvasImageLayerRenderer(this);
   }
+
+  /**
+   * Get data for a pixel location.  A four element RGBA array will be returned.  For requests outside the
+   * layer extent, `null` will be returned.  Data for an image can only be retrieved if the
+   * source's `crossOrigin` property is set.
+   *
+   * ```js
+   * // display layer data on every pointer move
+   * map.on('pointermove', (event) => {
+   *   console.log(layer.getData(event.pixel));
+   * });
+   * ```
+   * @param {import("../pixel").Pixel} pixel Pixel.
+   * @return {Uint8ClampedArray|Uint8Array|Float32Array|DataView|null} Pixel data.
+   * @api
+   */
+  getData(pixel) {
+    return super.getData(pixel);
+  }
 }
 
 export default ImageLayer;

src/ol/layer/Layer.js

@@ -146,6 +146,12 @@ class Layer extends BaseLayer {
      */
     this.renderer_ = null;
 
+    /**
+     * @protected
+     * @type {boolean}
+     */
+    this.rendered = false;
+
     // Overwrite default render method with a custom one
     if (options.render) {
       this.render = options.render;
@@ -250,6 +256,17 @@ class Layer extends BaseLayer {
     return this.renderer_.getFeatures(pixel);
   }
 
+  /**
+   * @param {import("../pixel").Pixel} pixel Pixel.
+   * @return {Uint8ClampedArray|Uint8Array|Float32Array|DataView|null} Pixel data.
+   */
+  getData(pixel) {
+    if (!this.renderer_ || !this.rendered) {
+      return null;
+    }
+    return this.renderer_.getData(pixel);
+  }
+
   /**
    * In charge to manage the rendering of the layer. One layer type is
    * bounded with one layer renderer.
@@ -262,15 +279,26 @@ class Layer extends BaseLayer {
     const layerRenderer = this.getRenderer();
 
     if (layerRenderer.prepareFrame(frameState)) {
+      this.rendered = true;
       return layerRenderer.renderFrame(frameState, target);
     }
   }
 
+  /**
+   * Called when a layer is not visible during a map render.
+   */
+  unrender() {
+    this.rendered = false;
+  }
+
   /**
    * For use inside the library only.
    * @param {import("../PluggableMap.js").default|null} map Map.
    */
   setMapInternal(map) {
+    if (!map) {
+      this.unrender();
+    }
     this.set(LayerProperty.MAP, map);
   }
 

src/ol/layer/WebGLTile.js

@@ -440,6 +440,7 @@ class WebGLTileLayer extends BaseTileLayer {
    * @return {HTMLElement} The rendered element.
    */
   render(frameState, target) {
+    this.rendered = true;
     const viewState = frameState.viewState;
     const sources = this.getSources(frameState.extent, viewState.resolution);
     let ready = true;