Query Raster Layer Data

[boeckMt]

Have there already been tests to access pixel data from raster layers, e.g. like this mapbox/mapbox-gl-js#1404?

I want to detect if a raster layer exists for a point on the map and also get the data (color) of it.

I tried to create a second map with only one layer and get the canvas data, but I think this is not good in performance and also the values are not what I expected.

[HarelM]

We have the render tests which compare pixels, not sure this is what you need though.

[boeckMt]

@HarelM thank you for your response!
Which tests exactly do you mean?

I want to get the source or layer ID when clicking or hovering over the map and also the color value of the canvas for it.

[HarelM]

https://github.com/maplibre/maplibre-gl-js/tree/e0daa5dd0153a8546e32265dfdd77051579d2a92/test/integration/render

The above are the render tests.
You can use preserveDrawingBuffer to get a picture out of the canvas and find the right position to test which color is there.
There might be other, easier ways using maybe the gl context, but I'm not super familiar with those.

[boeckMt]

@HarelM thanks for the reference to the test files and the other information like preserveDrawingBuffer and gl context.
If I get something that works, I will post it here.

[lucmartinon]

@boeckMt Hello there! It's been a year, but this is exactly what I would need, have you found a solution to the get the colour of the raster layer under the mouse? Thanks!

[boeckMt]

@lucmartinon I figured out how to get the color.
But unfortunately that wasn’t the solution for me, because I wanted to check whether it belongs to a special layer and this was not possible with this attempt.

I'm also not a specialist in working with canvas, so maybe there is a better solution : )

/**
 * https://github1s.com/jbeuckm/mapbox-gl-js/blob/1404-render-layer-for-pixel/src/render/painter.js#L765
 */
export function GetPixel(canvas: HTMLCanvasElement, x: number, y: number) {
  const devicePixelRatio = window.devicePixelRatio || 1;
  x = x * devicePixelRatio;
  y = y * devicePixelRatio;
  const context = canvas.getContext('2d') || canvas.getContext('webgl') || canvas.getContext('webgl2'); //  canvas.getContext('webgl2',{ preserveDrawingBuffer: true })  //canvas.getContext('experimental-webgl');

  let p: Uint8ClampedArray = new Uint8ClampedArray();
  if (context instanceof WebGLRenderingContext) {
    p = new Uint8ClampedArray(4); // new Uint8Array(context.drawingBufferWidth * context.drawingBufferHeight * 4);
    context.readPixels(x, y, 1, 1, context.RGBA, context.UNSIGNED_BYTE, p);
  } else if (context instanceof WebGL2RenderingContext) {
    p = new Uint8ClampedArray(4); // new Uint8ClampedArray(context.drawingBufferWidth * context.drawingBufferHeight * 4);
    context.readPixels(x, canvas.height - y, 1, 1, context.RGBA, context.UNSIGNED_BYTE, p);

    // if bufferBind == null values can be read from the canvas
    // const bufferBind = context.getParameter(context.FRAMEBUFFER_BINDING);
    // console.log('bufferBind', bufferBind);
    const error = context?.getError();
    if (error !== context?.NO_ERROR) {
      console.error('WebGL error:', error);
    }
  }
  else if (context) {
    p = context.getImageData(x, y, canvas.width, canvas.height).data;
  }


  const r = p[0];
  const g = p[1];
  const b = p[2];
  const a = p[3];

  const rgb = `rgb(${r}, ${g}, ${b})`;
  console.log(rgb);

  // console.log(p, r,g,b,a);
  return rgb;
}

// on map click or hover use this
rasterLayerOnClick(map: glMap, evt: maplibregl.MapMouseEvent & Object) {
    // check map is idle before get pixel data
    map.once('idle', () => {
      /* const bbox = map.getBounds().toArray().flat();
      const size = map.getContainer().getBoundingClientRect(); */
      const pos = map.project(evt.lngLat);
      const x = evt.point.x;
      const y = evt.point.y; 

      const test = GetPixel(map.getCanvas(), Math.round(x), Math.round(y));
      console.log(map.getCanvas(), pos, x, y, test, map, evt);
    });
  }