Leafletでの利用例

Leafletは、ウェブページに動的な地図表示を行うためのJavaScriptライブラリです。Leafletについては、公式ウェブサイト等の情報をご参照ください。

Leafletにはメタ情報を扱うための機能（GetFeatureInfo）がありません。この機能は地質図を利用する際にとても有用ですので、GSJでは改良したLeafletのスクリプトをGitHubで公開しています。本ページでは、このスクリプトを応用した、地質情報配信サービスの利用例を紹介します。

LeafletでのWMS利用例 （20万分の1） preview_jp.png（5万分の1） preview_jp.png

はじめに

地図情報を扱う JavaScript ライブラリの一つであるLeaflet は、ファイル容量が小さく、動作が軽快なところが特徴です。Leaflet は自由度が高く、様々なカスタマイズが可能です。

ここでは、GetFeatureInfo機能を追加したLeafletの利用例を２つ紹介します。1つは20万分の1シームレス地質図のためのビューア―で、地質画像上をクリックすることにより、全国任意の場所の地質情報がポップアップ画像として得られます。2つ目は5万分の1地質図幅用のビューア―です。5万分の1地質幅は図郭単位で地質情報が配信されています。隣接図幅の情報が同時に必要となることがありますので、閲覧画面が図幅の端に達したとき、隣接図幅が自動的に現れるように工夫してあります。このため、図幅単位の切り替え操作が不要で、連続する5万分の1地質図幅をあたかもひとつのサービスのように表示することができます。

必要となる情報

Leaflet で 配信サービスを利用するには、サービスのURLと、取得するレイヤ名に関する情報が必要となります。これらについては、「20万分の1日本シームレス地質図の WMS / WMTS」、または「5万分の1地質図幅の WMS / WMTS」を参照してください。5万分の1地質図幅の場合には、図幅毎に構成するレイヤ名の情報が必要となりますが、レイヤ名を含めた詳細情報は、図幅のケーパビリティより得ることができます。

具体的には、下記の URL にアクセスして得たケーパビリティ（XML データ）より、図幅を構成するレイヤ名などの情報を取り出します。

  • <ベースURL>?service=wms&request=getcapabilities

実装例

実装サンプルのソースは、GitHubで参照してください

本ソースコードの実行には、Leafletのライブラリとスタイルシートを必要とします。公式サイトよりダウンロードしてください。

また、他にいくつかのライブラリを必要とします。このうち、以下の2つについては別途ダウンロードしてください。

  • proj4.js：座標軸変換のためのライブラリ
  • L.TileLayer.BetterWMS.js：マウスでクリックした地図上の位置にメタ情報を表示するためのライブラリ

to top