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