4.3K Views
November 09, 23
スライド概要
MapLibre Meetup Japan #01 発表資料
Georepublic / OSGeo.JP / Japan Unix Society / OpenStreetMap Foundation Japan
MapLibre GL JSでAmazonが出してるTerrainタイルを使 ってみよう Taro Matsuzawa Georepublic / JUS / OSGeo.JP / OSMFJ https://smellman.hatenablog.com/ MUGJP 2023/11/09 1
自己紹介 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
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
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
MUGJP 2023/11/09 13
まとめ AmazonのTerrainタイルはMapLibre GL JSで使える ただし、地理院DEMタイルとはフォーマットが違うので注意 ちゃんとattributionを書こう 僕は数日前まで忘れてました(てへ) MUGJP 2023/11/09 14