札幌ベクトルタイル30分クッキング

Happy International Open Data Day! 

[インターナショナル・オープンデータ・デイ2021札幌](https://codeforsapporo.connpass.com/event/206031/)の開催、おめでとうございます！

タイムシフト参加になってしまいますが、北海道札幌市全域の基盤地図情報をベクトルタイルに変換する作業で、もくもくクッキングに参加します。

# できあがり
今回作ったのは、次のような三次元ベクトルタイルサイトです。クッキング時間は、Raspbery Pi 4B 一台でだいたい 30 分で、プロダクトは GitHub Pages に上げて恒久化します。

![ 2021-03-06 8.47.17.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102082/247f0680-a517-b3d2-4976-7d2da397599a.jpeg)

https://optgeo.github.io/fgd-sapporo/#15.73/43.04787/141.310572/56.9/64

# ツール
## UNVT
ベクトルタイルの生産、ホスト、スタイル、最適化に使える「国連ベクトルタイルツールキット」を使いました。

https://unvt.github.io

国連ベクトルタイルツールキットは、国連オープンGISイニシアティブのプロジェクトの一つであり、自由で開かれた地理空間ソフトウェア（FOSS4G）の一つです。

http://unopengis.org

## Raspberry Pi 4B
国連ベクトルタイルツールキットはさまざまな計算機環境で動き、実際に国連グローバルサービスセンターに配備される場合には Linux を用いています。

他方で、能力構築を支援するために、 Raspberry Pi で動かすことを国連ベクトルタイルツールキットでは重視しており、今回の作業はすべて Raspberry Pi を用いて行いました。

下の写真は、今回作業に用いた m343 機です。
![IMG_7756.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102082/e88396f1-a727-ba26-033c-7261ac4cdeed.jpeg)

# 材料
基盤地図情報を用います。

https://fgd.gsi.go.jp/download

# 作り方
上記の「基盤地図情報ダウンロードサービス」から「基盤地図情報基本項目」の「ファイル選択へ」をクリックすると、データを選ぶための次のページに遷移します。
![ 2021-03-06 7.57.52.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102082/edbe53ff-2bf9-2840-f52f-391a70c83183.jpeg)

左側の「選択方法指定」で「都道府県または市区町村で選択」のラジオボタンを選択し、「北海道」から「札幌市」を選択した上で「選択リストに追加」を押すと、「選択リスト」に札幌市をカバーする「２次メッシュ」が追加され、選択リストが右側の地図で可視化されます。「ダウンロードファイル確認へ」をクリックすることで、その次の画面に遷移します。
![ 2021-03-06 7.58.18.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102082/51c86601-0db4-15f5-e2d3-d7a9529bdde9.jpeg)

「ダウンロードファイルリスト」の画面では、次のような表が表示されます。実際にダウンロードをする前に、ログインが必要なので、右上にある「ログイン」をクリックします。
![ 2021-03-06 7.58.54.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102082/665529ee-982d-84f3-eb60-4b422566acde.jpeg)

ログインIDとパスワードを入れてログインします。
![ 2021-03-06 7.59.24.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102082/650cb940-55b5-2e04-cb8c-c26df50ed5bb.jpeg)

アンケートが必ず出てきて、答えることができます。アンケートへの記入は技術的にすべてオプショナルになっています。
![ 2021-03-06 7.59.49.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102082/a467eb77-fa48-5b97-c7e0-ba5f704032a0.jpeg)

これでダウンロード可能になったので、「すべてチェック」をクリックして「まとめでダウンロード」をクリックします。
![ 2021-03-06 8.00.17.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102082/a6eb1f52-6746-36ca-b15f-17cce75f34f0.jpeg)

プロンプトが出てきますので、OKを押してダウンロードを開始します。確かに、ダウンロードが長時間にわたる場合はあります。
![ 2021-03-06 8.00.37.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102082/b962e0a3-f039-3c53-bb7e-364010d9e52a.jpeg)

これで、あなたの手元に、ZIP ファイルにパックされた基盤地図情報がきました。Raspberry Pi 4B の場合には、~/Download にダウンロードされるのがデフォルトだと思います。

これを、次のようにしてファイルシステムに展開します。
![ 2021-03-06 8.04.19.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102082/8db909d4-c57f-e49b-8c34-316a1af6ed6f.jpeg)

その後、time rake produce を実行して、ベクトルタイルの生産を行いました。画面にある通り、ウォールクロックタイムで22分56秒かかっています。ユーザー時間は54分12秒、システム時間では10分55秒かかっていますから、概ね同時に３コアはフルに使っている感じになります。これは、GNU parallel を利用して、基本的にはコアの数だけ ogr2ogr 及び Node.js のプロセスを回していることによります。
![ 2021-03-06 8.29.47.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102082/a5bf0599-7d19-a47d-76ca-3e5d0415b308.jpeg)

この後、rake lan して rake host すると、Raspberry Pi 4B 上でベクトルタイルサイトをホストすることもできます。

## GitHub Pages でのホスト
この先、生産したベクトルタイルを GitHub Pages に上げていきます。

まず、レポジトリを作ります。オープンなジオデータを引き取ってベクトルタイルにするプロジェクトである Adopt Geodata (optgeo) というプロジェクトをやっており、そのプロジェクトの1レポジトリとして、札幌ベクトルタイルを上げていくことにします。

https://github.com/optgeo

画面右上の + ボタンをクリックして、新しいレポジトリを作ります。
![ 2021-03-06 8.32.29.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102082/38b17932-fcb8-754a-3bc7-0c448b7bd8fa.jpeg)

名前は fgd-sapporo にし、扱いは public とし、README ファイルを入れることにします。
![ 2021-03-06 8.34.04.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102082/3cc64d92-dc0f-6141-c798-a214c369fa49.jpeg)

fgd-sapporo の設定ページを開き、スクロールダウンして、GitHub Pages を設定します。具体的には、main の /docs をソースとするように設定しています。
![ 2021-03-06 8.34.47.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102082/a0d77bbb-f63a-ea6a-fae0-47050b774625.jpeg)

レポジトリをクローンし、fgd の docs ファイルのコピーを作り、git add; git commit -m update; git push origin main していきます。

なお、コピーする前に、fgd の方で rake pages を実行する必要があります。また、GitHub Pages の URL は Rakefile の中で設定します。
![ 2021-03-06 8.40.02.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102082/e9726b21-0941-e7a4-f87e-326bf307f5d4.jpeg)

push しているところは、次の通りです。
![ 2021-03-06 8.40.24.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102082/130b6322-98c9-0cc9-c65f-b572badb0846.jpeg)

このような地図が、GitHub Pages から見えるようになりました。
![ 2021-03-06 8.47.17.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102082/247f0680-a517-b3d2-4976-7d2da397599a.jpeg)

ちなみに、ここは札幌の丸山でした。
![ 2021-03-06 8.51.53.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102082/0acde28e-2388-28b7-a17d-a6e002964e4d.jpeg)

# 味付け変更
味付けの変更としては、次のようなことが可能です。

## 他のオープンデータをのせてみる
基盤地図情報は基本図（背景地図）として設計されていますので、あなたのデータを上に乗せて使っていただくのが正統な使い方になります。

## 他の地域についてベクトルタイルを生産してみる
基盤地図情報は全国分がありますので、日本中のどこでもベクトルタイルを作ることができます。

GitHub Pages を使う場合には、レポジトリの最大サイズである 1GB が上限になります。Raspberry Pi 4B でホストする場合には、ストレージの容量が上限になりますね。大きな microSD カードを使えば、それなりの面積を載せることが可能です。

Raspberry Pi の可能性としては、能力構築の他、現場への前進配備を考えています。

## Maputnik でスタイルをいじってみる

http://maputnik.github.io/editor?style=https://optgeo.github.io/fgd-sapporo/style.json

## ベクトルタイルの設計を変更する
ベクトルタイル設計情報、ベクトルタイルスタイル情報を変更することで、少し味付けの違ったベクトルタイルサイトを作ることができます。

ベクトルタイル設計情報は、次の場所にあります。

https://github.com/unvt/fgd/blob/main/filter.js

ベクトルタイルスタイル情報は、次の場所にあります。

https://github.com/unvt/fgd/tree/main/hocon

Fork me on GitHub!

## 他のデータについてベクトルタイルを生産してみる
Adopt Geodata (optgeo) プロジェクトでは、さまざまなオープンデータをベクトルタイルにしています。

https://github.com/optgeo