地理院地図タイル

国土地理院は、地理院タイルを提供してくれている。

これは何かというと、代表的な使い方では Google Maps、MapBox、Deck.gl などのライブラリを利用して ブラウザやスマホ上で動く地図アプリ等を開発する際に、背景地図となるものであり、出典の明記をすれば誰でも利用できる。

自前サーバにコピーする必要も無く、 直アクセスしてもよいURLで提供してくれているので、ありがたい。

このような無料で利用できる地図タイルはOpenStreetMapなど他にもあるが、 これらは有志なら誰でも更新できる反面、 地名や境界などが必ずしもその通りになっている保証がなく、 そういうのを気にする場合は使いづらい。

タイルの種類

地理院タイルは「画像タイル」と「ベクトルタイル」の2種類がある。

上のサイトの説明にもあるが、それぞれに向き不向きがある。

画像タイル(ラスタータイル) ベクトルタイル
ファイル形式 画像 バイナリ(.pbf)
通信負荷 大きめ 小さめ
描画負荷 低い 高い
カスタマイズ性 低い。基本的に提供されるもののまま 高い。建物や道路の太さや色、それらの表示有無や重ね順など細かく指定でき、動的にも操作できる
学習コスト 低い カスタマイズするなら高い
見た目 平面的 地図を傾けたときも文字や記号は常に正面を向くなどの指定ができ、読みやすく視覚的にも立体的。一方で、そうした場合に重なり順がおかしいと違和感があるため、きちんとした指定が必要

要は、「この道路は緯度経度 ○○, ○○, … を結んだ折れ線」「この建物は緯度経度○○にある点」などという地理情報を 画像化する工程が、画像タイルは提供側が事前におこない、ベクトルタイルはアプリ側で行うということ。

昨今のjavascriptはかなり高速に大量のデータを描画できるが、それでも多くの情報を盛り込むともたつく場合がある。

画像タイルで機能的に十分な場合は画像タイルの方が使いやすいと思うが、 ベクトルタイルも、特にカスタマイズせず用意されたものを使うだけなら、使い方はそんなに変わらない。

Leaflet, Mapbox.gl, MapLibre, deck.gl など地図ライブラリは様々あるが、基本的にどちらのタイルも対応している。
ただし、画像タイルが画像URL({x},{y},{z}を含んだもの)を指定すれば一発な一方、ベクトルタイルは 「所定の仕様のJSONを記述しておき、それを読み込む」「javascript内で個々のレイヤーの描画の仕方を指定する」の主に2つあり、 書き方が統一されていないので、ライブラリ毎に下調べが必要。

CesiumJSは、pbf形式のベクトルタイルには未対応?(p.11)

ベクトルタイルのスタイル指定

ベクトルタイルはバイナリ形式だが、これ自体は地理情報しか持たない。
描画には、線やポリゴンを「どのように描画するか」という指定が必要となる。

ライブラリにより、主に2種類の指定方法が存在する。

  • JSON形式の「スタイルファイル」による指定(Mapbox, MapLibreなど)
  • javascriptによる指定(Leaflet, Deck.glなど)

スタイルファイル

ライブラリが定義する所定のフォーマットに沿ったテキストファイルを記述し、それを読み込む。

スタイルファイルには今のところデファクトスタンダードな(ライブラリをまたがって使用できる共通の)フォーマットというのはなく、複数のフォーマットが存在している。

地理院地図Vector専用スタイル

前者は主に以下のサイトで編集でき、「保存」から入手できる。

十分に調べたわけではないが、基本、上記のサイトで表示をカスタマイズするのに使う専用みたい。
厳密には「スタイルファイル」ではなく「デザインファイル」という呼び方がされている箇所が多いが、 サンプルファイル名が「style.json」だったりする。

Mapboxのスタイル定義を独自拡張したものと説明されているが、元の仕様には従っておらず、 mapbox-gl.jsなどの地図ライブラリに読み込ませても動かない。

Mapboxスタイル

以下に日本語の概要説明がある。

mapbox-gl.jsなど、対応したjavascript地図ライブラリにスタイルファイルを指定することで、背景地図が描かれるようになる。
スタイルの中にタイルURLも含めるようになっているので、このjsonだけ指定すればよい。

地理院地図専用スタイルを、Mapboxライブラリ用に変換するツールも存在する。

使い方は、国土地理院のサイトにサンプルがある。(末尾)

web_service/gsimaps.txt · 最終更新: 2022/12/16 by ikatakos
CC Attribution 4.0 International
Driven by DokuWiki Recent changes RSS feed Valid CSS Valid XHTML 1.0