はじめに

ベクトルタイルを生成して配信する際に、ユーザーが感じるウェブ地図表示スピードはかなり重要です。
こちらのgoogleのページによると、モバイルサイトでページ読み込みに3秒以上かかると 53% のユーザーがページを離脱するという結果があります。個人的にも読み込みの遅いサイトだとストレスを感じ、見るのをやめてしまう場合があります。
ベクトルタイルの配信に関しては、そのデータサイズが表示パフォーマンスに直結します。そのため、ベクトルタイルのデータサイズなどを確認する必要がありますが、調べたところvt-optimizerが使えそうなので、本記事では、その使い方について記載します。

使用データ

使用するMBTilesファイルはmaptilerさんのページの広島のデータをダウンロードしました。

スタイルファイルはこちらのデータを使用します。

vt-optimizerの使い方

vt-optimizerを使用します。
関連記事もあり、こちらによると平均タイルサイズは50KB、全てのタイルは500KB以下にすべきという指針が示されています。

vt-optimizerのインストール

上記GitHubレポジトリをクローンして、npm installとしましたが、エラーが発生しました。
vt-optimizerは古いソフトでnodeのバージョンが22などの新しいものには対応していないようです。nvmで16に変更して、さらに必要なpythonもインストールして対応しました。

解析モード

vt-optimizerには解析モードと最適化モードの２つのツールがあります。解析モードでは解析が可能で、まずはこれを試してみます。ローカルに作業レポジトリを作成して、Dataフォルダの下にダウンロードした広島のデータを格納しています。

node ./index.js -m ./Data/osm-2020-02-10-v3.11_japan_hiroshima.mbtiles

として解析開始します。

以下の情報が表示されました。

対象ファイルのズームレベルが0から始まっていること
Formatがpbfであること
中心の緯度経度
使用されているレイヤ一覧

また、以下の情報も表示されました。

各ズームレベルの

タイル数
トータルデータサイズ
平均サイズ
最大サイズ

平均サイズが50KBに近い場合には黄色で警告が、50KBを超える場合は赤色でエラー表示されます。

さらに、どのズームレベルについて詳細を見たいのかを問われて、試しにズームレベル13を選択しました。
そうすると、ズームレベル13に含まれるタイルが、タイルサイズ毎に10分割したリストが表示されました。このリストには、以下が含まれます。

閾値の最小と最大
タイル数
平均タイルサイズ
何％のタイルが該当閾値内に存在するか
閾値内で何％の容量を占めているか
累積したタイル数の占める割合
累積した容量の占める割合

さらに、その閾値内に含まれるタイル情報を見たいか聞かれるので、9番目の51.28KBから57.57KBの範囲に存在する情報を選択しました。

そうすると、上記の情報が表示されました。
ここで、タイル座標を確認したところ、13/7111/4929はオーストラリアの南海上の場所でした。なぜこのような想定と異なる情報が表示されるのか調べたところ、Y軸が下から始まるTMS(Tile Map Service)と、上から始まるXYZとの違いによるものだと思われます。vt-optimizerはタイル座標を、Y軸が下から始まるTMS仕様で出力しているのだと考えられます。
ただ、現在はXYZがデファクトスタンダードです。TMS仕様のY座標を変換してXYZのY座標にすることも出来ますが、毎回実施するのも手間がかかるため、TMS仕様とXYZ仕様のY座標を同時に確認できるサイトを探したところ、こちらのサイトで可能であることが分かりました。

ちなみに、こちらの公式情報によると、以下の通り記載されており、MBTilesの仕様はTMSであることが分かります。

Note that in the TMS tiling scheme, the Y axis is reversed from the "XYZ" coordinate system commonly used in the URLs to request individual tiles, so the tile commonly referred to as 11/327/791 is inserted as zoom_level 11, tile_column 327, and tile_row 1256, since 1256 is 2^11 - 1 - 791.

計算方法もズームレベルが11でYが791の場合は、「2^11 - 1 - 791」であることが記載されています。

さらに、詳細なタイル情報を取得したいかと聞かれ、yesと回答して、対象とするタイルを選択すると、以下が表示されました。

以下の情報が表示されます。

レイヤ数
地物数
頂点数
属性数
属性が持つ値の数

また、それぞれのレイヤに対して、以下の情報が表示されます。

頂点数
地物数
属性数
属性が持つ値の数

最適化モード

次に最適化モードを試してみます。このモードではスタイルファイルが必要です。前述したスタイルファイルをローカルにコピーします。

以下の通り実行出来ます。

node ./index.js -m ./Data/osm-2020-02-10-v3.11_japan_hiroshima.mbtiles -s ./Styles/maptiler-basic-gl-style.json -o ./Data/osm-2020-02-10-v3.11_japan_hiroshima_output.mbtiles

アウトプットファイルを以下の通り定義しています。
/Data/osm-2020-02-10-v3.11_japan_hiroshima_output.mbtiles

上記の通り、使用されていない地物とレイヤーを削除することができます。この機能を使用することで、ベクトルタイルに変換する時点で削除可能なデータを見つけることが出来そうです。
上記の例だと35.9MBが34MBとなり、少しだけデータサイズを減らす事ができました。

ベクトルタイルデータの簡略化

vt-optimizerにはタイルを指定して、データを簡略化する機能があります。

node ./index.js -m ./Data/osm-2020-02-10-v3.11_japan_hiroshima_output.mbtiles -x 7111 -y 4929 -z 13 -l transportation -t 1

しかし、なぜかエラーが発生しました。

node ./index.js -m ./Data/osm-2020-02-10-v3.11_japan_hiroshima_output.mbtiles -x 4929 -y 7111 -z 13 -l transportation -t 1

xとyの値を入れ替えるとなぜか成功します。

vt-optimizerの簡略化に関するプログラムで、どこかでxとyを取り違えているのかもしれませんが、詳細不明です。
ここでは、レイヤtransportaionを許容値(tolerance)1で簡略化しており、11855個あったverticesが6900個程度に減少しています。

まとめ

vt-optimizerの使い方についてまとめました。2018年に作成されたソフトであるものの、ベクトルタイルのサイズを網羅的に知ることができ、ウェブ地図のパフォーマンスに関わるベクトルタイルデータサイズをどのように減少させるかの指針として、利用価値の高いソフトだと思います。

Reference