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. Но я бы начал с любого способа сделать это вообще.
(Я довольно новичок в этом, поэтому я прошу прощения, если есть более глубокие недоразумения в игре)