Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

    View Slide

  2. 藤村 英範(ふじむら ひでのり)
    情報工学採用(今でいうデジタル採用)の国土
    地理院職員
    国連ベクトルタイルツールキット共同主任

    View Slide

  3. 大橋 直記(おおはし なおき)
    株式会社 Geolonia所属 エンジニア
    国連ベクトルタイルツールキットメンバー
    Geolonia では地図スタイル開発を担当。
    UNVTでは、主に Charites に貢献しています。
    GitHub: https://github.com/naogify
    Twitter: https://twitter.com/naogify

    View Slide

  4. 国連ベクトルタイルツールキットの概要
    南極ベクトルタイルの設計・生産

    View Slide

  5. ベクトルタイル
    私たちの時代の地図刊行技術
    デジタル・プラットフォーマー以外の私たちにも使える形を確保したい
    → 国連ベクトルタイルツールキット
    藤村の国連出向を機会に、ベクトルタイルの生産・ホスト・スタイル・最適化の技術を
    オープンソース・ソフトウェア・プロジェクトとして構成したもの

    View Slide

  6. 国連ベクトルタイルツールキット
    第一世代 第二世代
    生産 produce tippecanoe
    ホスト host budo, nginx
    スタイル style hocon-parser charites
    最適化 optimize vt-optimizer
    利用 use storytelling
    開発・能力構築インフラとして、GitHub 及び Raspberry Pi を好んで使う

    View Slide

  7. https://github.com/unvt
    タミル語で友達という意味。
    アルバニアへの技術移転の中でタ
    ミル語を話す技術者がいたことに
    ちなむ。
    JICAプロジェクトを通じた
    アルバニア当局への能力構築に
    使用。国章にちなむ。
    Equinox にリリース。
    毎年2回記念日がくる。

    View Slide

  8. UNVT
    国連ベクトルタイルツールキット
    ソフトウェア
    optgeo
    里親ジオデータ
    データ
    FTS Kit
    自由なタイルサービス
    ハードウェア

    View Slide

  9. ハンズオンで実施すること
    UNVT
    利用




    タイ

    生産
    ホスト

    View Slide

  10. ハンズオンで実施しないこと
    1. ベクトルタイルの生産
    2. ベクトルタイルのホスト
    3. ベクトルタイルの最適化
    4. ベクトルタイルの利用

    View Slide

  11. ベクトルタイルの生産

    View Slide

  12. ベクトルタイルのホスト
    ● 多くのケースでは、データ量が 1GB を超えないので、GitHub Pages で ホスト
    することをお勧めしている。ソースデータが 500MB 以下なら、GithHub Pages
    でホストできる場合が多い。
    ● データ量が 50GB 程度までの場合、ウェブサーバーにベクトルタイルを 素直に
    おく方法をお勧めしている。
    ○ 国土地理院でも、タイルは素直にオブジェクトストレージに置いている。
    ● データ量がさらに大きい場合のホスト方法もある。UNVTの場合は、mbtiles ファ
    イルを複数並べ、 Node.js でオリジンサーバーを書く。

    View Slide

  13. FTS Kit 1
    自宅からベクトルタイルサービス

    View Slide

  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 の最初のプロトタイプで、在宅勤務で作ったもの

    View Slide

  15. FTS Kit 1: 物理的配備
    https://x.optgeo.org/kid-c
    毎日24時間連続で稼働中
    Let’s Encrypt と Route 53 を利用

    View Slide

  16. FTS Kit 1: system diagram
    m321 m330 m343 m349 m354 m358
    Wi-Fi アクセ
    スポイント
    Web / NFS
    サーバー
    ベクトルタイル生産

    View Slide

  17. ベクトルタイルの最適化

    View Slide

  18. 今回チュートリアルに用いるタイルに vt-optimizer を実行
    最大タイルサイズ 100KB 以下
    平均タイルサイズ 25KB 以下
    → 等高線を間引いて実現
    小縮尺に大縮尺のデータを使いま
    わさず、小縮尺にはそのために設
    計されたデータを使うのが好みで
    ある。

    View Slide

  19. スタイル&利用

    View Slide

  20. UNVT / optgeo / FTS Kit 全体像 https://github.com/orgs/unvt/projects/2/views/1

    View Slide

  21. 国連ベクトルタイルツールキットの概要
    南極ベクトルタイルの設計・生産

    View Slide

  22. https://www.nipr.ac.jp/antarctic/

    View Slide

  23. 南極地域観測第X期6か年計画(2021-10-27 南極地域観測統合推進本部 最終案)
    1. 空中写真等により大縮尺地形情報を、衛星画像により小縮尺地形情報を整備
    2. 積極的にインターネット等を活用し測量成果の公開・提供を行う
    3. 昭和基地デジタルトランスフォーメーション(エネルギーマネジメントシステムとローカル
    5Gシステムによるスマートシティ化)
    4. 観測データは、人類の共有資産であり、広く社会にオープンにして、還元すべき

    View Slide

  24. 1:2,500 南極地形図 in 地理院地図

    View Slide

  25. https://www.youtube.com/watch?v=Z3-S4EtlpD8
    第63次南極地域観測隊本隊は、
    2021年11月10日(水)、海上
    自衛隊横須賀地方総監部で南極観測船「しらせ」に 乗船し、南
    極に向けて出発

    View Slide

  26. https://yab.yomiuri.co.jp/adv/hosei/voice/post_85.php
    澤柿隊長のUNVTへの期待
    基地の建物・道路・雪上車の
    ルートなどの地理情報をベクト
    ルタイルにして,インターネット
    が使えない場所でもオンプレミ
    スで使えるようにするのが最終
    目標となります.そのシステム
    としてUNVTに期待していると
    ころです.
    Source:
    https://github.com/optgeo/63a
    nts/discussions/2

    View Slide

  27. 63次隊本隊現在位置 https://www.nipr.ac.jp/antarctic/jare/map63.html
    しらせ
    →インターネットなし
    昭和基地
    →インターネットあり

    View Slide

  28. https://github.com/optgeo/63ants/discussions

    View Slide

  29. https://github.com/optgeo/63ants/discussions/2

    View Slide

  30. https://x.optgeo.org/a-1

    View Slide

  31. 南極ベクトルタイルの設計

    View Slide

  32. 南極ベクトルタイルの配備
    FTS Kit 1 に配備。理由はデータセットのサイズではなく、 南極
    でオンプレミス配備できることを実証するため。

    View Slide

  33. “Hit me!”        https://x.optgeo.org/(a-1 | kid-c | hrlulc)

    View Slide

  34. 南極ベクトルタイルのスタイル
    UNVT の最新コンポーネントである
    Charites を用いて実装

    View Slide

  35. Charites を採用して達成したいゴール
    1. スタイルを自由にする
    2. 良いスタイルができる
    3. 南極で役に立つ
    ※ベクトルタイル設計も改善していく
    よろしければ、ご一緒に!
    現場運用を「紙地図とハンディGPS」から「スマー
    トフォン端末」に順次切り替えていきたい。イン
    キュベーション的な試行ののち、数年のうちに本
    格導入できると良い。
    https://github.com/optgeo/a-1

    View Slide

  36. Charites によるスタイルの変更

    View Slide

  37. Charites とは?
    https://github.com/unvt/charites

    View Slide

  38. Charites とは?
    ・オープンソースの地図のデザインツールキット(@UNVT)
    スタイル、アイコン(sprite)、フォント(glyphs) のビルドなど、
    スタイルに必要な作業が完結できるCLIツール(アイコンやフォント関連の機能は今後リリース予定

    特徴
    ・オープンソース
    ・Mapbox や MapLibre のスタイルと互換性がある
    ・CLIツール

    View Slide

  39. 世の中には色んな地図があります

    View Slide

  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 レイヤー
    スタイルのレイヤー

    View Slide

  41. 地図のスタイルをデザインするとは?
    タイルに入っているデータを、
    データの種類別にデザインを決め、
    レイヤー形式で表示する。

    View Slide

  42. スタイルの指定の形式
    ・Mapbox :Mapbox GL JS Style Spec
     ・JSON形式で指定
    ・Charites
     ・JSON形式のスタイルファイルを、分かりやすいYAML形式に変換する
     ・今回はYAML形式のスタイルファイルを触っていきます。

    View Slide

  43. 地図のデザインをする方法

    View Slide

  44. ハンズオンで使用するリポジトリ - 南極地図のスタイル
    https://github.com/optgeo/antarctica-style

    View Slide

  45. style.yml の中身を見てみる

    View Slide

  46. レイヤーの中身を見てみる

    View Slide

  47. 開発の準備

    View Slide

  48. 開発の準備
    1. https://github.com/optgeo/antarctica-style にアクセス
    2. [Use this template] でテンプレートをコピー
    3. GitHubPages を設定
    4. https://<あなたのGitHubユーザー名>.github.io/antarctica-style/ で地図が
    表示されるか確認

    View Slide

  49. まずは色を変えてみる
    背景色を変えてみる。
    background.yml の
    paint の background-color を
    rgb(255, 0, 0) に変更する。

    View Slide

  50. View Slide

  51. 次にサイズを変えてみる
    道路の太さを変えてみる。
    road.yml の paint の line-width を
    10 に変更する。

    View Slide

  52. View Slide

  53. テキストサイズを変更してみる
    テキストの大きさを変えてみる。
    symbol.yml の layout の text-size を
    50 に変更する。

    View Slide

  54. paint / layout について
    type ( fiill, line, symbol )ごとに指定できる
    paint / layout のプロパティが違います。

    View Slide

  55. ドキュメントの読み方
    MapLibre GL JS Style Spec の
    レイヤーセクションにアクセス。
    右のサイドバーでレイヤータイプを選
    んで下さい。
    1. レイヤータイプを選ぶ
    https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/

    View Slide

  56. ドキュメントの読み方
    そのタイプで使えるオプションの一覧
    が表示されます。
    使いたいオプションを選びます。
    2. オプションを選ぶ

    View Slide

  57. ドキュメントの読み方
    使用したいオプションをクリックすると
    paint か layout プロパティかを書い
    ています。
    それに沿ってお使いください。
    3. プロパティの種類に注意

    View Slide

  58. 実践・スタイルを改善していく

    View Slide

  59. 成果発表・ハッカソン

    View Slide

  60. 地図に自由を
    Let maps fly
    データに愛着を
    Passion for data

    View Slide

  61. Thanks!
    Contact us:
    https://github.com/unvt

    View Slide