Mapbox GL JS v0.43.0부터 높은 타일로 음영 기복(hillshade)을 그릴 수 있습니다.
Realistic terrain with custom styling | Mapbox blog
울타리 데이터를 바탕으로 연산을 하기 때문에 벡터화된 음영 기복보다 정교하게 표현할 수 있는 것이 장점이다.
맵박스가 제공하는 고도 기와Mapbox Terrain-RGB는 미국과 유럽에서 해상도가 5m이지만 일본에서는 해상도가 30m, SRTM 데이터1로 정밀도가 떨어지는 것이 아쉽다.
그래서 우리는 국토지리원이 제공한 높이 타일을 사용하여 음영의 기복을 확대하려고 한다.

높이 타일

해발 타일 | 지리원 타일 일람
이번에는 일본 전체를 덮고 초점 레벨 0~14의 DEM10B(지형도의 등고선으로 제작된 10m 망상물의 표고 데이터)를 사용했다.
서로 다른 형식의 높이 슬라이스를 사용할 수 있는 Pull Request를 결합했기 때문에 참조로 사용할 수 있습니다.
mapbox#6110, Adds support for mapzen terrain

표준 PNG 와트 사양

픽셀 값(RGB 값)에서 해발 값 h(m)까지의 계산 공식은 다음과 같다.
x = 2^16 R + 2^8 G + B
x<2^23의 경우 h=xu
x=2^23의 경우 h=NA
x>2^23의 경우 h=(x-2^24)u
u는 해발 해상도(0.01m)를 나타낸다.
높이 타일 상세 규격 | 지리원 지도
이 계산식은 MapboxGL JS 내에 설치하기만 하면 됩니다.

let h = r * 256 * 256 + g * 256 + b;
return (h == Math.pow(2, 23)) ? 0 : 0.01 * ((h << 8) | 0) >> 8;

example

map.addSource('gsi-dem', {
    "type": "raster-dem",
    "encoding": "gsi",
    "tiles": [
        "https://cyberjapandata.gsi.go.jp/xyz/dem_png/{z}/{x}/{y}.png"
    ],
    "tileSize": 256,
    "maxzoom": 14,
    "attribution": '<a href="https://maps.gsi.go.jp/development/ichiran.html#dem" target="_blank">地理院標高タイル</a>'
});
map.addLayer({
    "id": "GSI dem",
    "source": "gsi-dem",
    "type": "hillshade"
}, 'waterway-river-canal-shadow');