OpenLayers 3 は、ブラウザ上で地図画像を動的に表示するためのJavaScriptライブラリです。本ページでは、このライブラリを使った地質情報配信サービスの利用例を紹介します。

• GitHub の公開ページはこちら

OpenLayers 3 でのWMS利用例 （20万分の1） （5万分の1）

はじめに

OpenLayers 3 は、OpenLayers 2の後継バージョンです。公式サイトにはライブラリの詳細情報とともに、多くのサンプルが公開されており、利用者に便宜を図っています。 OpenLayers 3 は地図画像を扱うための豊富な機能が盛り込まれているため、短いソースコードで目的とするビュワーを構築することが可能です。 ここでは、OpenLayers 3 使って20万分の1日本シームレス地質図、および5万分の1地質図の配信サービスを利用するにあたり必要となる情報について、具体例を示します。
本例では、ライブラリの機能を利用して地質図とベース地図とを複合化し、鮮明な重ね合わせ画像を得ています(＊)。また地質図の面と線、さらに、5万分の1地質図用ビューワーでは点、に関するメタ情報も配信サービスで取得し、これらを地図中にポップアップ画面として表示します。

＊ Internet ExplorerはJavascriptの画像演算（multiply）に対応していません。

最低限必要となる情報

OpenLayers 3 で 配信サービスを利用するには、サービスのベース URLと、取得するレイヤ名に関する情報が必要となります。これらについては、「20万分の1日本シームレス地質図の WMS / WMTS」、または「5万分の1地質図幅の WMS / WMTS」を参照してください。各図幅の詳細な情報は、配信サービスの一つであるケーパビリティに記述されています。5万分の1地質図用ビュワーでは、ケーパビリティに含まれる地質図のレイヤ構成や経度緯度などの情報を読み出し、メタ情報や凡例などの表示に利用しています。

実装例

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

• 実装例ソースコード（20万分の1、5万分の1）

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

to top