如何使用Mapbox的raster-color为特定颜色通道值的像素重着色？

问题 #

我正在使用Mapbox在地图上添加一张红色矩形图片，希望通过raster-color Paint属性修改它的颜色。基于Mapbox的「在地图图层添加栅格图像」示例，我编写了代码，红色方块成功显示在地图上。

为获取该矩形的精确RGB值，我下载图片并用Python处理：

import imageio.v3 as iio
import numpy as np

array = iio.imread('shape.jpg')

print(np.unique(array[:,:,0],return_counts=True))
print(np.unique(array[:,:,1],return_counts=True))
print(np.unique(array[:,:,2],return_counts=True))

输出显示所有像素颜色为RGB(226,38,53)。

我尝试修改paint配置，将R值在221-229之间的像素重着色为rgb(123,222,111,255)，配置如下：

paint: {
"raster-color": [
    "interpolate",
    ["linear"],
    ["raster-value"],
    220 / 255,
    "rgba(0,0,0,0)",
    221 / 255,
    "rgba(123,222,111,255)",
    229 / 255,
    "rgba(123,222,111,255)",
    230 / 255,
    "rgba(0,0,0,0)",
],
"raster-color-mix": [1, 0, 0, 0],
"raster-color-range": [220 / 255, 230 / 255],
"raster-resampling": "nearest",
},

这个配置能成功修改颜色，但当我尝试设置更窄的范围（225-227）时，方块无法显示。反复试错后发现，必须将范围设置在223.3-223.4之间才能生效；另一张R值为118的图片，对应生效范围中心约为116.631。

通过试错找范围既繁琐又容易出错，而且宽范围会导致无法区分相近R值的像素。请问如何准确获取raster-color中所需的数值，只为特定R值的像素重着色？

解决方案 #

问题根源 #

出现数值偏差的核心原因是：Mapbox加载栅格图像时，会对图像进行色彩空间转换、精度调整或压缩处理，导致raster-value返回的数值和本地读取的原始RGB值不完全一致。

准确获取目标值的方法 #

直接通过Mapbox的调试能力获取内部处理后的精确值：

1. 在浏览器开发者工具中，添加鼠标移动监听，打印目标图层的像素值：

map.on('mousemove', 'radar-layer', (e) => {
  const features = map.queryRenderedFeatures(e.point, { layers: ['radar-layer'] });
  if (features.length) {
    const rasterValue = features[0].properties['raster-value'];
    console.log('当前像素的raster-value:', rasterValue);
  }
});

2. 移动鼠标到红色方块上，控制台会输出Mapbox实际使用的数值，直接用这个数值配置即可。

精准匹配特定R值的配置 #

拿到准确数值后，使用case表达式配合误差范围判断，实现精准单值匹配：

paint: {
  "raster-color": [
    "case",
    // 给浮点数添加极小误差范围，避免精度问题
    ["within", ["raster-value"], 准确数值 - 0.0001, 准确数值 + 0.0001],
    "rgba(123,222,111,255)",
    "rgba(0,0,0,0)" // 其他像素透明
  ],
  "raster-color-mix": [1, 0, 0, 0],
  "raster-resampling": "nearest"
}

如果需要匹配多个离散值，可扩展case表达式的条件分支：

"raster-color": [
  "case",
  ["within", ["raster-value"], val1-0.0001, val1+0.0001], "color1",
  ["within", ["raster-value"], val2-0.0001, val2+0.0001], "color2",
  "rgba(0,0,0,0)"
]

内容的提问来源于stack exchange，提问作者zabop