Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ベクトルタイルマップのソースについて #1

Open
ShogoHirasawa opened this issue Feb 11, 2022 · 3 comments
Open

ベクトルタイルマップのソースについて #1

ShogoHirasawa opened this issue Feb 11, 2022 · 3 comments

Comments

@ShogoHirasawa
Copy link

突然失礼します。
ホスティングされているこのWeb地図で使用しているベクトルタイルはOSMのデータをしようしているとTwitterでお見かけしました。

これは、OSMがベクトルタイルとして提供しているマップを使用したのでしょうか?それか、自身でOSMのデータを加工しベクトルタイル化したものを使用したという感じでしょうか?

使用しているベクトルタイルのダウンロード先もしくは、生成方法等について教えていただけたら幸いです。

お忙しいなかではあると思いますが、返信頂けたら嬉しいです。

@yuiseki
Copy link
Owner

yuiseki commented Feb 12, 2022

ご連絡ありがとうございます!

OSMが提供しているベクトルタイルを表示しているのではなく、
OSMのデータを元に自分で作ったベクトルタイルを、GitHub Pagesに配置して配信しています。

OSMのデータは download.geofabrik.de というWebサイトで、様々な形式で配布されています。
たとえば日本の関東のOSMデータは以下のURLでダウンロードできます。
https://download.geofabrik.de/asia/japan/kanto.html

簡単に流れを説明しますと、
まず download.geofabrik.de からPBFファイルをダウンロードして、
PBFファイルを tilemaker というソフトウェアでMBTiles形式のファイルに変換して、
tippecanoe というプロジェクトに含まれる tile-join コマンドでMBTilesファイルを /{z}/{x}/{y}/.*pbf に展開します。

https://github.com/systemed/tilemaker
https://github.com/mapbox/tippecanoe

さらにタイルサーバーにはTileJSONが必要なので、私の作ったmbtiles2tilejsonというコマンドで、MBTilesファイルからTileJSONファイルを生成しています。

https://github.com/yuiseki/mbtiles2tilejson
https://www.npmjs.com/package/mbtiles2tilejson

英語ですが以下にベクトルタイルを自作する手順ついて多少詳しい説明を書きましたので、
良かったらぜひ読んでみてください。
不明な点などありましたらコメントをいただけるとありがたいです。
https://scrapbox.io/yuiseki/How_to_create_your_own_vector_tile_web_maps

また、このリポジトリはさらに改善していって、最終的にはForkして設定を少し書き換えるだけで任意の地域のベクトルタイル地図をGitHub Pagesにデプロイできるようにしたいと考えています。

@ShogoHirasawa
Copy link
Author

ご丁寧にありがとうございます!
手順書の共有までありがとうございます。

手順書に沿って一度自身でもベクトルタイルを制作してみようと思います!

@ShogoHirasawa
Copy link
Author

以前紹介していただいた、手順書について質問があります。

手順書の[Generate .mbtiles -> /{z}/{x}/{y}/.pbf]の章で作成したベクトルタイルのsource-layer名はどのように確認すればよいでしょうか。
Tippiacnueを使い始めてまだ日が浅く、教えていただけるたら幸いです。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants