はじめに

以下の記事を日本語でもメモしておきます。

FOSS4Gなどに参加しても、ベクトルタイル技術の利用は年々増えてきているように思います。ベクトルタイルを作成するツールはたくさんあります。たとえば、OpenMapTiles、 tilemaker 、 onthegomap/planetiler などを使えば、ＯＳＭからベクトルタイルを作ることができます。

国連ベクトルタイルツールキット UN Vector Tile Toolkit (UNVT)でも、ＯＳＭからベクトルタイルを作成する方法を開発しています。ここではUNVTを使ってどのようにベクトルタイルを作るか紹介したいと思います (特に ~~unvt/naru~~ unvt/nanban).

unvt/naru は数年前に開発されまして、nodejs ver.12で動いていました。このDocker環境を構築しようとすると、少なくとも私の環境ではできなかったので、今回の作業のために新しいレポジトリubukawa/mini-naruをつくり、unvt/naruの中からデータ変換に必要なものを抜き出しました。これらをunvt/nanbanの上で処理することで作業を進めたいと思います。

私の環境

Windows 10 (Enterprise)
Docker version 20.10.8
PowerShell version 5.1.19041.1237
git version 2.25.0.windows.1

手順

Step 1: ファイルのダウンロード

"GEOFABRIK"などのOSMデータをダウンロードできるサイトからosm.pbfファイルをダウンロードします。今回は米国のオハイオ州のOSMデータをダウンロードすることにしました。"ohio-latest.osm.pbf"が保存されます。

Step 2: mini-naru のクローン

必要なファイルを得るために、レポジトリをクローンしておきます。

git clone https://github.com/ubukawa/mini-naru
cd mini-naru

Step 3: Dockerコンテナの起動

作業場所に移動したら、保存したOSMデータをsrcディレクトリに保存します。そしてunvt/nanban をスタートします。unvt/nanban は、今回行うベクトルタイル処理に必要なツールがほとんど入っているdockerイメージです。unvt/nanban のを使ったことがない場合はdocker pull unvt/nanbanしてからコンテナを起動します。作業フォルダを/dataに関連付けておきます。

docker run -it --rm -v ${PWD}:/data unvt/nanban
cd /data

Step 4: コンフィグファイルを参照しながらデータのエクスポートを試してみる

データ(src/ohio-latest.osm.pbf)を読み込むにはosmisumというツールを使います。このツールを使った読み込みのためのコンフィグファイルosmium-export-config.jsonはすでにレポジトリにありますが、これを参照させて、以下のようにコマンドを実行してみます。

 osmium export --config osmium-export-config.json --index-type=sparse_file_array --output-format=geojsonseq --output=- src/ohio-latest.osm.pbf

地物がGeoJSON sequenceの形で出力されているのがわかります。ここまでは成功です。

osmium-export-config.jsonについて、中身を丸々紹介しませんが、どういう設定で出力させているのかを確認する際にはこちらを確認するとよいです。

Step 5: フィルターを使ってGeoJSONを加工

前のステップで出力された GeoJSON sequence にたいし、 filter.js と modify.js　でベクトルタイル関係の情報を追加したりします。nodejsを使うので最初に以下の2つのnpmパッケージをインストールしておきます。

npm install --save json-text-sequence @mapbox/geojson-area

filter.js と modify.js は、もうレポジトリに入っています。ここにコピペしませんが、このmodify.jsがこれまでの努力の結晶というか、OSMから変換されるベクトルタイルの構造を決めるものなので大変重要です。よくできる方は、このmodify.jsを加工することで自分好みのベクトルタイルにできます。

コマンド自体は、前までのコマンドにパイプをくっつけて、nodejsにつなげるという感じのものです。

osmium export --config osmium-export-config.json --index-type=sparse_file_array --output-format=geojsonseq --output=- src/ohio-latest.osm.pbf | node filter.js

これで出力成果が見られます。前のステップのものと比べると、ベクトルタイル変換用の情報、tippecanoeがついているのがわかります。これで変換の準備ができています。

Step 6: ベクトルタイル変換（まずはmbtiles形式）

前のステップまでの成果をパイプを使ってtippicanoeに流し込みます。

osmium export --config osmium-export-config.json --index-type=sparse_file_array --output-format=geojsonseq --output=- src/ohio-latest.osm.pbf | node filter.js | tippecanoe --no-feature-limit --no-tile-size-limit --force --simplification=2 --maximum-zoom=15 --base-zoom=15 --hilbert --output=src/output.mbtiles

少し時間がかかるかもしれません。作業マシンの性能や、ソースデータのサイズによると思います。

Step 7: mbtiles形式からpbf形式への変換

GitHubページ等での静的なホスティングにも対応するため、mbtiles形式のベクトルタイルをpbfに変換します。tippecanoe の中にあるtile-joinを使います。しかし、pbfタイルにするとデータサイズが３～4倍程度になることもあるので、もともとのmbtilesのサイズによってpbfにするかどうかを考えた方がよいです。mbtilesでホストする場合には、/onyx(https://github.com/un-vector-tile-toolkit/onyx )のようなサーバーサイドの処理が必要になると思います。

tile-join --force --no-tile-compression --no-tile-size-limit --output-to-directory=docs/zxy src/output.mbtiles

成果：　PBF形式でのベクトルタイル

このようにして、zxyフォルダ構造に格納されたpbfタイルを得ることができました。

メタデータなどを確認すると中心位置なども確認できます。（デフォルトスタイルの修正の時に使える。）

追加説明：　ベクトルタイル地図のホスティング

地図のスタイル

ここで作成したベクトルタイルのデータ構造はunvt/naru の filter.js と modify.js によるものですから、unvt/naru で準備されたデフォルトのスタイルを使うことも可能ですこちらにコピー。ただし、中心、データソース、sprites、glyphsなどは修正しないといけません。

ホスティング

GitHubページに必要なライブラリやファイルを一緒にアップするのがやりやすいかと思います。unvt/naru ではマップシンボルを作るツールもありますし、テキストフォントなども準備されています。今回の作業レポジトリ mini-naru (https://github.com/ubukawa/mini-naru/tree/main/docs) にunvt/naruのファイルと最新の MapLibre GL JSをコピーしておいたので、ウェブマップ環境構築にも使えます。

謝辞

今回の試行は、これまでに積み上げられた努力と unvt/naru にまとめられた成果に基づいたものです。 @hfu さんと仲間たちの努力に感謝します。

参考

unvt/naru https://github.com/unvt/naru
unvt/nanban https://github.com/unvt/nanban
ubukawa/mini-naru https://github.com/ubukawa/mini-naru
GEOFABRIK https://download.geofabrik.de/