Charites + GitHub で完結 ベクトルタイルのスタイリングをしてみよう

2021-12-05T13:00/16:00 @ FOSS4G 2021 Japan Online

Transcript

1. Charites + GitHub で完結 ベクトルタイルのスタイリングをし てみよう 国連ベクトルタイルツールキット・国土地理院　藤村　英範 国連ベクトルタイルツールキット・Geolonia　　大橋　直記 2021-12-05T13:00/ @ FOSS4G 2021 Japan Online
2. 藤村　英範（ふじむら　ひでのり） 情報工学採用（今でいうデジタル採用）の国土 地理院職員 国連ベクトルタイルツールキット共同主任
3. 大橋　直記（おおはし　なおき） 株式会社 Geolonia所属 エンジニア 国連ベクトルタイルツールキットメンバー Geolonia では地図スタイル開発を担当。 UNVTでは、主に Charites に貢献しています。 GitHub: https://github.com/naogify Twitter: https://twitter.com/naogify
4. 国連ベクトルタイルツールキットの概要 南極ベクトルタイルの設計・生産
5. ベクトルタイル 私たちの時代の地図刊行技術 デジタル・プラットフォーマー以外の私たちにも使える形を確保したい →　国連ベクトルタイルツールキット 藤村の国連出向を機会に、ベクトルタイルの生産・ホスト・スタイル・最適化の技術を オープンソース・ソフトウェア・プロジェクトとして構成したもの
6. 国連ベクトルタイルツールキット 第一世代 第二世代 生産 produce tippecanoe ホスト host budo, nginx スタイル style hocon-parser charites 最適化 optimize vt-optimizer 利用 use storytelling 開発・能力構築インフラとして、GitHub 及び Raspberry Pi を好んで使う
7. https://github.com/unvt タミル語で友達という意味。 アルバニアへの技術移転の中でタ ミル語を話す技術者がいたことに ちなむ。 JICAプロジェクトを通じた アルバニア当局への能力構築に 使用。国章にちなむ。 Equinox にリリース。 毎年2回記念日がくる。
8. UNVT 国連ベクトルタイルツールキット ソフトウェア optgeo 里親ジオデータ データ FTS Kit 自由なタイルサービス ハードウェア
9. ハンズオンで実施すること UNVT 利用 最 適 化 ス タイ ル 生産 ホスト
10. ハンズオンで実施しないこと 1. ベクトルタイルの生産 2. ベクトルタイルのホスト 3. ベクトルタイルの最適化 4. ベクトルタイルの利用
11. ベクトルタイルの生産
12. ベクトルタイルのホスト • 多くのケースでは、データ量が 1GB を超えないので、GitHub Pages で　ホスト することをお勧めしている。ソースデータが 500MB 以下なら、GithHub Pages でホストできる場合が多い。 • データ量が 50GB 程度までの場合、ウェブサーバーにベクトルタイルを　素直に おく方法をお勧めしている。 ◦ 国土地理院でも、タイルは素直にオブジェクトストレージに置いている。 • データ量がさらに大きい場合のホスト方法もある。UNVTの場合は、mbtiles ファ イルを複数並べ、 Node.js でオリジンサーバーを書く。
13. FTS Kit 1 自宅からベクトルタイルサービス
14. FTS Kit とは? FTS は UNVT で構築されたタイルサービス FTS Kit は FTS の物理パッケージであり、複数の Raspberry Pi 4B で構成 FTS Kit は 自由で(Free), 速く(Fast), フェアで(Fair), 楽しく(Fun), 柔軟で (Flexible), 現場指向(Field-oriented) 🙂 FTS Kit 1 は FTS Kit の最初のプロトタイプで、在宅勤務で作ったもの
15. FTS Kit 1: 物理的配備 https://x.optgeo.org/kid-c 毎日24時間連続で稼働中 Let’s Encrypt と Route 53 を利用
16. FTS Kit 1: system diagram m321 m330 m343 m349 m354 m358 Wi-Fi アクセ スポイント Web / NFS サーバー ベクトルタイル生産
17. ベクトルタイルの最適化
18. 今回チュートリアルに用いるタイルに vt-optimizer を実行 最大タイルサイズ 100KB 以下 平均タイルサイズ 25KB 以下 →　等高線を間引いて実現 小縮尺に大縮尺のデータを使いま わさず、小縮尺にはそのために設 計されたデータを使うのが好みで ある。
19. スタイル＆利用
20. UNVT / optgeo / FTS Kit 全体像　https://github.com/orgs/unvt/projects/2/views/1
21. 国連ベクトルタイルツールキットの概要 南極ベクトルタイルの設計・生産
22. https://www.nipr.ac.jp/antarctic/
23. 南極地域観測第X期6か年計画（2021-10-27 南極地域観測統合推進本部 最終案） 1. 空中写真等により大縮尺地形情報を、衛星画像により小縮尺地形情報を整備 2. 積極的にインターネット等を活用し測量成果の公開・提供を行う 3. 昭和基地デジタルトランスフォーメーション（エネルギーマネジメントシステムとローカル 5Gシステムによるスマートシティ化） 4. 観測データは、人類の共有資産であり、広く社会にオープンにして、還元すべき
24. 1:2,500 南極地形図 in 地理院地図
25. https://www.youtube.com/watch?v=Z3-S4EtlpD8 第63次南極地域観測隊本隊は、 2021年11月10日（水）、海上 自衛隊横須賀地方総監部で南極観測船「しらせ」に　乗船し、南 極に向けて出発
26. https://yab.yomiuri.co.jp/adv/hosei/voice/post_85.php 澤柿隊長のUNVTへの期待 基地の建物・道路・雪上車の ルートなどの地理情報をベクト ルタイルにして，インターネット が使えない場所でもオンプレミ スで使えるようにするのが最終 目標となります．そのシステム としてUNVTに期待していると ころです． Source: https://github.com/optgeo/63a nts/discussions/2
27. 63次隊本隊現在位置 https://www.nipr.ac.jp/antarctic/jare/map63.html しらせ →インターネットなし 昭和基地 →インターネットあり
28. https://github.com/optgeo/63ants/discussions
29. https://github.com/optgeo/63ants/discussions/2
30. https://x.optgeo.org/a-1
31. 南極ベクトルタイルの設計
32. 南極ベクトルタイルの配備 FTS Kit 1 に配備。理由はデータセットのサイズではなく、 南極 でオンプレミス配備できることを実証するため。
33. “Hit me!” 　　　　　　　https://x.optgeo.org/(a-1 | kid-c | hrlulc)
34. 南極ベクトルタイルのスタイル UNVT の最新コンポーネントである Charites を用いて実装
35. Charites を採用して達成したいゴール 1. スタイルを自由にする 2. 良いスタイルができる 3. 南極で役に立つ ※ベクトルタイル設計も改善していく よろしければ、ご一緒に！ 現場運用を「紙地図とハンディGPS」から「スマー トフォン端末」に順次切り替えていきたい。イン キュベーション的な試行ののち、数年のうちに本 格導入できると良い。 https://github.com/optgeo/a-1
36. Charites によるスタイルの変更
37. Charites とは？ https://github.com/unvt/charites
38. Charites とは？ ・オープンソースの地図のデザインツールキット（@UNVT) スタイル、アイコン(sprite)、フォント(glyphs) のビルドなど、 スタイルに必要な作業が完結できるCLIツール（アイコンやフォント関連の機能は今後リリース予定 ） 特徴 ・オープンソース ・Mapbox や MapLibre のスタイルと互換性がある ・CLIツール
39. 世の中には色んな地図があります
40. 地図のスタイルをデザインするとは？ ベクトルタイル transportation（道路など） water（川・湖など） タイルのレイヤー poi（駅、飲食店など） name: 東京駅 class:station coordinates:139.7,35.6 name: ラーメン屋 class:restaurant coordinates:xxx, xxx データ：座標や、 classなど属性を持 つ スタイル タイルURL: https://xxxxx.com layers water レイヤー source: タイル名 source-layer: poi paint: … layout : ... poi レイヤー スタイルのレイヤー
41. 地図のスタイルをデザインするとは？ タイルに入っているデータを、 データの種類別にデザインを決め、 レイヤー形式で表示する。
42. スタイルの指定の形式 ・Mapbox ：Mapbox GL JS Style Spec 　・JSON形式で指定 ・Charites 　・JSON形式のスタイルファイルを、分かりやすいYAML形式に変換する 　・今回はYAML形式のスタイルファイルを触っていきます。
43. 地図のデザインをする方法
44. ハンズオンで使用するリポジトリ - 南極地図のスタイル https://github.com/optgeo/antarctica-style
45. style.yml の中身を見てみる
46. レイヤーの中身を見てみる
47. 開発の準備
48. 開発の準備 1. https://github.com/optgeo/antarctica-style にアクセス 2. [Use this template] でテンプレートをコピー 3. GitHubPages を設定 4. https://<あなたのGitHubユーザー名>.github.io/antarctica-style/ で地図が 表示されるか確認
49. まずは色を変えてみる 背景色を変えてみる。 background.yml の paint の background-color を rgb(255, 0, 0) に変更する。
51. 次にサイズを変えてみる 道路の太さを変えてみる。 road.yml の paint の line-width を 10 に変更する。
53. テキストサイズを変更してみる テキストの大きさを変えてみる。 symbol.yml の layout の text-size を 50 に変更する。
54. paint / layout について type ( fiill, line, symbol )ごとに指定できる paint / layout のプロパティが違います。
55. ドキュメントの読み方 MapLibre GL JS Style Spec の レイヤーセクションにアクセス。 右のサイドバーでレイヤータイプを選 んで下さい。 1. レイヤータイプを選ぶ https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/
56. ドキュメントの読み方 そのタイプで使えるオプションの一覧 が表示されます。 使いたいオプションを選びます。 2. オプションを選ぶ
57. ドキュメントの読み方 使用したいオプションをクリックすると paint か layout プロパティかを書い ています。 それに沿ってお使いください。 3. プロパティの種類に注意
58. 実践・スタイルを改善していく
59. 成果発表・ハッカソン
60. 地図に自由を Let maps fly データに愛着を Passion for data
61. Thanks! Contact us: https://github.com/unvt