概要

神戸市「地域の範囲」データを２枚のベクトルタイルにする作業の記録です。この作業は、ベクトルタイル一枚をCMSにおけば管内図基盤なのではという話をあとで書くの実装です。

モチベーション

今回の作業のモチベーションは、「おおむね1MBくらいから1GBくらいのオーダーのサイズの地理空間情報を、ウェブブラウザでもっと気軽に使えるようにすることに貢献したい」ということにあります。

従来、ウェブブラウザで気軽に地理空間情報を使うためには、GeoJSON が使われてきました。しかし、GeoJSON で数百キロバイトを超えるデータを作ると、多くの場合には表示に障害が起こります。

国連ベクトルタイルツールキットは、元々は基本図ベクトルタイルの生産と消費を支援するプロジェクトなので、ソースデータの規模は1GBから100GBのオーダーになります。しかし、国連ベクトルタイルツールキットの技法が、1MBから1GBのオーダーのサイズのデータにも使えるのではないかと最近考えていました（下図参考）。

この領域にある典型的なデータというのは、管内を示すポリゴンデータなのではないかと思い、今回の作業を行っています。

作るべきタイルの番号の特定

地理院地図でざっと見てみた結果、8/223/101と8/224/101がよいと思います。135度を挟むとても特別な場所に神戸は立地しているので、一枚ではなくて二枚のタイルでカバーすることになりますね。

レポジトリの作成

まずレポジトリを作成します。私は、とりわけ一時的なレポジトリには、なるべく適当に名前をつけています。そのほうが、レポジトリの性格が変わったときに悩まなくて良いからです。ということで、hannibalというレポジトリを作りました。

そのあと、git clone git@github.com:hfu/hannibal で作業フォルダを作りました。

データのダウンロード

「地域の範囲」データをダウンロードして、まずは README.md に利用規約に基づくクレジットを書きました。

ちなみに、このデータのサイズは、SHP ファイルが 690KB、DBF ファイルが 30KB のようです。GeoJSON で取り回すには、やはり少し大きすぎるデータかもしれません。

プログラムを書く

Shapefile を開いて、ベクトルタイルへの変換プログラムである Tippecaoe に通すプログラムを書きました。書いたコードの内容細かくは書きません。

データの出し入れや Tippecanoe への接続のためのコードは index.js に書いています。他方で、データ特有の処理は modify.js に書いています。modify.js を切り分けることで、データのエンジニアリングと、データインフラのエンジニアリングを切り分けることを目指しています。

データを生産するそのプロセスの中で、modify.js を通してベクトルタイルスキーマを決めていく、という手法は、国連ベクトルタイルツールキットのものです。その意味で、今回の作業は国連ベクトルタイルツールキットの応用の一つだと考えています。

変換をする

Tippecanoe をインストールしておいて、npm install したあとであれば、node index.js で変換が行われると思います。変換に要する時間は、数秒のはずです。

自分のための注記：Tippecanoe を外すことについて

1GB を超えるようなデータをバッチ的にスタティックなタイルセットに変換するには、Tippecanoe のようなツールが必須だと思いますが、今回のようなサイズのデータを変換する場合には、Tippecanoe は必須ではない気がします。

Tippecanoe は、Windows Subsystem for Linux を使うなどしない限りは、Windows で使うことが難しい問題があります。NYCPlanning Labs が作っている geojson2mvt に差し替えると、動作環境を広くできるでしょう。

作成したベクトルタイルデータのサイズの確認

これまでの作業で、ベクトルタイルデータをが完成しました。具体的には、次のファイルができました。

tiles/8/223/101.pbf 6.6KB
tiles/8/224/101.pbf 52KB

もとの Shapefile データと比べて、ずいぶん小さくなりましたね。このくらいのサイズだと、クリッカブルマップの画像ファイルよりも小さいと言える場合が多いのではないでしょうか。でも、このデータには、すべての属性が入っていて、幾何形状はベクトルデータとして格納されています。

サイトを作成する

あとは、このベクトルタイルを使用するサイトを作るだけです。すこし行儀が悪いですが、サイトのデータも同じ hannibal レポジトリにいれておき、gh-pages でホストしてもらう方法を取ります。

サイトのつくりの具体的な内容の解説は割愛しますが、サイトのために作成したファイルは、次の２つです。

これによって、サンプルサイトが完成しました。

反省と今後の課題

今回、シンボリックな意味も考慮して、作成するデータのズームレベルを8のみにしました。しかし、神戸市の地域の境界線には細かく屈曲したところもあり、拡大するとガタガタが目立つところがあります。このガタガタの要因のひとつとして、ズームレベル８のデータをオーバーズームしすぎているということがあるかもしれません。

より実用的にするためには、もう少し大きなズームレベルについてもベクトルタイルを作っておくことが良さそうです。ズームレベル12から14くらいまでつくれば、まったく問題ないでしょう。

それから、より具体的なサイト作成例を、作ってお示しするのが良いと思っています。

結語

行政が地域と関わっていくためには、地理空間情報が有効です。行政の地理空間情報活用には、最新のウェブ地図技術を使う価値があります。ベクトルタイルを使うことで、最新のウェブ地図技術を享受することができます。すでに、ニューヨーク市、カタルーニャ州政府、英国陸地測量部など、行政の様々なレベルでベクトルタイルの使用は始まっており、国連ベクトルタイルツールキットは、国連活動におけるベクトルタイルの使用に貢献することを目指しています。

国連ベクトルタイルツールキットの目的は、高速で相互運用可能な基本図ベクトルタイルの生産・消費技術を持続可能な形で維持発展させることにあり、このためにはこのツールキットを維持できる技術者のコミュニティをもつ必要があります。

そのためには、国連ベクトルタイルツールキットの応用可能な範囲の幅を広げることも有効であると思っています。今回例示したような方向で、幅を広げることができ、それがコミュニティのクリティカルパスを作ることにつながればと思います。