地理院地図Vectorで提供しているベクトルタイルは、出典を明示いただければ、ご自分のサイトやアプリ等でもご利用いただけます。
本レポジトリでは、参考として、ベクトルタイルを表示する代表的なライブラリであるMapbox GL JSを利用して、地理院地図Vectorのベクトルタイルを表示するサンプルを提供しています。
本サンプルを利用して構築したサイトには、出典の記載をお願いします。
出典の記載例:<a href="https://maps.gsi.go.jp/vector/" target="_blank">地理院地図Vector</a>
本サンプルで表示するベクトルタイルのURLは以下の通りです。
https://cyberjapandata.gsi.go.jp/xyz/experimental_bvmap/{z}/{x}/{y}.pbf
ベクトルタイルの詳細については、以下のレポジトリをご覧ください。
本サンプルのスタイル設定ファイル(style.json)は、Style Specificationに準拠したものとなります。一方、地理院地図Vectorのstyle.jsonでは、Style Specificationをベースに、若干の拡張を施しています。そのため、地理院地図Vectorとは、地図の表示が異なる部分がございます。
地図の表示が異なる部分の例
- 建物等のハッチング表現は行わず、すべて塗りつぶしで表現しております。
- 注記は、すべて横書きとなっております。そのため、本来の注記位置とのずれ等、表示に不具合があることがあります。
- 縦書きをできる限り表現したスタイル(後述のstd_vertical.json)も用意しておりますが、伸ばし棒「―」等が縦書き表示になりません。これは、Mapbox GL JSの仕様によるものです(2020年4月23日現在)。
地理院地図Vectorの標準地図をベースにしたスタイルです。
サンプルページ https://gsi-cyberjapan.github.io/gsivectortile-mapbox-gl-js/std.html
上記、std.jsonに注記の縦書き表示の設定を加えたスタイルです。
サンプルページ https://gsi-cyberjapan.github.io/gsivectortile-mapbox-gl-js/std_vertical.html
地理院地図Vectorの淡色地図をベースにしたスタイルです。
サンプルページ https://gsi-cyberjapan.github.io/gsivectortile-mapbox-gl-js/pale.html
地理院地図Vectorの白地図をベースにしたスタイルです。
サンプルページ https://gsi-cyberjapan.github.io/gsivectortile-mapbox-gl-js/blank.html
本レポジトリのスタイルファイルは実験的に提供しているものです。予告なく削除する可能性があります。
本レポジトリのスタイルファイルの利用により生じた損失及び損害等について、国土地理院はいかなる責任も負わないものとします。