Lessons from UNVT deployment effort in UN (in Japanese)

Presentation at UNVT workshop in Japanese (2021-05-12)

Transcript

1. 国連でのUNVT実装から 得られた経験 UNVTワークショップ 日本語版 5月12日 鵜生川 （国連地理空間情報課 専門家）
2. （背景）ビジョンとアプローチ • 我々のビジョン: The effective, efficient and universal use of geospatial information in support of all mandates and operations of the United Nations for a better world （国連のための地理空間情報戦略より） • ハイブリッドアプローチ： 商用ソフトとオープンソフトソフトの双方を賢く利用 （UN Open GIS Initiativeの一つの重要な方針）
3. 国連におけるUNVT実装プロジェクト（1） （目標） 効果的、効率的、普遍的な地理空間情報利用のため・・・ • 国連用務に活用するためのウェブマップを構築する。 国連のデータと、OSMのデータをあわせたウェブ地図をベクトルタイ ル技術を使って実現する。 • 自動的な更新方法を開発し、更新頻度を改善する • 国連の環境（セキュリティポリシーや認証システム等）応じてウェブ 地図を開発する。
4. • 開発環境においてウェブ地図を構築（プロトタイプ） データの共有は出来ませんが、作業方法や経験に ついて共有していきます。 （作業レポジトリはGitHubで公開中。） Small scale Bird’s eye view (Building heights are not true) Large scale 本日は、UNVT実装を通 じて得た、それぞれの作 業工程における、いくつ かの経験をご紹介します。 国連におけるUNVT実装プロジェクト（2） With WMS layer
5. 参考： ベクトルタイルをウェブ地図として 配信するために必要なもの • タイルデータ • スタイル情報 • サーバ • マップライブラリ 等 Vector tile Data Web Server (Data hosting) Style description (json) Web Server (consumer) Index (html) With Mapbox GL JS, etc (Javascript Library) General Users Web Map Specifying location 概念図
6. UNVT 作業工程 • ベクトルタイル生産 (データ変換) • ベクトルタイルホスティング • スタイリング • 最適化 Produce Host Style Optimize Import ベースマップのためのUNVTに よるベクトルタイル作成工程 Supported by UNVT, open source scripts Source DB Web APP Users
7. VT 生産 • ソースデータ: • Postresql/PostGIS データベース • 利用したツール: • Tippecanoe: https://github.com/mapbox/tippecanoe • BSD 2-Clause "Simplified" License • LINUX 環境で動作 • Windows環境ではDockerで動かすことも可能 • Nodejs • For efficiently import data into Tippecanoe from PostGIS 生産における難しい点: • Linux環境やDocker環境の構築。 • データサイズが大きい場合は、nodejsのス クリプトで効率的に処理する工夫が必要。 Vector Tiles Source Database GeoJSON Export to GeoJSON With Tippecanoe Source Database Vector Tiles GeoJSON sequence を 直接 Tippecanoeに 一般的なフロー 今回のフロー フォーマットはmbtiles • タイル数が多い • データサイズが大きい （150GB以上）
8. Area Number of modules (ZL4-5-6) Data size (osm & un merged) Conversion Time (c=3) Priority 69 (0-13-56) 14 GB 4h41m 1 114 (0-13-101) 25 GB 8h35m 2 116 (6-38-72) 20 GB 6h45m 3 31 (0-0-31) 26 GB 6h45m 4 118 (6-29-83) 27 GB 9h19m 5 126 (37-29-60) 21 GB 7h45m 6 137 (36-48-53) 19 GB 7h20m 7 130 (90-40-0) 29 GB 8h34m Total 841 modules （ご参考）データ更新の方針 地理空間情報の分布は一様ではなく、更新のための適 切な区分け、更新モジュールサイズの設定が重要！
9. ベクトルタイル変換の第一歩： シンプルなファイルをベクトルタイルに！！ UNVT ツールのうちDocker packageが利用可能です！ ( github.com/unvt/nanban ) 練習のためのワークフロー（例）: 1. Docker（unvt/nanban）をスタート (作業フォルダを /data とする ) 2. Gdalを使ってデータを GeoJSON に変換 3. Tippecanoe を実行し、ベクトルタイル（pbf形式）を得る。 Vector Tiles Source Database GeoJSON Export to GeoJSON With Tippecanoe Ordinal workflow > tippecanoe -e /data/cartotile --no-tile-compression --no-feature-limit --no-tile-size-limit --drop-rate=1 -L (layername):/data/(GeoJSON name).geojson -L (layername):/data/(GeoJSON name).geojson
10. ホスティング タイルデータ 配信 Nodejsサーバを使い、mbtilesデータからpbfファイルを配 信。 UNVT レポジトリ: https://github.com/un-vector-tile-toolkit/onyx ※ 国連で必要な認証機能も追加 ウェブ地図 ＋ ZXY方式でのベクトルタイル配信 “https://aaa.bbb.ccc/{z}/{x}/{y}.pbf” ソースデータが少量データ（pbf形式）ならば静的なサー バで十分！ 練習の際にはGitHubページを活用！ 地図記号（Sprite） 国連にて使っていた既存の地図記号を利用。 ※ Sprite： 地図記号や地物描画のための画像テンプレート https://docs.mapbox.com/mapbox-gl-js/style- spec/sprite/ テキストフォント（Glyphs） 主にOpenmaptilesのフォントを利用。 https://github.com/openmaptiles/fonts Noto Sans (Bold, Bold Italic, Italic, Regular) Noto Sans CJK (Bold, Regular) Open Sans (Bold, Semibold, Bold Italic, Italic, Regular) マップライブラリ Mapbox-gl js version 1.xを利用。 （ver 1.x は 3-Clause BSD license） ※ version 2（2020.12月）からのライセンス変更に留意 スタイル情報 作成については後ほど説明 静的なホスティング 動的なホスティング ～ベクトルタイル（マップ）ホスティングサーバに必要なもの
11. スタイリング How cat we add style information? mapbox-gl.js takes map styles that conform to the Mapbox Style Specification. For detail, go to: https://docs.mapbox.com/mapbox-gl-js/style-spec/ (Other map libraries also follows main part of that specification.) • スタイル情報はなぜ必要か？ • ベクトルタイルはスタイル情報がない。 • スタイルを特定し、地図をデザインする。 • フォーマット “style.json” • JSON オブジェクトとしてスタイルを記載 • with specific root level and nested properties • スタイルの作成方法（主なもの） • テキストエディタで編集 (it is tough work though…) • Mapbox Studio • Maputnik (an open source visual editor for mapbox style spec.) • UN Vector Tile Toolkit (e.g. naru with HOCON) ArcGIS Pro or ArcGIS Vector Tile Style editor may be able to edit style, but I felt that they were not so flexible for external source data.
12. ルートレベルでの主要なプロパティ • version: Style specification number. Must be 8. (required) • source: Data source. (required) • glyphs: A URL for glyphs (text font, etc). (optional) • sprite: A base URL for the sprite image (map symbols). (optional) • layers: Layers drawn in the order of this array. (required) • center: Default map center (optional) • zoom: default zoom level (optional) Source and layers are important parts. From https://docs.mapbox.com/mapbox-gl-js/style-spec/root/ スタイリング - a style.jsonの主な要素
13. ベースマップのためのスタイル記載 style.json はレイヤー数が多いと長くなります. 今回の作業では、数千行になりました。 … … You will be familiar with this if you try several times.
14. Maputnik での スタイル付け • ソースレイヤの確認、簡易なスタイル表示確認にはMaptnikも利用。 （スタイリングの入門としても使いやすいツール。） • Maputnik A free and open visual editor for the Mapbox GL styles targeted at developers and map designers. • https://github.com/maputnik/editor • https://maputnik.github.io/editor/ I used this at the initial stage so that I can confirm the converted vector tile. 一部の進んだ表現等の対応していないもの があります。
15. 効率的な styling – UNVT での経験 hocon parser の利用 Each component and its sub-components can be written separately as a text file. Then, merged using hocon parser.
16. We can immediately get the style.json (Several thousands lines) 効率的な styling – UNVT での経験
17. 利用事例: ウェブ地図
18. 利用事例: 他のライブラリでも・・・ ArcGIS API for JavaScript • ベクトルタイルの表示をテスト • ArcGIS API for JavaScript でもベクトルタイルとスタイルを読み込める *Mapbox-GL JS のすべてに対応している訳ではない。 Mapbox GL JS ArcGIS API fpr JavaScript テストマップ （オープンデータを利用。国連が確認したデー タではありません。）. • https://ubukawa.github.io/map-test/maps/test- simple-mapbox.html • https://ubukawa.github.io/map-test/maps/test- simple-arc.html 単純な style.json であればどちらのライブラリでも対応できる。 ArcGIS APIは 例えば “match”のような表現は使えない。 Sing up for ArcGIS developer is needed: https://developers.arcgis.com/javascript/latest /guide/licensing/#licensing-requirements
19. 利用事例: QGISでのベクトルタイル Sample 1: Without styling (test with our data) Sample 2: With simple styling (test with test data) （作業中）大縮尺での背景図 課題: • QGIS は mapbox-gl jsの表現にすべて対応している訳ではない。 • Azure AD 認証は QGIS Vector tile Connection にサポートされていない。 Ｖ3．16以降でのベクトルタイル読み込み
20. 現在の課題 • Azure AD 認証への対応 • UNVTに限らず既存のオープンソース技術にも多くみられる課題。 • GIS ソフト（ ArcGIS, QGIS, etc.）等での消費 • ウェブ地図としてウェブブラウザから見るだけでなく、現在使われているGIS ソフトウェアでのデータ表示を確認していくことが重要。
21. まとめ ベクトルタイルの生産、ホスティング、スタイリングの各ステップにおける 経験の一部を紹介。 Then, where can you start? • ベクトルタイルに変換したいデータを確認する • データサイズをチェックし、ベクトルタイルのフォーマットを確認 • サーバの要件（動的・静的、認証機能の有無） • シンプルな作業であれば、windows環境でもDockerで実施可能 • Docker package available for casual trial (unvt/nanban) 皆様の関心分野、ご経験をお知らせ下さい！