Mapbox 入門日記（５）ベクトルタイル

ベクトルタイルについて

地図データは一般的に大きくなりがちです。
そのため、ブラウザに地図データを描画するには、常にネットワーク
帯域、CPU、やメモリとの戦いになり、バランスを取ることが大事です。

昔はサーバーサイドで、予めタイル画像を作成し、クライアント側で
タイル画像を順番に並べるのが普通でしたが、ダイナミックに描画
スタイルを変更できないなど欠点がありました。

HTML5のcanvasとWebGLの普及により、近年はGEOデータをそのまま
クライアントサイトに渡しjavascritpで描画する方法が進んでいます。

しかし、クライアントサイトで描画する場合、データが大き過ぎる問題
に直面します。特にズームレベルを小さくして、全日本や全球レベルの
地図を表示る時にデータが膨大になりがちです。

こういった問題を解決するためにMapbox社からベクトルタイルが定義
されたわけです。

関連定義や説明は下記のリンクから参照してください。

大体の流れは下記の通りです。

※定義上は必ずしもメルカトル座標ではない。
※格子の密度（4096）は変更可能。

Mapboxはベクトルタイルを描画するために生まれたものと言っても過言ではない
でしょう。

Mapboxはサーバーサイドからベクトルタイルを取得し、WebGLにより高速な描画を
実現します。

ベクトルタイル作成するためのいろいろなライブラリがあります。

各プログラム言語で使えるライブラリがあれば、コマンドライン
で静的にPBFファイルに変換してくれるツールもあります。

tippecanoe はコマンドラインで、GeoJSONからmbtilesファイル作成できます。
mbtilesファイルはsqlite3により、たくさんのベクトルタイルを1つのファイルに纏めたものです。
さらにmb-utilコマンドでmbtilesを展開して、httpサーバーに公開できます。

1
2
3

tippecanoe -o out.mbtiles -Z6 -z13 --drop-densest-as-needed --no-tile-compression test.geojson

mb-util --image_format=pbf out.mbtiles tiles

思いつくまま書きました。
間違っているところがありましたらTwitter経由でご指摘下さい。