Get pixel data

test/browser/spec/ol/layer/Image.test.js

@@ -0,0 +1,75 @@
+import ImageLayer from '../../../../../src/ol/layer/Image.js';
+import Map from '../../../../../src/ol/Map.js';
+import Static from '../../../../../src/ol/source/ImageStatic.js';
+import View from '../../../../../src/ol/View.js';
+import {Projection} from '../../../../../src/ol/proj.js';
+
+describe('ol/layer/Image', () => {
+  describe('getData()', () => {
+    let map, target, layer;
+
+    beforeEach((done) => {
+      const projection = new Projection({
+        code: 'custom-image',
+        units: 'pixels',
+        extent: [0, 0, 200, 200],
+      });
+
+      target = document.createElement('div');
+      target.style.width = '100px';
+      target.style.height = '100px';
+      document.body.appendChild(target);
+
+      const imageExtent = [0, 0, 20, 20];
+      const source = new Static({
+        url: 'spec/ol/data/dot.png',
+        projection: projection,
+        imageExtent: imageExtent,
+      });
+
+      layer = new ImageLayer({
+        source: source,
+        extent: imageExtent,
+      });
+
+      map = new Map({
+        pixelRatio: 1,
+        target: target,
+        layers: [layer],
+        view: new View({
+          projection: projection,
+          center: [10, 10],
+          zoom: 1,
+          maxZoom: 8,
+        }),
+      });
+      map.once('rendercomplete', () => {
+        done();
+      });
+    });
+
+    afterEach(() => {
+      map.setTarget(null);
+      document.body.removeChild(target);
+    });
+
+    it('should not detect pixels outside of the layer extent', () => {
+      map.renderSync();
+      const pixel = [10, 10];
+      const data = layer.getData(pixel);
+      expect(data).to.be(null);
+    });
+
+    it('should detect pixels in the layer extent', () => {
+      map.renderSync();
+      const pixel = [50, 50];
+      const data = layer.getData(pixel);
+      expect(data).to.be.a(Uint8ClampedArray);
+      expect(data.length).to.be(4);
+      expect(data[0]).to.be(255);
+      expect(data[1]).to.be(255);
+      expect(data[2]).to.be(255);
+      expect(data[3]).to.be(255);
+    });
+  });
+});

test/browser/spec/ol/layer/Tile.test.js

@@ -2,7 +2,7 @@ import TileLayer from '../../../../../src/ol/layer/Tile.js';
 import {Map, View} from '../../../../../src/ol/index.js';
 import {OSM, XYZ} from '../../../../../src/ol/source.js';
 
-describe('ol.layer.Tile', function () {
+describe('ol/layer/Tile', function () {
   describe('constructor (defaults)', function () {
     let layer;
 
@@ -29,6 +29,48 @@ describe('ol.layer.Tile', function () {
     });
   });
 
+  describe('getData()', () => {
+    let map, target, layer;
+    beforeEach((done) => {
+      target = document.createElement('div');
+      target.style.width = '100px';
+      target.style.height = '100px';
+      document.body.appendChild(target);
+
+      layer = new TileLayer({
+        source: new XYZ({
+          url: 'spec/ol/data/osm-0-0-0.png',
+        }),
+      });
+
+      map = new Map({
+        target: target,
+        layers: [layer],
+        view: new View({
+          center: [0, 0],
+          zoom: 0,
+        }),
+      });
+
+      map.once('rendercomplete', () => done());
+    });
+
+    afterEach(() => {
+      map.setTarget(null);
+      document.body.removeChild(target);
+    });
+
+    it('gets pixel data', () => {
+      const data = layer.getData([50, 50]);
+      expect(data).to.be.a(Uint8ClampedArray);
+      expect(data.length).to.be(4);
+      expect(data[0]).to.be(181);
+      expect(data[1]).to.be(208);
+      expect(data[2]).to.be(208);
+      expect(data[3]).to.be(255);
+    });
+  });
+
   describe('frameState.animate after tile transition with layer opacity', function () {
     let target, map;
 

test/browser/spec/ol/layer/WebGLTile.test.js

@@ -1,4 +1,5 @@
 import DataTileSource from '../../../../../src/ol/source/DataTile.js';
+import GeoTIFF from '../../../../../src/ol/source/GeoTIFF.js';
 import Map from '../../../../../src/ol/Map.js';
 import View from '../../../../../src/ol/View.js';
 import WebGLHelper from '../../../../../src/ol/webgl/Helper.js';
@@ -53,6 +54,80 @@ describe('ol/layer/WebGLTile', function () {
     map.getLayers().forEach((layer) => layer.dispose());
   });
 
+  describe('getData()', () => {
+    /** @type {Map} */
+    let map;
+    let target;
+
+    beforeEach(() => {
+      target = document.createElement('div');
+      target.style.width = '100px';
+      target.style.height = '100px';
+      document.body.appendChild(target);
+      map = new Map({
+        target: target,
+      });
+    });
+
+    afterEach(() => {
+      map.setTarget(null);
+      document.body.removeChild(target);
+    });
+
+    it('retrieves pixel data', (done) => {
+      const source = new GeoTIFF({
+        sources: [{url: 'spec/ol/source/images/0-0-0.tif'}],
+      });
+
+      const layer = new WebGLTileLayer({source: source});
+
+      map.addLayer(layer);
+      map.setView(source.getView());
+
+      map.once('rendercomplete', () => {
+        const data = layer.getData([50, 25]);
+        expect(data).to.be.a(Uint8Array);
+        expect(data.length).to.be(4);
+        expect(data[0]).to.be(255);
+        expect(data[1]).to.be(189);
+        expect(data[2]).to.be(103);
+        expect(data[3]).to.be(255);
+        done();
+      });
+    });
+
+    it('preserves the original data type', (done) => {
+      const layer = new WebGLTileLayer({
+        source: new DataTileSource({
+          tilePixelRatio: 1 / 256,
+          loader(z, x, y) {
+            return new Float32Array([1.11, 2.22, 3.33, 4.44, 5.55]);
+          },
+        }),
+      });
+
+      map.addLayer(layer);
+      map.setView(
+        new View({
+          center: [0, 0],
+          zoom: 0,
+        })
+      );
+
+      map.once('rendercomplete', () => {
+        const data = layer.getData([50, 25]);
+        expect(data).to.be.a(Float32Array);
+        expect(data.length).to.be(5);
+        expect(data[0]).to.roughlyEqual(1.11, 1e-5);
+        expect(data[1]).to.roughlyEqual(2.22, 1e-5);
+        expect(data[2]).to.roughlyEqual(3.33, 1e-5);
+        expect(data[3]).to.roughlyEqual(4.44, 1e-5);
+        expect(data[4]).to.roughlyEqual(5.55, 1e-5);
+        done();
+      });
+    });
+  });
+
   describe('dispose()', () => {
     it('calls dispose on the renderer', () => {
       const renderer = layer.getRenderer();

test/browser/spec/ol/renderer/canvas/ImageLayer.test.js

@@ -10,7 +10,7 @@ import VectorSource from '../../../../../../src/ol/source/Vector.js';
 import View from '../../../../../../src/ol/View.js';
 import {get as getProj} from '../../../../../../src/ol/proj.js';
 
-describe('ol.renderer.canvas.ImageLayer', function () {
+describe('ol/renderer/canvas/ImageLayer', function () {
   describe('#forEachLayerAtCoordinate', function () {
     let map, target, source;
     beforeEach(function (done) {

test/browser/spec/ol/webgl/TileTexture.test.js

@@ -42,11 +42,11 @@ describe('ol/webgl/TileTexture', function () {
       mapId: 'map-1',
     });
 
-    tileTexture = new TileTexture(
-      layer.getSource().getTile(3, 2, 1),
-      layer.getSource().getTileGrid(),
-      renderer.helper
-    );
+    tileTexture = new TileTexture({
+      tile: layer.getSource().getTile(3, 2, 1),
+      grid: layer.getSource().getTileGrid(),
+      helper: renderer.helper,
+    });
   });
 
   afterEach(() => {