バイナリベクトルファイル(pbf)の作り方

<!DOCTYPE html>
<html lang="jp">
<head>
<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/monokai.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>  
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"></script>    
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<style>
body {
  padding: 10px;
}
</style>

</head>

<body>

var doc = (function () {/*
## 概要

geojsonファイルから、スタティックなバイナリベクトルタイルを生成する。

## 必要なもの

下記ツールをインストールしておく。

+ [tippecanoe](https://github.com/mapbox/tippecanoe)
+ [mb-util](https://github.com/mapbox/mbutil)

## 作業フロー

1. geojson -> mbtiles

geojsonをmbtilesファイルに変換する

```sh
  $ tippecanoe -o hoge.mbtiles hoge.geojson
  ```

2. mbtiles -> .pbf

mbtilesファイルを静的なpdfファイルに展開する

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

これで完成。

## TIPS

### mbtilesファイルの内容を確認する

ローカルサーバーが起動するので出力されたurlをブラウザで開いて確認する。。

```sh
$ npm install
$ npm run tessera mbtiles://./<ファイル名>
```

mb-utilを使ってメタ情報を確認することもできる。

```sh
$ mb-util hoge.mbtiles dumps
```

pbf単体の内容を確認したい場合は以下。

[shimizu / vt_pbf2json](https://github.com/shimizu/vt_pbf2json)

*/}).heredoc();
      
var md = marked(doc);
d3.select("body").html(md);
  
d3.selectAll("body pre").each(function() {
  hljs.highlightBlock(this, this.className);
});
</script>

</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js