OpenLayers3実装例（ZoomSlider場所変更等）

Posted on by 荒木匠平

OpenLayersとは、ブラウザ上でjavascriptを使用し地図を表示させるオープンソースのライブラリです。（公式サイト）
最近、このOpenLayersの３を調べる機会があり、大変簡単にWeb地図アプリを作成できる事ができる非常に面白いものでしたので、少し書いてみます。

ブラウザ上に地図を表示

ファイル構成は以下のとおり
index.html
js/jquery-1.12.4.min.js
js/ol.js(オープンレイヤーのjavascriptライブラリ)
js/main.js(今回カスタマイズしていくjavascriptファイル)
css/ol.css(オープンレイヤーのcssライブラリ)

以下がソース

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="content-style-type" content="text/css">
    <meta http-equiv="content-script-type" content="text/javascript">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>OpenLayers 3実装例</title>
    http://js/jquery-1.12.4.min.js
    http://js/ol.js
    http://js/main.js
    <link rel="stylesheet" href="css/ol.css" type="text/css"></link>
</head>
<body>
    <div id="map_area"></div>
</body>
</html>
var init_Lat = 34.637674639;    // 初期表示リグレックス緯度
var init_Lng = 135.4959383;     // 初期表示リグレックス経度
var init_Zoom = 13;             // ズームの初期値
var MinZoomLevel = 3;           // ズーム最小レベル
var MaxZoomLevel = 17;          // ズーム最大レベル
var mapView;
var map;

$(function () {
    // 表示用の view 変数の定義。
    mapView = new ol.View({
        projection: "EPSG:3857",
        maxZoom: MaxZoomLevel,
        minZoom: MinZoomLevel
    })

    // 地理院地図layerの変数
    var baseLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
			attributions: [ new ol.Attribution({ html: "<a href='http://portal.cyberjapan.jp/help/termsofuse.html' target='_blank'>国土地理院</a>" }) ],
			url: "http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png",
            projection: "EPSG:3857"

        })
    })

    // OprnLayers Map 初期化
    map = new ol.Map({
        target: $("#map_area").get(0),  // 表示させたいオブジェクトのidを指定
        layers: [baseLayer],
        view: mapView,
        renderer: ['canvas', 'dom'],
        controls: ol.control.defaults().extend([new ol.control.ScaleLine()]),
        interactions: ol.interaction.defaults()
    });

    // ズームスライダー表示
    map.addControl(new ol.control.ZoomSlider());

    // 中心の指定。view に対して指定。transform を忘れないこと。
    mapView.setCenter(ol.proj.transform([init_Lng, init_Lat], "EPSG:4326", "EPSG:3857"));

    // zoom の指定。view に対して指定する。
    mapView.setZoom(init_Zoom);

});

たったこれだけで以下の画像のような地図が表示されます。
openlayers3-1

うわぁぁぁああ！！簡単にできたーーー！！！

ただ少し気になる点が出てきた。
今回の調査した件に関して、画面左上は別途機能を使う為、左上にスライドバーが有るより、右下にスライドバーがある方が何かと便利なので移動させたくなった。
openlayers3-2

ZoomSlider移動

ではライブラリで自動生成して表示させているものをどの様に移動させるのか？
cssでスタイルをあてて移動させます。
以下のファイルをファイル構成に追加します。
css/main.css

/* ズームスライダーと縮尺を右下起点の配置に変更 */
#map_area .ol-zoom {
    top: auto;
    bottom: 22.8em;
    left: auto;
    right: .5em;
}
#map_area .ol-zoomslider {
    top: auto;
    bottom: 2.5em;
    left: auto;
    right: .5em;
}
#map_area .ol-scale-line {
    top: auto;
    bottom: .8px;
    left: auto;
    right: .8px;
}
/* マップ右下のインフォメーション削除 */
#map_area .ol-attribution {
    display: none;
}

cssにより、zoomSliderの表示を左上起点の配置より、右下起点の配置に変更します。
すると以下の画像のように表示が変更されます。（見やすくするため場所を海上にしています。）
openlayers3-3_2

他のオブジェクトも同様に、いろいろな場所に配置することが簡単にできます。

本当に最初の部分だけですが、OpenLayersについてご紹介させていただきました。
参考サイト：Matsup’s blog: OpenLayers 3 を使ってみよう