[OpenLayers] いろいろな地図を重ねて切り替えられるようにする

Openlayersでは、まず地図オブジェクトを用意しますが、これだけでは何も表示されません。これは地図を載せるための机や箱のようなものと考えられます。
そこに実際の紙の地図を重ねるようにレイヤを重ねることになります。レイヤはベースレイヤとオーバーレイレイヤの2種類があります。
ベースレイヤは一番下に置く基本的な地図で、同時に1つしか表示できませんが、いくつか用意しておいて切り替えられるようにすることができます。

以下のレシピでは、地理院地図で用意されているいろいろな地図のうち、標準地図、オルソ画像、白地図を切り替えられるような地図を作成してみます。

レシピ２：いろいろな地図を重ねて切り替えられるようにする

htmlファイル内にJavaScript,CSSとも含んでいます。解説は、以下のコードのコメント欄に出来るだけ詳しく記載しましたので参照ください。
レシピ１で説明済みの事項は省略しています。

maxZoomLevelをそれぞれ指定しておくことで、ベースレイヤの切り替えによりmax側で範囲外となった場合は調整されます。例えば、標準地図でzoomLevel:18で表示していた時に、オルソ画像に切り替えるとzoomLevel:17に、白地図に切り替えるとzoomLevel:14に、それぞれタイルが表示されるように自動的に変更されます。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>recipe02</title>
<script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script>

<script type="text/javascript">

function initMap(){
    var projection3857 = new OpenLayers.Projection("EPSG:3857");
    var projection4326 = new OpenLayers.Projection("EPSG:4326");

    var map = new OpenLayers.Map({
        div: "map",
        projection: projection3857, 
        displayProjection: projection4326,
    });

    // 地理院地図の標準地図レイヤ
    var cjstd = new OpenLayers.Layer.XYZ("標準地図",
        "http://cyberjapandata.gsi.go.jp/xyz/std/${z}/${x}/${y}.png", {
        attribution: "<a href='http://portal.cyberjapan.jp/help/termsofuse.html' target='_blank'>国土地理院</a>", 
        minZoomLevel: 2, maxZoomLevel: 18
    });

    // 地理院地図のオルソ画像レイヤ
    var cjort = new OpenLayers.Layer.XYZ("オルソ画像",
        "http://cyberjapandata.gsi.go.jp/xyz/ort/${z}/${x}/${y}.jpg", {
        attribution: "<a href='http://portal.cyberjapan.jp/help/termsofuse.html' target='_blank'>国土地理院</a>", 
        minZoomLevel: 15, maxZoomLevel: 17
    });

    // 地理院地図の白地図レイヤ
    var cjblk = new OpenLayers.Layer.XYZ("白地図",
        "http://cyberjapandata.gsi.go.jp/xyz/blank/${z}/${x}/${y}.png", {
        attribution: "<a href='http://portal.cyberjapan.jp/help/termsofuse.html' target='_blank'>国土地理院</a>", 
        minZoomLevel: 5, maxZoomLevel: 14
    });

    /* 作成した複数のレイヤをMapオブジェクトに追加する。
        addLayer でなく addLayers となることに注意
        用意した複数のベースレイヤを［ ］でくくる */
    map.addLayers([cjstd,cjort,cjblk]);

    map.addControl(new OpenLayers.Control.LayerSwitcher());

    map.setCenter(new OpenLayers.LonLat(139.691706,35.689487)
      .transform(projection4326, projection3857), 14);
}
</script>

<style>
h1 {
    font-size: 130%;
    margin-bottom: 0.5em;
    border-bottom: 1px solid #fcb100;
}
#map {
    width:100%;
    height:600px;
    border:1px solid #CCC;}

div.olControlAttribution {
    padding: 3px;
    color:#000000;
    background-color:#ffffff;
    background-color:rgba(230,255,255,0.7);
    font-size:12px;
    line-height:14px;
    bottom:5px;
    vertical-align: middle;
}
</style>
</head>
<body onload="initMap()">
    <h1>Recipe 2：いろいろな地図を重ねて切り替えられるようにする</h1>
    <div id="map"></div>
    </body>
</head>
</html>

<!DOCTYPE html>

<html>

<head>

<title>recipe02</title>

function initMap(){

var projection3857 = new OpenLayers.Projection("EPSG:3857");

var projection4326 = new OpenLayers.Projection("EPSG:4326");

var map = new OpenLayers.Map({

div: "map",

projection: projection3857,

displayProjection: projection4326,

});

// 地理院地図の標準地図レイヤ

var cjstd = new OpenLayers.Layer.XYZ("標準地図",

"http://cyberjapandata.gsi.go.jp/xyz/std/${z}/${x}/${y}.png", {

attribution: "<a href='http://portal.cyberjapan.jp/help/termsofuse.html' target='_blank'>国土地理院</a>",

minZoomLevel: 2, maxZoomLevel: 18

});

// 地理院地図のオルソ画像レイヤ

var cjort = new OpenLayers.Layer.XYZ("オルソ画像",

"http://cyberjapandata.gsi.go.jp/xyz/ort/${z}/${x}/${y}.jpg", {

attribution: "<a href='http://portal.cyberjapan.jp/help/termsofuse.html' target='_blank'>国土地理院</a>",

minZoomLevel: 15, maxZoomLevel: 17

});

// 地理院地図の白地図レイヤ

var cjblk = new OpenLayers.Layer.XYZ("白地図",

"http://cyberjapandata.gsi.go.jp/xyz/blank/${z}/${x}/${y}.png", {

attribution: "<a href='http://portal.cyberjapan.jp/help/termsofuse.html' target='_blank'>国土地理院</a>",

minZoomLevel: 5, maxZoomLevel: 14

});

/* 作成した複数のレイヤをMapオブジェクトに追加する。

addLayer でなく addLayers となることに注意

用意した複数のベースレイヤを［］でくくる */

map.addLayers([cjstd,cjort,cjblk]);

map.addControl(new OpenLayers.Control.LayerSwitcher());

map.setCenter(new OpenLayers.LonLat(139.691706,35.689487)

.transform(projection4326, projection3857), 14);

}

</script>

<style>

h1 {

font-size: 130%;

margin-bottom: 0.5em;

border-bottom: 1px solid #fcb100;

}

#map {

width:100%;

height:600px;

border:1px solid #CCC;}

div.olControlAttribution {

padding: 3px;

color:#000000;

background-color:#ffffff;

background-color:rgba(230,255,255,0.7);

font-size:12px;

line-height:14px;

bottom:5px;

vertical-align: middle;

}

</style>

</head>

<h1>Recipe 2：いろいろな地図を重ねて切り替えられるようにする</h1>

</body>

</head>

</html>

実行結果

上記のhtmlファイルを表示すると、下記のような結果となります。
右上の青色の＋マークのレイヤスイッチをクリックして開くと、今回重ねあわせたベースレイヤが表示されていますので、ラジオボタンで切り替えられるようになっています。

レシピ２：いろいろな地図を重ねて切り替えられるようにする

実行結果

関連記事

共有: