MapLibreで使えるいろんなTerrainを作ってみよう

MapLibreで使えるいろんなTerrainを作ってみよう Taro Matsuzawa (@smellman) MapLibre User Group Japan 2024/11 MapLibre User Group Japan 2024/11 1

• https://x.com/smellman

自己紹介 Georepublic Japan GIS Engineer Sub-President, Japan UNIX Society Director, OSGeo.JP Director, OpenStreetMap Foundation Japan Lead of United Nation OpenGIS/7 core Breakcore cluster MapLibre User Group Japan 2024/11 2

いろんなTerrain Mapbox Terrain RGBとは Terarriumとは GSI DEMとは rasterioとは 使い方 まとめ MapLibre User Group Japan 2024/11 3

Mapbox Terrain RGBとは MapLibre GL JSでサポートされ ている標高タイルの形式の一つ で、Mapboxによって開発をされ たもの PNGのRGB値に高さ情報が埋め 込まれている MapLibre User Group Japan 2024/11 4

計算式は以下の通り v -= 10000 v /= 0.1 r = ((((v // 256) // 256) / 256) - (((v // 256) // 256) // 256)) * 256 g = (((v // 256) / 256) - ((v // 256) // 256)) * 256 b = ((v / 256) - (v // 256)) * 256 MapTilerもこの形式でホスティングをしている MapLibre User Group Japan 2024/11 5

Terarriumとは MapLibre GL JSでサポートされ ている標高タイルの形式の一つ で、TileZenによって開発をされ たもの PNGのRGB値に高さ情報が埋め 込まれている MapLibre User Group Japan 2024/11 6

計算式は以下の通り v += 32768 r = floor(v/256) g = floor(v % 256) b = floor((v - floor(v)) * 256) AWSのオープンデータもこの形式でホスティングをしている MapLibre User Group Japan 2024/11 7

GSI DEMとは 国土地理院が提供している標高 タイルの形式の一つ PNGのRGB値に高さ情報が埋め 込まれている(またかよ) MapLibre GL JSで使う場合は maplibre-gl-gsi-terrainを使う MapLibre User Group Japan 2024/11 8

• https://github.com/mug-jp/maplibre-gl-gsi-terrain

計算式は以下の通り u = 0.01 x = v / u if x > 2 ** 23: x = v / u + (2 ** 24) r = int(int(x) / 2 ** 16) x = x - (r * (2 ** 16)) g = int(int(x) / 2 ** 8) x = x - (g * (2 ** 8)) b = int(x) MapLibre User Group Japan 2024/11 9

rasterioとは Pythonでラスターデータを扱うためのライブラリ 標高データや衛星画像などを扱うことができる https://rasterio.readthedocs.io/en/stable/ MapLibre User Group Japan 2024/11 10

• https://rasterio.readthedocs.io/en/stable/

rioでプロセッシング rio-rgbify Mapbox形式の標高タイルを作成するライブラリ rio-terrarium(拙作) Terarrium形式の標高タイルを作成するライブラリ rio-gsidem(拙作) GSI DEM形式の標高タイルを作成するライブラリ ぶっちゃけrio-rgbifyを改造しただけ MapLibre User Group Japan 2024/11 11

• https://github.com/mapbox/rio-rgbify
• https://github.com/smellman/rio-terrarium
• https://github.com/smellman/rio-gsidem

インストール python3 -m venv venv source venv/bin/activate git clone https://github.com/smellman/rio-terrarium.git cd rio-terrarium pip3 install -e '.[test]' MapLibre User Group Japan 2024/11 12

使い方 # GeoTiffをvrtに変換 gdalbuildvrt -a_srs EPSG:4326 -hidenodata all.vrt test/*.tif # vrtをGeoTiffに変換 gdal_translate -co compress=lzw \ -co BIGTIFF=YES -of GTiff all.vrt all.tiff # gdal_calc.pyで0以下の値を0に変換 gdal_calc.py --co="COMPRESS=LZW" \ --co="BIGTIFF=YES" --type=Float32 -A all.tiff \ --outfile=all_calc.tiff --calc="A*(A>0)" --NoDataValue=0 # rio-terrariumで変換 rio terrarium --format png \ --max-z 18 --min-z 5 -j `nproc` \ all_calc.tiff dem.mbtiles なお、mbtilesのままだと何故か上手く表示できないので mbutil で展開するとよい MapLibre User Group Japan 2024/11 13

MapLibre User Group Japan 2024/11 14

MapLibre User Group Japan 2024/11 15

TODO rio-gsidemはまだnodata(テキスト標高タイルのe)に対応していない nodataの場合はR=128, G=0, B=0となる 他のプログラムもnodataの場合どうするかを決めたい でもnodataの場合の定義がないので難しい MapLibre User Group Japan 2024/11 16

まとめ 標高データも簡単にプロセッシングできます。 先人のコードを上手く活用しましょう。 MapLibre User Group Japan 2024/11 17