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

Question

我想在 MapboxGL Js 中获得鼠标悬停下像素的准确 RGB 颜色。完成此任务的最佳方法是什么？

Answer 1

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

此代码可以在 mousemove map event 时执行被触发，如下面来自 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}`);
  }
});

正如链接的 SO 帖子中也指出的那样，the map's preserveDrawingBuffer parameter必须设置为 true，如下所示。默认情况下，该参数设置为 false 作为性能优化。

var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
    center: [-74.50, 40], // starting position [lng, lat]
    zoom: 9, // starting zoom
    preserveDrawingBuffer: true // preserve the buffer where fragment colors are written, comes with a performance cost
});

This JSFiddle演示了上述功能，以及显示检索到的 RGBA 值的 HTML 元素。您可以通过将 /* ADD YOUR MAPBOX ACCESS TOKEN HERE */ 替换为您自己的 Mapbox 访问 token 来运行该示例。