Last active
May 29, 2024 04:38
-
-
Save shimizu/385aff2837f6054d1ba839c1542159f3 to your computer and use it in GitHub Desktop.
バイナリベクトルファイル(pbf)の作り方
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit | |
| height: 1200 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "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