【初心者向け】OpenLayers 入門

GIS アプリケーションを開発するのに欠かせない OpenLayers について概要と、動くサンプルコードを紹介します。

OpenLayersとは？
サンプル
関連情報

OpenLayersとは？

フロントエンドで地図操作を可能にするJavaScriptライブラリです。
OpenLayersでは

地図の表示
地図操作（移動、回転、縮尺）
レイヤの表示
フィーチャの描画

等を行うことが出来ます。

百聞は一見にしかずということで、サンプルコードを紹介します。

サンプル

地図を表示する

See the Pen Map by mt (@mtakeda) on CodePen.

<html>
    <head>
        <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">
        <script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>
        <script src="createMap.js"></script>
        <script src="map.js"></script>        
    </head>
    <body>
        <div id="map"></div>
    </body>
</html>

idがmapのHTML要素に地図を追加します。

window.onload = function(){
    var map = createMap();    
}

/** 地図を作成します。 */
function createMap() {
    return new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        target: 'map',
        controls: ol.control.defaults({
            attributionOptions: {
                collapsible: false
            }
        }),
        view: new ol.View({
            center: [0, 0],
            zoom: 2
        })
    });
}

スポンサー

地図にフィーチャを表示する

<html>
    <head>
        <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">
        <script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>
        <script src="readFeature.js"></script>
    </head>
    <body>
        <div id="map"></div>
    </body>
</html>

ベクターレイヤを作成する際、取得元のURLやフォーマット等を指定します。
今回の例ではKMLを指定しています。

window.onload = function(){
    var map = createMap();
    var vectorLayer = createVectorLayer();
    map.addLayer(vectorLayer);
}

/** 地図を作成します。 */
function createMap() {
    return new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        target: 'map',
        controls: ol.control.defaults({
            attributionOptions: {
                collapsible: false
            }
        }),
        view: new ol.View({
            center: [0, 0],
            zoom: 2
        })
    });
}

/** ベクターレイヤを作成します。 */
function createVectorLayer() {
    return new ol.layer.Vector({
        source: new ol.source.Vector({
            url: 'https://openlayers.org/en/v4.6.4/examples/data/kml/2012_Earthquakes_Mag5.kml',
            format: new ol.format.KML({
              extractStyles: false
            })
        })
    });
}

フィーチャを地図に描画する

<html>
    <head>
        <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">
        <script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>
        <script src="drawFeature.js"></script>
    </head>
    <body>
        <div id="map" style="height: calc(100vh - 40px);"></div>
        <label>Geometry type  </label>
        <select id="type">
          <option value="Point">Point</option>
          <option value="LineString">LineString</option>
          <option value="Polygon">Polygon</option>
          <option value="Circle">Circle</option>
        </select>
    </body>
</html>

描画用のレイヤを用意し、地図に描画出来るように設定します。
プルダウンの切替に応じて描画するフィーチャの種類を切り替えます。

window.onload = function(){
    var map = createMap();
    var typeSelect = document.getElementById('type');

    addDrawingLayer(map);
    addDrawInteraction(map, typeSelect.value); 

    typeSelect.onchange = function(){
        removeDrawInteraction(map);
        addDrawInteraction(map, typeSelect.value);
    }
}


/** 地図を作成します。 */
function createMap() {
    return new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        target: 'map',
        controls: ol.control.defaults({
            attributionOptions: {
                collapsible: false
            }
        }),
        view: new ol.View({
            center: [0, 0],
            zoom: 2
        })
    });
}

var drawingSource = new ol.source.Vector();
var drawingLayer = new ol.layer.Vector({
    source: drawingSource
});
var drawInteraction;

/** 描画用のレイヤを地図に追加します。 */
function addDrawingLayer(map){
    map.addLayer(drawingLayer);
}

/** フィーチャを描画出来るようにします。 */
function addDrawInteraction(map, type){
    // 指定された種類のフィーチャを描画出来るようにする
    drawInteraction = new ol.interaction.Draw({
        source: drawingSource,
        type: type
    });
    map.addInteraction(drawInteraction);
}

/** フィーチャの描画を解除します。 */
function removeDrawInteraction(map){
    map.removeInteraction(drawInteraction);
}

OpenLayersとは？

サンプル

地図を表示する

地図にフィーチャを表示する

フィーチャを地図に描画する

関連情報