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

index.html

<!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>


  
<script>  
if(!Function.heredoc) Function.prototype.heredoc = function(){
	return this.toString().match(/(?:\/\*(?:[\s\S]*?)\*\/)/).pop().replace(/^\/\*/, "").replace(/\*\/$/, "");
}

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>

package.json

{
  "name": "make-vt",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "tessera": "tessera",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "mbtiles": "^0.9.0",
    "tessera": "^0.9.0",
    "tilelive-vector": "^3.9.4",
    "tilelive-xray": "^0.3.0"
  }
}