バイナリベクトルタイルのデバッグツール
概要
以前バイナリベクトルタイルの作成工程を記事しました。
バイナリベクトルタイルはその名の通りバイナリ形式のデータなのでGeoJSONのようなテキスト形式のデータのように開いて簡単に中身を見るといったことができません。
そこで、バイナリベクトルタイルを作成する工程の各ポイントで変換等がうまくいっているか確認できるツール類を紹介します。
mbtilesの内容を確認する
mojodna/tessera: A tilelive-based tile server.
tippecanoeを使ってGeoJSONをmbtilesに変換しますが、正しく変換できていなければこの後の工程がそもそも無駄になります。
tesseraというツールを使うとmbtilesのデータを地図に表示して内容を確認することができるので、このツールを使ってtippecaneを使った変換が正しく行われているか確認しておくと余計な手戻りを防げます。
インストール
|
1 |
npm install -g tessera |
作成したmbtilesファイルを指定して実行します。
|
1 |
tessera mbtiles://./<ファイル名> |
ローカルサーバーが起動するので出力されたurlをブラウザで開いて確認します。
この状態で正しくデータが表示されないようであれば、変換に失敗しています。
mbtilesのメタデータを確認する
mapbox/mbutil: Importer and Exporter of MBTiles
mbtilesを静的ファイルに変換するmb-utilを使うとメタ情報を確認することもできます。
|
1 |
mb-util hoge.mbtiles dumps |
メタ情報にはズーム範囲やboundsなど変換したバイナリベクトルタイルの情報が含まれています。
特にvector_layersのidは、フロントエンドでタイルを表示する際に必要になることがあるので、確認しておくとよいでしょう。
mvt(pdf)ファイルの中身を確認するスクリプト
作成したmbtilesをmb-utilを使って変換した静的ファイルに問題がないか確認したい場合がありますが、ファイルはバイナリファイルになっているのでそのままでは確認できません。そこで、mvt(pdf)のファイルをGeoJSONに変換するスクリプトを作成しました。
以下のリポジトリからダウンロードできます。
使い方は以下
|
1 2 |
$ npm install $ node vt_pbf2json hoge.pbf > hoge.geojson |
フロントエンドでのデバッグ
バイナリベクトルタイルは、通常フロントエンドでGeoJSONに戻されて利用されます。
例えば、L.TileLayer.MVTSourceプラグインの場合、filterやstyleに設定したコールバックの引数「feature」にバイナリベクトルタイルから変換されたGeoJSONが渡されるので、それらの関数の直下で内容を確認すると、デバッグがしやすいです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
var mvtSource = new L.TileLayer.MVTSource({ url: "./tiles/{z}/{x}/{y}.pbf", //生成したバイナリベクトルタイルファイルの場所を指定 filter: function(feature, context) { console.log(feature); // <- ちゃんとGeoJSONが渡されるか確認する。 if (feature.layer.name === 'gs_map') { return true; } return false; }, style: function (feature) { console.log(feature); // <- ちゃんとGeoJSONが渡されるか確認する。 return style; } }); |
