ベクトルタイル：UNVT入門・ツール紹介（非公式カタログのようなもの。2022年4月現在、私がよく使うツール）　

# はじめに
国連ベクトルタイルツールキット（UNVT: United Nations Vector Tile Toolkit）は2018年に@hfuさんが立ち上げ、UN Open GIS Initativeの活動の一つとして位置づけられています。これまでに、ベクトルタイルの、生産、スタイル、ホスト、最適化、消費（利用）の各ステップにおいて使うことのできる様々なツールが整備されてきました。

この記事では、UNVTのツールのうち、私がよく使うものについて『勝手に』紹介したいと思います。**UNVTに関して、どんなツールがあるかイメージがない方の参考になればと思います**し、それに加えて、ベクトルタイルを実務で使う方にとっては、**ツールのカタログのような役割を果たしてくれるといいなぁという思いを込めて**、この記事を書こうと思います。（実験的にやってみます。非公式カタログのようなものになるといいなと思います。）

# 注意点
この記事は2022年4月現在の私の経験に基づいてまとめています。

各ツールについて、どの作業領域（生産、スタイル、ホスト、最適化、消費（利用）等）で使うかも併せて紹介していますが、ここは私の主観によります。違う分野でも使えるかもしれません。

また、UNVTはたくさんのオープンソースツールを使っていますので、ここで紹介するツールは本当はツール群というべきかもしれませんし、その中での重複もあったりします。ツールという用語が適切ではないのかもしれませんが、初めて見る人の参考になればと思い、あえて簡単に書いています。

# ツール一覧
## ★★おすすめツール１（いろいろな用途に使えます）★★
|ツール名|公開時期|開発者（主な）|利用領域|概要|
|:--|:-:|:-:|:-:|:--|
|unvt/tell|2021.9|hfuさん|利用|ベクトルタイルマップを背景にしたストーリーテリング（地図語り）を作成できます（MapLibre）。ホームページをスクロールしていくにつれて、地図シーンが動き、説明が出るというものです。ストーリーはYAMLファイルで記述できます。|
|unvt/charites|2021.10|Geolonia Inc.|スタイル|MapBoxやMapLibre用のスタイルを、編集しやすいYAMLファイルで作成・編集できます。json形式のスタイルファイルからのインポートや、反対にエクスポートの機能もあります。編集成果をその場で確認できるライブ地図プレビューも実行できます。GeoloniaさんがUNVTに寄贈してくれたツールです。|
|unvt/kata|2022.3|GSI, Japan、Geolonea Inc.|生産、最適化|ソースファイルごとにレイヤ名、最大ZL、最小ZLを指定してJSONシーケンスに出力するフィルター機能と、既存ベクトルタイルのメタデータからレイヤ名、属性名、ズームレベル範囲を出力するdocument機能があります。filterしたデータはtippecanoeに受け渡すことで簡単にレイヤ構造を調整したベクトルタイルを作成できます。|
|unvt/itoma|2022.3|GSI, Japan、Geolonea Inc.|スタイル、ホスト|ベクトルタイルのスタイル（charitesでインポートしたYAML形式）を複数のベクトルタイルライブラリ（Mapbox GL JS, MapLibre GL JS, ArcGIS API for Javascript）でプレビューします。また、ArcGIS REST APIのVectorTileServerサービスに準じたレスポンスを返すので、ArcGIS Onlineでのベクトルタイルマップ利用のチェックができます。（注：Localhostのhttps化が必要）|
|unvt/nanban|2020.4|hfuさん|全般|Ubuntu/IntelベースのUNVTドッカーファイル。Docker コンテナを通してWindowsユーザーにLinuxの環境環境を与える。|
|unvt/equinox|2020.3|hfuさん|全般|Raspberry Pi用のUNVT関係ツールインストーラー。|

（※なお、ここには書いていませんが、UNVT PortalなどもUN Open GIS で報告されている期待のツールの一つです。ツール開発が一段落して、unvt/portableのレポジトリからツールが公開されましたらどこかで紹介できればと思います。）

## ★★おすすめツール２（少し用途が専門的になってきます）★★

|ツール名|公開時期|開発者（主な）|利用領域|概要|
|:--|:-:|:-:|:-:|:--|
|unvt/onyx|2019|hfuさん|ホスト|シンプルでスケーラブルなベクトルタイルサーバーです。nodejs/expressサーバーを立てて、ベクトルタイルをホストします。mbtilesのファイルからpbf形式のベクトルタイルマップを配信します。PM2で実行したり、いろいろと応用できます。|
|unvt/marble|2021.12|ubukawa|ホスト|onyxを拡張し、ArcGIS REST APIのVectorTileServerに準じた反応を返すようにしたサーバー。nodejs/expressで動く。|
|unvt/naru|2020|hfuさん|全般（キャパビル）|Raspberry PiやDockerで動きます。OSMをダウンロードしてきて、ベクトルタイルへの変換、hoconを使ったスタイル作成、spriteの準備などが一通り出来るようになっています。キャパビル用の素材です。|
|unvt/nsft|2022.2| ubukawa |ホスト|ツールというか、Noto SansシリーズのフォントをPBFテキストフォントに変換したフォルダです。|
|unvt/oz|2021.9| hfuさん |ホスト|サーバーサイドでのオーバーズーミングのためのツールです。既存のファイルから大きいズームレベルのタイルを作ります。|
|unvt/zfxy-spec|2022.3| hfuさん |全般|zxyベクトルタイルの拡張の仕様案です。高さ方向の指標fを導入して3次元のタイル空間を定義します。今後の発展に注目です。


# ツール紹介・各論（上記のうち、おすすめツール1）
これから、いくつかツールを紹介します。全部は紹介しませんが、リクエストがあればコメントでおしえてください。できる限り追記します。（今までQiitaでコメントがついたことはないかも・・・）

## unvt/tell
### 概要:
ベクトルタイルマップを背景にしたストーリーテリング（地図語り）を作成できます（MapLibre）。ホームページをスクロールしていくにつれて、地図シーンが動き、説明が出るというものです。ストーリーはYAMLファイルで記述できます。

* htmlファイルと、ストーリーや地図の位置を指定するYAMLファイルを準備することで地図語りを作成することが出来ます。また、htmlファイル中にYAMLタグで記入しても大丈夫です。
* これは、ワークショップの教材として開発され、https://github.com/optgeo/s で開発されたスクリプト（hfuさん、taisukefさん、halskさんが開発されています）をMapLibre用にし、さらによりシンプルな内容にしたものです。
* mapbox/storytellingにインスパイアされていることが明記されており、謝意が示されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679143/aab7f295-9a3a-8e49-6779-069a3856fb61.png)
 
### レポジトリURL: 
https://github.com/unvt/tell

### これまでの取組や参考になるもの:
* UNVT Storytelling workshop (2022-10-22): 
    * Recording: https://www.youtube.com/watch?v=CVajhAUDLMs
    * Slide: https://speakerdeck.com/hfu/unvt-storytelling
* 地理院地図Vector（仮称）のベクトルタイルを使って地図語りを試した（UNVTとMapLibreを利用）: https://qiita.com/T-ubu/items/b970339a49d8f584acf6

## unvt/charites
### 概要:
MapBoxやMapLibre用のスタイルを、編集しやすいYAMLファイルで作成・編集できます。json形式のスタイルファイルからのインポートや、反対にエクスポートの機能もあります。編集成果をその場で確認できるライブ地図プレビューも実行できます。GeoloniaさんがUNVTに寄贈してくれたツールです。**（私はWindowsユーザなので、用途によってはunvt/nanbanでこのツールを使うことが多いです。）**

* ゼロからYAML形式スタイルを作る、あるいは既存のスタイル（JSON）をYAML形式にインポートします。
* スタイルをYAML形式で編集することが出来ます。
* YAMLファイルで管理し、レイヤーのグループを分けることで、メンテナンスの利便性やスタイルの可読性が上がります。
* 編集したYAMLファイルはJSON形式のスタイルに出力できます。
* リアルタイムのプレビューも利用可能で、スタイルの編集成果をその場で確認出来ます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679143/f593642f-4607-f382-4642-de057186bb36.png)
（この図の様に、一つのスタイル情報が複数のYAMLファイルで管理されます。）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679143/94c377f5-881e-2a70-df44-b2d5cf41db7c.png)
（ライブプレビューをしながらYAMLファイルを編集していきます。）

### レポジトリURL: 
https://github.com/unvt/charites
 
### これまでの取組や参考になるもの:
* Geoloniaさんのブログ: https://blog.geolonia.com/2021/10/21/unvt-charites.html
* 私の過去の記事
    * How to edit/modify a style.json of your vector tile map using UNVT/charites: https://qiita.com/T-ubu/items/e6794b81e45dea34548c
    * 地理院地図ベクター（仮称）のスタイルをunvt/charitesで加工しArcGIS Onlineでみてみる（はじめの一歩）:　https://qiita.com/T-ubu/items/87b17bb8752cb15c9d28
    * ArcGIS Online用のベクトルタイルスタイルをunvt/charitesでつかう (How to use UNVT styling tool, charites, to edit a style json from ArcGIS server)　https://qiita.com/T-ubu/items/6e31a6bc5a458b91d4cd

## unvt/kata
### 概要:
ソースファイルごとにレイヤ名、最大ZL、最小ZLを指定してJSONシーケンスに出力するフィルター機能と、既存ベクトルタイルのメタデータからレイヤ名、属性名、ズームレベル範囲を出力するdocument機能があります。filterしたデータはtippecanoeに受け渡すことで簡単にレイヤ構造を調整したベクトルタイルを作成できます。**（私はWindowsユーザなので、用途によってはunvt/nanbanでこのツールを使うことが多いです。）**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679143/5894e19f-920d-1ed8-8d43-05ad0ab21e79.png)
(図はGitHubレポジトリより。初期の構想図ですが、①がdocument機能、②がfilter機能と理解できますね。)

* unvt/kataはベクトルタイルを作る際、フィルター機能を使うことで、ソースごとにレイヤ名、最大・最小ズームレベルを与えることが簡単にできます。以下の様な感じで、フィルターしたものをtippecanoeに渡すことで簡単にベクトルタイルが作成できます。
```
kata filter kata.yml | tippecanoe -e zxy2 --no-tile-compression --no-feature-limit --no-tile-size-limit
```
* ベクトルタイルのレイヤ一覧とプロパティ一覧を確認できるので、とても便利なツールだと思います。
* データが数GBを超えてしまう場合だと、地域によって出力ファイルを分けるというようなセッティングがないので、このツールだけでなくて何か工夫が必要だと思いますが、小規模なデータには便利です。

### レポジトリURL:
https://github.com/unvt/kata

### これまでの取組や参考になるもの:

* 私の過去の記事
    * Making Vector Tile from GeoJSON using unvt (unvt/kata and unvt/nanban)　https://qiita.com/T-ubu/items/4fa0ab633c6746574bdd
    * unvt/kata を使ってみる（第０弾） https://qiita.com/T-ubu/items/22b6c4c07fca9c754df6 （※この記事では旧バージョンのバグのため全ての作業が完了していません。今のv1.0.4ではこの問題は直っています。）

## unvt/itoma
### 概要:
ベクトルタイルのスタイル（charitesでインポートしたYAML形式）を複数のベクトルタイルライブラリ（Mapbox GL JS, MapLibre GL JS, ArcGIS API for Javascript）でプレビューします。また、ArcGIS REST APIのVectorTileServerサービスに準じたレスポンスを返すので、ArcGIS Onlineでのベクトルタイルマップ利用のチェックができます。（注：Localhostのhttps化が必要）
**（私はWindowsユーザなので、用途によってはunvt/nanbanでこのツールを使うことが多いです。）**

* ローカルホストから、スタイルのプレビューを見ることができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679143/0581ed9f-ab4e-fe29-9876-02bd6f063a66.png)
（ ↑ 3つのライブラリでプレビューが出来ます。）
* ArcGIS Onlineでもプレビューするため、ArcGIS REST APIに準じた応答を返します。"itoma serve"を実行することで、ArcGIS REST APIのレスポンスをhtttp://localhost:8080/arcgis/rest/services/{any_name}/VectorTileServer から確認出来ます。
    * index.json: http://localhost:8080/arcgis/rest/services/{any_name}/VectorTileServer/index.json
    * root.json (style): http://localhost:8080/arcgis/rest/services/{any_name}/VectorTileServer/resources/styles/root.json
    * sprites: http://localhost:8080/arcgis/rest/services/{any_name}/VectorTileServer/resources/sprites/
    * glyphs (fonts): http://localhost:8080/arcgis/rest/services/{any_name}/VectorTileServer/resources/fonts/　
    * tilemap: http://localhost:8080/arcgis/rest/services/{any_name}/VectorTileServer/tilemap (ただし、タイルマップではタイルの存在するZLについては固定値が使われています。自分のタイルを使うにはコードをいじる必要があります。）
* 実際に、ArcGIS Olineでベクトルタイル地図を見るためには、ローカルホストをhttpsで見る必要があるのと、CORSの設定をしておくことが必要です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679143/e23d3c55-b53a-962d-9a3e-0ca50a6706c0.png)

### レポジトリURL:
https://github.com/unvt/itoma

### これまでの取組や参考になるもの:
* 私の過去の記事
    * itoma(1)：ベクトルタイルのためのArcGIS Rest API実装ツール unvt/itoma を試してみる https://qiita.com/T-ubu/items/f40f6dd23724cae92db4
    * itoma(2)：unvt/itoma（ベクトルタイルのためのArcGIS REST API 実装ツール） をhttps対応させる https://qiita.com/T-ubu/items/97495f40c8477515239f

## unvt/nanban
### 概要:
Ubuntu/IntelベースのUNVTドッカーファイルです。Docker コンテナを通してWindowsユーザーでもLinuxのような作業環境が得られますので、tippecanoeを使ったベクトルタイル変換が容易に出来ます。gdal（ogr2ogr）、nodejs、rubyなども入っているので、ベクトルタイル作成だけでなく、ホスティングのテストやスタイルのテストなどにも使えます。

このツールの主なコンポーネントは以下のものです。

* nodejs
* gdal-bin
* ruby
* sqlite3
* tmux
* vim
* tarn
* mapbox/tippecanoe
* budo
* hjson
* pm2
* phshcorn/hocon-parser
* vt-optimizer (最近のnodejsでは動かないので、現在のnanbanには入れていません。)
* unvt/charites
* unvt/kata
* unvt/itoma

なお、2021年夏にDockerの利用についてポリシーが変わりましたのでよく読みましょう([Docker FAQ](https://www.docker.com/pricing/faq/))。

> Docker Desktop may be used for free as part of a Docker Personal subscription for:
..
Non-commercial open source projects



### レポジトリURL:
https://github.com/unvt/nanban

https://hub.docker.com/r/unvt/nanban

### これまでの取組や参考になるもの:
* 私の過去の記事
    * ベクトルタイルをDocker（unvt/nanban）で作る（Windowsユーザー向け） https://qiita.com/T-ubu/items/76a60bfd4a27d11521e2

## unvt/equinox

### 概要:
Raspberry Pi用のUNVT関係ツールインストーラーです。ラズベリーパイからインストーラーをcurlして実行すると、ベクトルタイル処理関係のツールをインストールできます。

ツールのコンポーネントについては、@hfuさんの記事を見るとよくわかるのでここでは細かく書きませんが、nginx、nodejs、rubyなどのツールに加えて、Tippecanoe、gdal、pdal、charites、vt-optimizerなどのベクトルタイル・地理空間情報ツールも入っています。

数年前はRaspberry PiでもDockerコンテナを実行していたと思いますが、このequinoxを使うことでDockerイメージを使わなくても、安定して環境構築ができるのかなと思います。


### レポジトリURL:
https://github.com/unvt/equinox

### これまでの取組や参考になるもの:
* unvt/equinox コンポーネントレビュー (hfu, 2021)
 https://qiita.com/hfu/items/8792cf354faebf9b0efb
* 今来た手を動かしたい人のための UNVT 案内 Early 2020 (hfu, 2020)
 https://qiita.com/hfu/items/4194c3b35b76d0a696ee
* Raspberry Pi で ベクトルタイルサーバー をつくる(T-ubu, 2021)　https://qiita.com/T-ubu/items/f5cb639b4c337ef1050d

## 謝辞
最初から今まで、UNVTに対する@hfuさんの貢献・リードは素晴らしいです。日々のご尽力に感謝します。また、UNVTコミュニティが発展していくなかで多数のパートナーにも恵まれました。特にGeoloniaさんがcharitesを寄贈してくれたことも大きな進展だと思います。ここに感謝します。
2021年の12月にUNVTのハッカソンをやって、大学生の皆さんにもUNVTに参加していただいており感謝します。今後、どんな進展があるかこちらも期待しています。

## References
（各ツールの参考などは文中に引用やリンク先をまとめています。）