OpenLayersクイックスタート¶

このクイックスタートでは、OpenLayersをはじめて使うときの基本的な手順について説明します。基本的なマップの作成、ラスタレイヤとベクタレイヤの追加、地物のスタイリングです。

OpenLayersを使用すると、任意のWebページに動的な地図を簡単に配置できます。任意のソースから地図タイル、ベクタデータやマーカーをロードして表示可能です。OpenLayers はすべての種類の地理情報のさらなる利用のために開発されてきました。完全にフリーなオープンソース JavaScript で、2条項 BSD ライセンス (FreeBSD ライセンスとしても知られています) でリリースされています。

主な概念
基本マップを作成する
ラスタレイヤ追加する
ベクタレイヤを追加する
フィーチャにスタイルを適用する
イベントの操作
次のステップは何?

主な概念 ¶

OpenLayersで作業を始める前に、OpenLayersの主な概念を理解しておくとよいでしょう。

マップ: マップ はOpenLayersの主要な要素です。マップ をレンダリングするには、 ビュー 、1つまたは複数の レイヤ 、およびターゲットコンテナが必要です。
ビュー: ビュー はmapのレンダリング方法を決定します。解像度や中心位置などを設定します。これはマップの内容を見るためのカメラのようなものです。
レイヤ: レイヤ はスタック順にマップに追加できます。レイヤは、 ラスタレイヤ (イメージ)または ベクタレイヤ (点/線分/ポリゴン)のいずれかです。
ソース: 各レイヤには、レイヤコンテンツのロード方法を知っている ソース があります。ベクタレイヤ の場合、そのソースは フォーマット クラス(例えばGeoJSONやKML)を使ってベクタデータを読み込み、一連の フィーチャー をレイヤに提供します。
フィーチャー: フィーチャー は現実世界のものを表し、特定の スタイル を使用して、さまざまな ジオメトリ (点、線、ポリゴンなど)を使用してレンダリングできます。これにより、外観(線の思考、塗り潰し色など)が決まります。

基本マップを作成する ¶

/home/user/でbasic-map.htmlという名前のファイルを作成して、次の内容を記入します。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Basic map</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">

        <!-- OpenLayers CSS -->
        <link rel="stylesheet" href="http://localhost/openlayers/dist/ol.css" type="text/css">

        <!-- Custom styles -->
        <style>
          #map {
            width: 100%;
            height: 500px;
          }
        </style>
    </head>
    <body>
        <h1>Basic map</h1>

        <div id="map"></div>

        <!-- OpenLayers JS-->
        <script src="http://localhost/openlayers/dist/ol.js" type="text/javascript"></script>

        <!-- App code -->
        <script>
          var map = new ol.Map({
            target: 'map',
            layers: [
              new ol.layer.Tile({
                source: new ol.source.OSM()
              })
            ],
            view: new ol.View({
              center: ol.proj.fromLonLat([2.1833, 41.3833]),
              zoom: 6
            })
          });
        </script>

    </body>
</html>

Webブラウザから[ファイル]->[ファイルを開く]を使用して、basic-map.htmlを開いてみます。次のように表示されるはずです。

注意：

このコードは、JavaSciptコードをhtmlファイルの最後にロードするというベスト・プラクティスに従います。
OpenLayersマップはHTML DOM要素にアタッチする必要があるため、 map idで識別される <div> 要素を作成しました。
マップは ol.Map クラスで表されます。 target プロパティーを使用して、マップをレンダリングするDOM要素を指定します。
OpenLayersでは、キャンバスとWebGLという2つの異なるメカニズムを使用したマップレンダリングが可能です。デフォルトのレンダラは canvas です。
レイヤ内にマップのデータを表示するため、 ol.source.OSM ソースクラスを使用してOpenStreetMapプロジェクトからコンテンツをロードするようにしたタイルレイヤの ol.layer.Tile クラスを作成しました。
最後に、 ol.View クラスを使用して camera の初期位置を設定し、初期ズームレベルと中心位置を設定します。

ラスタレイヤ追加する ¶

OpenStreetMap、Stamen、Bingなどによって提供されるタイルレイヤが、最も使用されるラスタレイヤです。タイルレイヤは ol.layer.Tile クラスで表され、 ol.source.OSM または ol.source.Stamen のように、特定のプロバイダからタイルをロードする方法を知っているソースを使用する必要があります。

var osm = new ol.layer.Tile({
  source: new ol.source.OSM()
});

var stamen = new ol.layer.Tile({
  source: new ol.source.Stamen({
    layer: 'watercolor'
  })
});

レイヤは、次の2つの方法でマップに追加できます。

ol.Map を作成する場合は、 layers プロパティを使用します。

var map = new ol.Map({
  ...
  layers: [osm, stamen]
  ...
});

map.addLayer() メソッドを使って手動で追加します。
map.addLayer(osm); map.addLayer(stamen);

ベクタレイヤを追加する ¶

ベクタレイヤは ol.layer.Vector クラスで表され、 ol.source.GeoJSON 、 ol.source.KML 、 ol.source.TopoJSON など、ベクタフォーマットの読み込みに適したソースを使用する必要があります。

var vectorLayer = new ol.layer.Vector({
  source: new ol.source.GeoJSON({
    url: 'url_to_geojson_file'
  })
});

// Add Vector layer to map
map.addLayer(vectorLayer);

前のコードでは、サーバに置かれた有効なGeoJSONファイルを指すように url_to_file を変更する必要があることに注意してください。Javascriptセキュリティでは、異なるドメイン/ポート上の外部URLからデータセットを取得することができないことに注意してください。(aka. 同一発信元ポリシー)。

フィーチャーは手動で作成することもできます。この場合、フィーチャーを表すジオメトリを作成する必要があります。

// Geometries
var point = new ol.geom.Point(
    ol.proj.transform([3,50], 'EPSG:4326', 'EPSG:3857')
);
var circle = new ol.geom.Circle(
    ol.proj.transform([2.1833, 41.3833], 'EPSG:4326', 'EPSG:3857'),
    1000000
);

// Features
var pointFeature = new ol.Feature(point);
var circleFeature = new ol.Feature(circle);

// Source
var vectorSource = new ol.source.Vector({
    projection: 'EPSG:4326'
});
vectorSource.addFeatures([pointFeature, circleFeature]);

// Vector layer
var vectorLayer = new ol.layer.Vector({
  source: vectorSource
});

// Add Vector layer to map
map.addLayer(vectorLayer);

フィーチャにスタイルを適用する ¶

ベクタレイヤ内のフィーチャにスタイルを設定できます。スタイルは、塗り、線、テキスト、イメージの組み合わせによって決まります。これらはすべて任意の設定項目です。さらに、レイヤにスタイルを適用して、含まれているすべてのフィーチャのスタイルを決定したり、個々のフィーチャにスタイルを適用することもできます。

スタイルは、 ol.style.Style クラスによって表され、このクラスは、適用される fill 、 stroke 、 text および image を設定するプロパティを有する。次の例は、緑の塗りと線を使用するようにスタイル設定された世界の行政区界データセットを示しています。

var limitsLayer = new ol.layer.Vector({
  source: new ol.source.Vector({
    url: 'data/world_limits.json',
    format: new ol.format.TopoJSON(),
    projection: 'EPSG:3857'
  }),
  style: new ol.style.Style({
    fill: new ol.style.Fill({
      color: 'rgba(55, 155, 55, 0.3)'
    }),
    stroke: new ol.style.Stroke({
      color: 'rgba(55, 155, 55, 0.8)',
      width: 1
    }),
    image: new ol.style.Circle({
      radius: 7,
      fill: new ol.style.Fill({
        color: 'rgba(55, 155, 55, 0.5)',
      })
    })
  })
});

このコードでは、TopoJSONファイルをロードし、 style プロパティーを使ってスタイルを設定しています。ラインとポリゴンに必要な fill と stroke 、およびポイントフィーチャに使用する image (この場合は円)を設定しました。

イベントの操作 ¶

ほとんどの(マップ、レイヤ、コントロールなどの)要素は、イベントをトリガして変更を通知します。たとえば、マウスがマップ上を移動するたびに通知されたり、フィーチャがベクタレイヤに追加されるたびに通知されたりします。

イベントは on() メソッドでオブジェクトに簡単に登録でき、 un() で登録解除できます。

次のコードでは、マップのインスタンスにイベントを登録し、ポインタが移動するたびに通知されます。コールバック関数内では、ポインタの座標を取得し、ブラウザコンソールに2つの異なる投影法で出力します。

map.on('pointermove', function(event) {
  var coord3857 = event.coordinate;
  var coord4326 = ol.proj.transform(coord3857, 'EPSG:3857', 'EPSG:4326');

  console.log(coord3857, coord4326);
});

次のステップは何?¶

OpenLayersの動作を理解するための最も簡単な方法は、サンプルとそのソースコードを調べることです。OpenLayersの詳細については、以下を参照してください。

OpenLayersクイックスタート¶

主な概念¶

基本マップを作成する¶

ラスタレイヤ追加する¶

ベクタレイヤを追加する¶

フィーチャにスタイルを適用する¶

イベントの操作¶