如何在MapboxGL Js中的鼠标悬停下找到像素的rgb颜色？

Question

我想获得MapboxGL Js中鼠标悬停下像素的rgb的确切颜色。完成此工作的最佳方法是什么？

Answer 1

要检索在Mapbox GL JS映射中悬停的像素的RGB颜色，可以获取WebGL画布上下文，并使用WebGLRenderingContext.readPixels method获取四个WebGLRenderingContext.readPixels值中的每一个。

[触发RGBA时可以执行此代码，如下面对mousemove map event的答案中的代码段所示：

mousemove

也如链接的SO帖子中所述，必须将this SO post设置为

map.on("mousemove", e => {
  const canvas = map.getCanvas();
  const gl = canvas.getContext('webgl') || canvas.getContext('webgl2');
  if (gl) {
    const { point } = e;
    const { x, y } = point;
    const data = new Uint8Array(4);
    const canvasX = x - canvas.offsetLeft;
    const canvasY = canvas.height - y - canvas.offsetTop;
    gl.readPixels(canvasX, canvasY, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, data);
    const [r, g, b, a] = data;
    const color = `rgba(${r}, ${g}, ${b}, ${a})`;
    console.log(`Color at (${x}, ${y}) = ${color}`);
  }
});

，如下所示。作为性能优化，默认情况下该参数设置为the map's preserveDrawingBuffer parameter。

preserveDrawingBuffer

true演示了上述功能，以及显示检索到的RGBA值的HTML元素。您可以通过使用自己的Mapbox访问令牌替换false来运行该示例。