前回の投稿でサイト内にOpenStreetMapを追加しました。前回はOpenLayers2を使用してマップの追加を行いましたが、今回はOpenLayers3を使用してマップの表示を行いたいと思います。
まず以下のコードを記述します。
<!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>
<!-- <script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script> -->
<script src="http://openlayers.org/en/v3.14.0/build/ol.js" type="text/javascript"></script>
</head>
<body>
<div id="map_canvas" style="width:100%; height:400px"></div>
</body>
</html>
続いて下記のJavascriptを記述します。
<script type="text/javascript">
var mapObj = new ol.Map({
target: 'map_canvas',
layers: [
new ol.layer.Tile({
//source: new ol.source.MapQuest({layer: 'osm'}) ※変更
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([139.76, 35.68]),
zoom: 10
})
});
}
</script>
上記のコードはOpenLayers3のサイトを参考にしました。
OpenLayers3のサイトでは
//source: new ol.source.MapQuest({layer: 'osm'})
source: new ol.source.OSM()
上記の部分が、
source: new ol.source.MapQuest({layer: 'sat'})
と’sat’となっていてこれを実行すると下記のように衛星写真になります。
ここを’osm’とすることでOpenStreetMapを表示することができます。
“source: new ol.source.OSM()”とすることでOpenStreetMapを表示することができます。
スポンサード・リンク
