3
27
2016
OpenLayers 3 とGoogle Mapsを組み合わせてみる
OpenLayersのベースマップとしてGoogle Mapsを利用する
OpenLayers 3 では標準的なベースマップとしてOSM(Open Street Map)やBeing Mapsなどが使用可能だが、世間で最もポピュラーなGoogle Mapsがサポートされていない．勿論自分でGoogle Mapsの地図タイルを無理矢理呼び出して、OpenLayersのタイルマップとして利用する事は可能だが、ライセンス的にはNGだろう．
Google Mapsを利用するには、Google が用意しているGoogle Maps APIを用いてアクセスしなければならないが、OpenLayers 3 のドキュメントやサンプルコードを漁っていたら、Google Mapsをベースマップ（正確にはレイヤー重ね）に関する記述を見つけた．
この方法だと、Google Maps APIを用いているのでライセンス的な問題は無いが、Google MapsとOpenLayers の２つのマップオブジェクトを無理矢理同じ位置で重ね合わせているだけなので、動作は緩慢でしかもマップ上のイベント処理が両方のマップオブジェクトに関わるので、処理が煩雑になってしまう．
Google Maps integration example [ https://openlayers.org/en/v3.0.0/examples/google-map.html ]
【OpenLayersの過去のバージョン(V3.0）と過去のGoogle Map APIでの記事です．現在はGoogle Mapsに関するサンプルは無い模様．】
【脱Google Mapsにより実例はありません】
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>OpenLayers 3 Example with Google Maps</title>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.20.1/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.20.1/build/ol.js"></script>
<script src="http://maps.google.com/maps/api/js?v=3"></script>
</head>
<body>
<h4>OL3 vector object layers with Google Maps</h4>
<div id="gmap" style="width: 640px; height: 480px;" ></div>
<div id="olmap" style="width: 640px; height: 480px;" ></div>
<script>
// Base Map [ Google Maps ]
var gmap = new google.maps.Map( document.getElementById( 'gmap' ), {
mapTypeId: google.maps.MapTypeId.TERRAIN,
disableDefaultUI: true,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.TOP_CENTER,
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.TERRAIN,
google.maps.MapTypeId.SATELLITE
]
},
zoomControl: false,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_BOTTOM
},
scaleControl: true,
streetViewControl: false
});
// OL3 view [ Sphere Mercator projection : EPSG:3857 ]
var view = new ol.View( {
projection: "EPSG:3857", // Sphere Mercator
maxZoom: 18
} );
// OL3 event handler [ map center ]
view.on( 'change:center', function() {
var smCenter = view.getCenter();
var latLng = ol.proj.transform( smCenter, 'EPSG:3857', 'EPSG:4326' );
// synchronize with Google Maps
gmap.setCenter( new google.maps.LatLng( latLng[1], latLng[0] ) );
});
// OL3 event handler [ map zoom ]
view.on( 'change:resolution', function() {
var zoom = view.getZoom();
gmap.setZoom( zoom );
});
// OL3 KML vector object
var vector = new ol.layer.Vector({
source: new ol.source.Vector({
url: '../KML/TenninkyouTrail.kml',
format: new ol.format.KML()
})
});
// DOM element for OL3 Vector Layer object
var olMapDiv = document.getElementById( 'olmap' );
var map = new ol.Map({
layers: [vector],
interactions: ol.interaction.defaults({
altShiftDragRotate: false,
dragPan: false,
rotate: false
}).extend([new ol.interaction.DragPan({kinetic: null})]),
target: olMapDiv,
view: view
});
var smCenter = ol.proj.transform( [142.822676, 43.587230], "EPSG:4326", "EPSG:3857" );
view.setCenter( smCenter );
view.setZoom( 12 );
//
olMapDiv.parentNode.removeChild( olMapDiv );
gmap.controls[ google.maps.ControlPosition.TOP_RIGHT].push( olMapDiv );
</script>
</body>
</html>
