タイルを利用した大規模カスタム・マップ・レイヤー

本記事は、以下のトピックを参考に日本地図上でメッシュマップ表示を行う方法について記載しています。

?️Large custom map_layers with tiles

お客様からカスタム・マップを表示したいというご要望をいただくことがあります。まず、最初に思いつくのは、TopoJsonを利用する方法なのですが、日本全体を対象としたカスタムマップを作成しようとした場合、ファイルサイズが数百MBやGBとなってしまうことがあります。

幸運にも、無料もしくは低コストで実現する方法があります。

実現するためには、いくつかの開発者ツール(コマンドラインなど)が必要ですが、Githubを以前に使用したことがある場合は、おそらく大丈夫です。

本手順を実施するためには、まず、マップ・レイヤーを表す単一のファイルが必要となります。Lookerへ直接ファイルをアップロードする場合には、ファイルフォーマットがTopoJsonである必要がありますが、今回の手順では、GeoJSON、KMLもしくはShape Fileである必要があります。Mapshaperをご利用いただくことで簡単にGeoJSON形式へ変換することも可能です。

今回のチュートリアルでは、日本全国を1km四方の単位に分割している3次メッシュのファイルを利用します。もととなるファイルは、こちらのe-Statからダウンロードしていますが、170近くのファイルをダウンロードして結合する必要があるため、変換済みのファイルをこちらにアップロードしてあります。(直接ダウンロードして結合されたい場合は、QGIS入門の記事を参考にQGISを利用して結合いただけます。)

こちらをそのまま利用とした場合、ファイルすべてをブラウザ上にダウンロードしようとするために、ブラウザの動作が非常に重くなってしまうことは頑なに想像が可能です。

しかし、Googleマップを駆動するのと同じテクノロジー(タイル)を利用して、ファイルを扱いやすいものにすることができます。基本的な考え方は、ズームインした場合、ビューポートに表示されるのはわずかな領域だけなので、それらをロードするだけです。次に、パンしながら、隣接するものをロードします。

一方、ズームアウトして何千もの地域がある国の大きな地域を見ることができる場合、GeoJSONファイルにあるすべての詳細は実際には必要ありません。路面の非常に大まかな輪郭(重量ははるかに少ない)で十分です。

さまざまなズームレベルでマップを並べて表示することで、必要なマップの断片のみを適切な詳細レベルでダウンロードするために必要なすべての素材が得られます。 Mapboxには、それを行うためのシンプルなツールセットが用意されています。

  1. まず最初に、Mapboxのフリー・アカウントを作成し、アクセス・トークンを作成 して保存します。(デフォルトのパブリック・スコープで問題ありません。)
  2. その後、Mapbox’s Studio へ、作成したデータをアップロードして、新規タイル・セットを作成します。
  3.  

    タイル・セットがアップロードされると、(タイルを作成するための)処理プロセスが実行されます。終了後に、対象タイル・セットをクリックすると以下のような画面が表示されるでしょう。

    image.png
  4.  

    それでは、少しテクニカルなことを実施頂く必要があります。それは、各タイル領域のシェープファイルに対して、bounding boxを計算することです。これは、ある特定の時点において、読み込む必要な領域を知るために、当該領域を含む最南西と最北東のポイントを知る必要があるためです。

  5.  

    弊社では、上記を実現するための簡単なスクリプトを用意しています。こちらからダウンロード(11.8 KB)いただけます。手順はスクリプト内に記述されていますが、以下の手順を実施ください。

  • コマンド・ラインを開き、 ( brew install yarn )とタイプします。
  • yarnとタイプして実行します。
  • yarn run extents /my/input/geojson.json extents.json ZCTA5とタイプして実行し、extents.jsonを生成します。/my/input/geojson.jsonは、実際にファイルが保存されているパスに置き換えてください。また、ZCTA5は、実際のShape Fileにおいて、各領域をユニークに識別するためのID項目に置き換えてください。(サンプルファイルの場合は、KEY_CODEになります。)
     
  1. さて、extents.jsonファイルが生成されました。最後に、このファイルをLookerがアクセス可能な場所に保管する必要があります。単純に、S3やGoogle Cloud Storage (*)に保管した場合、残念ながら動作しません。なぜなら、 “Content-Type Headers.” を修正する必要があるためです。Githubや Github gist ,にアップロードし、nifty service を利用して、このヘッダーを修正します。
  2. これで、Looker上で新しいmap layerに定義するのに必要となる準備が全て整いました。Lookerのモデルへ移動して、以下のように新しい map_layer を定義します。
     
map_layer: tract {

format: "vector_tile_region"

url: "https://a.tiles.mapbox.com/v4/[YOUR_MAPBOX_TILESET_ID]/{z}/{x}/{y}.mvt?access_token=[YOUR_MAPBOX_ACCESS_TOKEN]"

feature_key: "[YOUR_MAPBOX_TILESET_NAME]"

extents_json_url: "https://rawcdn.githack.com/[YOUR_EXTENTS.JSON_FILE_LOCATION]"

min_zoom_level: [FROM_MAPBOX]

max_zoom_level: [FROM_MAPBOX]

property_key: "[THE_UNIQUE_IDENTIFIER_FOR_REGIONS_IN_YOUR_SHAPEFILE]"

}

必要なる情報を記載するために、以下を参照ください:

Mapbox_Studio.png

さらに:
 

image.png

以上となります。
 

12

(*) Google Cloud Storageにおいて、以下の設定を行うことで上記  extents.json を保管して利用することが可能になります。

[
{
"origin": ["https://<インスタンスのURL>"],
"method": ["GET"],
"responseHeader": ["Content-Type"],
"maxAgeSeconds": 3600
}
]
4 0 904