（UNVT）unvt/kata をつかってベクトルタイルをつくる（SHP → GeoJSON → PBF）

# はじめに
最近、シェープファイルからベクトルタイルを作る作業をしました。オープンソースツールである [UNVT/kata](https://github.com/unvt/kata) を使ってベクトルタイルを簡単に作れるので、作業の記録を参考にメモしておきます。

GDALとTippecanoe、nodejsが使える環境があれば、今回の作業は30分しないくらいで作業できると思います。


# デモの環境
* Windows 10
* Docker 

# 手順 
## Step 1. 変換したいデータのダウンロード
[NaturalEathの5千万分の１データ](https://www.naturalearthdata.com/downloads/50m-physical-vectors/)から緯度経度の格子データをダウンロードします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679143/46ae93b4-b099-9395-d342-3297ad9e5873.png)

ダウンロードしてきたのはこちら。srcフォルダというところに解凍したものを入れておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679143/e190da95-6db9-9690-f3a7-3416fdae9365.png)


## Step 2. ベクトルタイルの構造を決める
SHPファイルから作る、ベクトルタイルのレイヤ名を決めておきます。最小、最大ズームも決めておきます。



| Source SHP               | Layer name    | type | minz | maxz |
| ------------------------ | ------------- | ---- |----- | ---- |
| ne_50m_graticules_1.shp  | grid01        | line | 0    | 5    |
| ne_50m_graticules_5.shp  | grid05        | line | 0    | 5    |
| ne_50m_graticules_10.shp | grid10        | line | 0    | 5    |
| ne_50m_graticules_15.shp | grid15        | line | 0    | 5    |
| ne_50m_graticules_20.shp | grid20        | line | 0    | 5    |
| ne_50m_graticules_30.shp | grid30        | line | 0    | 5    |

## Step 3. Docker起動
デモのためにDockerを使います。unvt/kata が入っているunvt/nanban イメージを使います。gdal、tippecanoe、nodejsが使える環境ならDockerを使わなくて大丈夫です。（unvt/kataはnpmパッケージにあるので、npm installで簡単にインストールできます。）

```
docker run -it --rm -v ${PWD}:/data -p 8080:8080 unvt/nanban
cd /data
```
## Step 4. GeoJSON に変換
srcフォルダにあるshpファイルをgeojsonに変換しておきます。gdalでできます。

```bash
mkdir geojson
ogr2ogr -f GeoJSON geojson/grid01.geojson src/ne_50m_graticules_1.shp
ogr2ogr -f GeoJSON geojson/grid05.geojson src/ne_50m_graticules_5.shp
ogr2ogr -f GeoJSON geojson/grid10.geojson src/ne_50m_graticules_10.shp
ogr2ogr -f GeoJSON geojson/grid15.geojson src/ne_50m_graticules_15.shp
ogr2ogr -f GeoJSON geojson/grid20.geojson src/ne_50m_graticules_20.shp
ogr2ogr -f GeoJSON geojson/grid30.geojson src/ne_50m_graticules_30.shp
```
できたファイル
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679143/d3840fb7-4503-92e6-f816-a41446b267e3.png)

## Step 5. ベクトルタイル変換のためのYAMLファイル作成
unvt/kataを使うと、geojsonからベクトルタイルの変換が簡単になります。変換するデータを指定して、レイヤ名、ソース、最大ズーム、最小ズームを指定するためのYAMLファイルを作っておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679143/3861dc9f-fd2c-bab4-0ca8-29c93648cba3.png)

## Step 6. kataのフィルターが働くか確かめる
unvt/kataのフィルターコマンドを試してみます。先ほど作った yamlファイルを指定します。

```
kata filter kata.yml
```
下のようにデータが読み出されているので大丈夫です。よく見ると、もともとのGeoJSONにTippecanoeでベクトルタイル変換するために情報（layer, minzoom, maxzoom）が付加されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679143/2c8e5d7a-534c-932b-1a80-b1b2baa0d741.png)

## Step 7. kataからパイプでtippecanoeにつなぐ
では、パイプでtippecanoeにつないでベクトルタイルに変換します。

```
kata filter kata.yml | tippecanoe -e zxy --no-tile-compression --no-feature-limit --no-tile-size-limit
```
このくらいのサイズならすぐに終わりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679143/a2afce3f-0ba6-fe0a-c6de-e544f3670936.png)

無事にベクトルタイルができました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679143/0c7de338-f825-e133-b000-a83b636eca49.png)
(なお、できたタイルのmetadata.jsonでは情報をコマンドの入力からとってくるので、最大ズームや最小ズームが思っているものと違うこともあります。)

あとはGitHubページでホストするなどすればベクトルタイルが使えるようになります。

# まとめ
unvt/kataを使ったデータ変換について紹介しました。
kataのフィルターを使うことで、インプットするGeoJSONファイルごとにレイヤ名、最大ズーム、最小ズームを指定できます。コマンドを書く手間も省けて便利になります（フィルターを使わなくてもtippecanoeの-Lオプションでレイヤ名は指定できますが、個別レイヤごとに最大ズームと最小ズームはレイヤごとに指定できなかったと思います。）

ソースのデータサイズがそんなに大きくなくて、また出力するベクトルタイルの構造もそんなに複雑でないときは、kataを使って簡単に変換しましょう。

# 参考
* NaturalEarth: https://www.naturalearthdata.com/
* unvt/kata: https://github.com/unvt/kata
* 今回のレポジトリ:　https://github.com/ubukawa/graticules-vt