Create a gist now

Instantly share code, notes, and snippets.

@shimizu /.block
Last active Dec 1, 2017

What would you like to do?
バイナリベクトルファイル(pbf)の作り方
license: mit
height: 1200
<!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>
{
"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"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment