はじめに
ベクトルタイルを生成して配信する際に、ユーザーが感じるウェブ地図表示スピードはかなり重要です。
こちらの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