要检索在Mapbox GL JS映射中悬停的像素的RGB颜色，可以获取WebGL画布上下文，并使用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,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元素。您可以通过使用自己的Mapbox访问令牌替换/* ADD YOUR MAPBOX ACCESS TOKEN HERE */来运行示例。