バイナリベクトルタイルの作り方

「全国のガソリンスタンドの位置を地図上にプロットしてみた。」で作成したバイナリベクトルタイルの作業工程メモです。

バイナリベクトルタイルとは

巨大なGeoJSONを分割しタイル化することで必要な情報だけを読みだして地図上に表示します。さらに分割したGeoJSONをバイナリファイルにすることでオーバーヘッドを減らしています。

バイナリベクトルタイル出会うまでの私

１．GeoJSON爆誕
「フロントエンドエンジニアでも簡単に地理情報を扱えるJSON形式の規格考えたよ！」
「素晴らしい！」

２．TopoJSON誕生
「GeoJSON重くない？　もっと効率のいい規格作った！」
「最高！」

３．ベクトルタイル到来
「GeoJSONを地図タイルみたいに分割して配信すればいいじゃないか！」
「なるほど。」

４．バイナリベクトルタイル降臨　＜ーいまここ
「シリアライズしてバイナリファイルで配信すればより効率的」
「おっ、おぅ」

こんな感じ。

静的バイナリベクトルタイルの作り方

GeoJSONを作る

まず、国土数値情報から取得した47都道府県のshapeファイルをQGISを使って結合し、一つのGeoJSONとしてエクスポートします。
shapeファイルの結合方法は以下を。

08.いくつかのshapeファイルを一つにまとめる – QGIS入門

バイナリベクトルタイルを作る

次にtippecanoeというコマンドラインツールを使って、GeoJSONファイルをバイナリベクトルタイル化します。
brewを使ってインストールします。

$ brew install tippecanoe

1	$ brew install tippecanoe

今回はズームレベル6〜18までのタイルを作成します。

$ tippecanoe -l gs_map　-rg -z18 -Z6 -o hoge.mbtiles hoge.geojson

1	$ tippecanoe -l gs_map　-rg -z18 -Z6 -o hoge.mbtiles hoge.geojson

各オプションの意味は以下となります。

-z  最大ズームレベル
-Z  最小ズームレベル
-rg レート指定（後述）
-l  レイヤー名

-z 最大ズームレベル

-Z 最小ズームレベル

-rg レート指定（後述）

-l レイヤー名

rオプションは、一つのタイルの中に表示する地物の密度を指定します。デフォルトだとズームレベルに応じて表示される数が間引き（省略）されて表示されるのですが、今回はなるべく広い範囲で分布を一瞥できるようにrgオプションで最大レート(50000)を指定しています。

※ ↑完全に理解できているわけではないので説明間違っているかも。

静的ファイルに展開する

[追記]

tippecanoeのアップデートにより、直接静的ファイルを出力することができるようになりました。

-oの代わりに-eオプションをつけることでpbfタイルを指定したディレクトリに直接出力することができます。

$ tippecanoe -l gs_map　-rg -z18 -Z6 -e tile hoge.geojson

1	$ tippecanoe -l gs_map　-rg -z18 -Z6 -e tile hoge.geojson

したがって、以下mb-utilを使った工程は必要なくなりました。

tippecanoeで出力されるmbtilesファイルは、ベクトルタイルの情報を保存したSQLiteファイルです。このまま利用することもできますが、SQLiteにアクセスできるクライアントが必要になるため、すべてのデータをpbfファイルに展開します。
展開するのにmb-utilというコマンドラインツールを利用しました。
インストールする方法はいくつかありますが、今回はeasy_installを使ってインストールしました。

easy_install mbutil
mb-util -h

1 2	easy_install mbutil mb-util -h

他のインストール方法については、リポジトリのREADMEを参照してください。

mbutilがインストールできたら、以下のコマンドを実行して静的ファイルへと展開します。

$ mb-util --image_format=pbf hoge.mbtiles tile
$ cd tile  
$ gzip -d -v -r -S .pbf *
$ find . -type f -exec mv -v '{}' '{}'.pbf ;

$ mb-util --image_format=pbf hoge.mbtiles tile

$ cd tile

$ gzip -d -v -r -S .pbf *

$ find . -type f -exec mv -v '{}' '{}'.pbf ;

※ 今回は拡張子をpbfにしていますが、今後はmvtにする予定です。理由は後述。

完了するとフォルダ内に展開されたファイルが生成されます。

バイナリベクトルタイル

leafletを使って表示する

web地図クライアントのleafletを使って表示します。バイナリベクトルタイルを表示するたにはLeaflet.MapboxVectorTileプラグインが必要になるので、leafletとともに読み込みます。

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet-src.js"></script>

<script src="Leaflet.MapboxVectorTile.js"></script>

//leaflet 初期設定
var map = L.map('map',{
    maxZoom: 17
}).setView([36.204824,138.252924], 6) 

//ポップアップを表示するための関数
var popup = L.popup();
var  onGsClick = function(e) {
    if (!e.feature) return 
    popup
        .setLatLng(e.latlng)
        .setContent(e.feature.properties["P07_002"])
        .openOn(map);
}

//ベクトルタイルレイヤーの設定
var mvtSource = new L.TileLayer.MVTSource({
    url: "./tiles/{z}/{x}/{y}.pbf", //生成したバイナリベクトルタイルファイルの場所を指定
    maxZoom: 20,
//  debug: true, //デバッグモードのon/off
    clickableLayers: ["gs_map"], //クリックできるレイヤー名を指定する
    mutexToggle:true,
    getIDForLayerFeature: function(feature) {
        return feature.properties["P07_002"];
    },
    filter: function(feature, context) {
        if (feature.layer.name === 'gs_map') { //tippecanoeで指定したレイヤー名を記述
            return true;
        }
    return false;
    },
    onClick: onGsClick, //地物クリック時の処理
    style: function (feature) {
        var style = {};    
        var type = feature.type;
        switch (type) {
            case 1: //'ポイントデータのスタイル指定'
                style.color = 'rgba(255,0,0,1)';
                style.radius = function(){
                    var z = map.getZoom()
                    var dotsize = 1.5            
                    var radius =  dotsize * Math.exp(Math.log(Math.sqrt(z-4)))
                    return radius
            
                };
            break;
            case 2: //'ラインデータのスタイル指定'
                style.color = 'rgba(161,217,155,0.8)';
                style.size = 3;
                style.selected = {
                    color: 'rgba(255,25,0,0.5)',
                    size: 4
                };
            break;
            case 3: //'ポリゴンデータのスタイル指定'
                style.color = fillColor;
                style.outline = {
                    color: strokeColor,
                    size: 1
                };
                style.selected = {
                    color: 'rgba(255,140,0,0.3)',
                    outline: {
                        color: 'rgba(255,140,0,1)',
                        size: 2
                    }
                };
            break;
        }
        return style;
    }
});

//背景地図の指定
L.tileLayer('http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
    maxZoom: 20,
    id: 'examples.map-i86knfo3'
}).addTo(map);

//バイナリベクトルタイルレイヤーを地図に追加する
map.addLayer(mvtSource);

//leaflet 初期設定

var map = L.map('map',{

maxZoom: 17

}).setView([36.204824,138.252924], 6)

//ポップアップを表示するための関数

var popup = L.popup();

var onGsClick = function(e) {

if (!e.feature) return

popup

.setLatLng(e.latlng)

.setContent(e.feature.properties["P07_002"])

.openOn(map);

}

//ベクトルタイルレイヤーの設定

var mvtSource = new L.TileLayer.MVTSource({

url: "./tiles/{z}/{x}/{y}.pbf", //生成したバイナリベクトルタイルファイルの場所を指定

maxZoom: 20,

// debug: true, //デバッグモードのon/off

clickableLayers: ["gs_map"], //クリックできるレイヤー名を指定する

mutexToggle:true,

getIDForLayerFeature: function(feature) {

return feature.properties["P07_002"];

filter: function(feature, context) {

if (feature.layer.name === 'gs_map') { //tippecanoeで指定したレイヤー名を記述

return true;

}

return false;

onClick: onGsClick, //地物クリック時の処理

style: function (feature) {

var style = {};

var type = feature.type;

switch (type) {

case 1: //'ポイントデータのスタイル指定'

style.color = 'rgba(255,0,0,1)';

style.radius = function(){

var z = map.getZoom()

var dotsize = 1.5

var radius = dotsize * Math.exp(Math.log(Math.sqrt(z-4)))

return radius

};

break;

case 2: //'ラインデータのスタイル指定'

style.color = 'rgba(161,217,155,0.8)';

style.size = 3;

style.selected = {

color: 'rgba(255,25,0,0.5)',

size: 4

};

break;

case 3: //'ポリゴンデータのスタイル指定'

style.color = fillColor;

style.outline = {

color: strokeColor,

size: 1

};

style.selected = {

color: 'rgba(255,140,0,0.3)',

outline: {

color: 'rgba(255,140,0,1)',

size: 2

}

};

break;

}

return style;

}

});

//背景地図の指定

L.tileLayer('http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {

maxZoom: 20,

id: 'examples.map-i86knfo3'

}).addTo(map);

//バイナリベクトルタイルレイヤーを地図に追加する

map.addLayer(mvtSource);

サンプルコードをGithubにアップしています。

sample

拡張子について

今回タイルファイルの拡張子をpbfとして生成したのですが、作り直すのも面倒なのでそのまま使っています。
しかし、ファイルサフィックスについては、いろいろと混乱があるみたいなのですが、まぁMapboxのルールに準じるのが無難かと。

Mapbox Vector Tile Specification | Mapbox

Format

Vector tiles are encoded as Google Protobufs (PBF), which allow for serializing structured data. For clarity, Mapbox Vector Tiles use the .mvt file suffix. The specification details are largely structured around the rules implemented in the base .proto file found here.

How are OSM PBF files related to Mapbox Vector Tiles?

They are not related at all. PBFs are a format, much like XML and can take many forms. Mapbox Vector Tiles and OSM PBFs are protobuf files, but conform to completely different specifications and are used in different ways.

Mapboxが提案した構造化データを、Google Protobufs (PBF)規格でエンコードしたものにかんしては.mvt拡張子を使用するよとのこと。OSM PBFファイルとはなんの関係もないよってことらしいです。

デバッグについて

下記の記事を参照してください。

・バイナリベクトルタイルのデバッグツール

バイナリベクトルタイルとは

バイナリベクトルタイル出会うまでの私

静的バイナリベクトルタイルの作り方

GeoJSONを作る

バイナリベクトルタイルを作る

静的ファイルに展開する

leafletを使って表示する

拡張子について

デバッグについて

投稿者: shimizu