y2blog » OpenLayers 3 とGoogle Mapsを組み合わせてみる

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 の2つのマップオブジェクトを無理矢理同じ位置で重ね合わせているだけなので、動作は緩慢でしかもマップ上のイベント処理が両方のマップオブジェクトに関わるので、処理が煩雑になってしまう.


Google Maps integration example [ http://openlayers.org/en/v3.0.0/examples/google-map.html ]
【OpenLayersの過去のバージョン(V3.0)と過去のGoogle Map APIでの記事です.最新バージョンでは修正が必要です.】





<!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.10.1/css/ol.css" type="text/css">

<script src="http://openlayers.org/en/v3.10.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>

Local Search

Calendar

May 2019
S M T W T F S
« Apr    
 1234
567891011
12131415161718
19202122232425
262728293031  
  • Blogroll

  • Meta