前回の投稿でOpenLayers3でOpenStreetMapを自分のサイトに表示しましたが、今回は国土地理の地図を表示してみたいと思います。
参考は地理院地図の技術情報を参考にしています。
早速ソースの方からいきます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>OpenLayersテスト</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.7.0/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.14.0/build/ol.js" type="text/javascript"></script>
<script type="text/javascript" src="js/map_xyz.js"></script>
<style type="text/css">
#map_canvas .olControlAttribution {
font-size:13px;
bottom:3px;
}
</style>
</head>
<body onload="init()">
<div id="map_canvas" style="width:100%; height:400px"></div>
</body>
</html>
htmlファイルに関しては前回とほぼ同じものを使います。
次にjavascriptです。前回のものを少し変更しています。
function init(){
var mapObj = new ol.Map({
target: 'map_canvas',
renderer: ['canvas', 'dom'],
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
attributions: [
new ol.Attribution({
html: "<a href='http://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
})
],
url: "http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png",
projection: "EPSG:3857"
})
})
],
controls: ol.control.defaults({
attributionOptions: ({
collapsible: false
})
}),
view: new ol.View({
projection: "EPSG:3857",
center: convertCoordinate(139.76, 35.68),
zoom: 6
})
});
}
function convertCoordinate(longitude, latitude) {
return ol.proj.transform([longitude, latitude], "EPSG:4326","EPSG:900913");
}
OpenStreetMapを表示する場合には、
layers: [
new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'osm'})
})
]
上記のようにlayersのタイルをosmを指定していましたが、地理院地図を指定する場合は下記のように、
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
attributions: [
new ol.Attribution({
html: "<a href='http://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
})
],
url: "http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png",
projection: "EPSG:3857"
})
})
],
controls: ol.control.defaults({
attributionOptions: ({
collapsible: false
})
}),
とurlで地理院地図を指定します。合わせて上記のソースではサンプルと同じようにアトリビューションを表示しています。ちなみにアトリビューションを表示するためには
<link rel="stylesheet" href="http://openlayers.org/en/v3.7.0/css/ol.css" type="text/css">
の指定が必要です。
ちなみにurlの説明はここを参考にするとわかりやすいです。
スポンサード・リンク
