MapLibre GL JSでAmazonが出してるTerrainタイルを使ってみよう

MapLibre GL JSでAmazonが出してるTerrainタイルを使 ってみよう Taro Matsuzawa Georepublic / JUS / OSGeo.JP / OSMFJ https://smellman.hatenablog.com/ MUGJP 2023/11/09 1

• https://smellman.hatenablog.com/

自己紹介 Georepublic Japan GISエンジニア 日本UNIXユーザ会副会長 OSGeo.JP理事 OpenStreetMap Foundation Japan理事 Breakcoreクラスタ MUGJP 2023/11/09 2

今日のお話 Amazonが出してるTerrainタイルをMapLibre GL JSで使ってみよう MUGJP 2023/11/09 3

Terrainタイルとは？ 標高データをタイル化したもの ラスタタイルとして配信されてい る 1タイル256x256ピクセル 日本では地理院のDEMタイルが有 名 MUGJP 2023/11/09 4

AmazonのTerrainタイル https://registry.opendata.aws/terrain-tiles/ で公開されているタイルセット 世界中の標高データをタイル化して配信している フォーマットは地理院DEMタイルとは違う Mapzen format MUGJP 2023/11/09 5

• https://registry.opendata.aws/terrain-tiles/

MUGJP 2023/11/09 6

Maplibre GL JSでのTerrainタイルの取り扱い sourceのtypeに raster-dem を指定する encodingに"terrarium", "mapbox", "custom"が利用可能 "terrarium"はMapzen format defaultは"mapbox"なので注意 attributionをちゃんと書く事 https://github.com/tilezen/joerd/blob/master/docs/attribution.md MUGJP 2023/11/09 7

• https://github.com/tilezen/joerd/blob/master/docs/attribution.md

MUGJP 2023/11/09 8

簡単な実装例 (1/3)
const styleUrl = "https://tile.openstreetmap.jp/styles/maptiler-basic-ja/style.json"
const terrainUrl = "https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png"
let style;
fetch(styleUrl).then(res=> res.json()).then(json => {
style = json
style['sources']['terrain'] = {
type: "raster-dem",
tiles:[terrainUrl],
encoding: 'terrarium',
tileSize: 256,
maxzoom: 15,
minzoom: 1,
attribution: '...',
}

MUGJP 2023/11/09

9

簡単な実装例(2/3)
style['layers'].push({
id: 'hills',
type: 'hillshade',
source: 'terrain',
paint: {
'hillshade-illumination-anchor': 'map',
'hillshade-exaggeration': 0.2,
},
})

MUGJP 2023/11/09

10

簡単な実装例(3/3) const map = new maplibregl.Map({ maxZoom: 20, container: 'map', style: style, maxPitch: 85, hash: true, center: [140.084556, 36.104611], zoom: 10, }) map.addControl( new maplibregl.TerrainControl({ source: 'terrain', exaggeration: 1 }) ) MUGJP 2023/11/09 11

デモサイト https://smellman.github.io/aws-terrain/ MUGJP 2023/11/09 12

• https://smellman.github.io/aws-terrain/

MUGJP 2023/11/09 13

まとめ AmazonのTerrainタイルはMapLibre GL JSで使える ただし、地理院DEMタイルとはフォーマットが違うので注意 ちゃんとattributionを書こう 僕は数日前まで忘れてました(てへ) MUGJP 2023/11/09 14