$30 off During Our Annual Pro Sale. View Details »

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

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

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

Hidenori FUJIMURA

December 05, 2021
Tweet

More Decks by Hidenori FUJIMURA

Other Decks in Technology

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) に変更する。
  50. None
  51. 次にサイズを変えてみる 道路の太さを変えてみる。 road.yml の paint の line-width を 10 に変更する。

  52. None
  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