如何在 Mapbox GL JS 中使用 Mapbox Terrain-RGB 瓦片集？

Question

Mapbox 使用 RGB 栅格图块（“Mapbox Terrain-RGB”）发布高程数据，可在此处获取：https://docs.mapbox.com/help/troubleshooting/access-elevation-data/#mapbox-terrain-rgb

我正在努力弄清楚如何使用 Mapbox GL JS 使用这些数据；我想不出在样式编辑器工作室或客户端上进行 RGB 解码的方法。

找例子，我只能找到一个Mapbox的例子，这个数据用在leaflet.js中，而不是Mapbox GL JS：https://blog.mapbox.com/global-elevation-data-6689f1d0ba65

我试图重现的等效 openlayers 代码是这样的：

function flood(pixels, data) {
  var pixel = pixels[0];
  if (pixel[3]) {
    var height = -10000 + ((pixel[0] * 256 * 256 + pixel[1] * 256 + pixel[2]) * 0.1);

    if (height <= 100 && height > 0) {
      pixel[0] = 255;
      pixel[1] = 15;
      pixel[2] = 15;
      pixel[3] = (255 - height * 2.5);
    } else {
      pixel[3] = 0;
    }
  }
  return pixel;
}

const elevation = new XYZ({
  url: 'https://api.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}.pngraw?access_token=' + key,
  crossOrigin: 'anonymous',
  transition: 0
});

var raster = new RasterSource({
  sources: [elevation],
  operation: flood
});

但我想不出任何方法在使用 Mapbox GL JS 的客户端上执行此操作。

理想情况下，我会避免直接调用 API；我正在尝试在 Mapbox GL JS 客户端中工作，以避免通过直接 API 访问产生高成本。但我会从任何方式开始。

（我对此很陌生，所以如果有更深的误解，我深表歉意）

Answer 1

您不能对光栅像素进行任意操作，例如raster-colorizing。你可以做以下两件事之一：

1. 将栅格显示为图像（使用raster 源类型和raster 图层类型）。
2. 将栅格视为 DEM，并将其显示为山体阴影（使用 raster-dem 源类型和 hillshade 图层类型）。

后者的例子见https://docs.mapbox.com/studio-manual/examples/hillshade/