OpenLayers 3에서 Google Map 사용하기

OpenLayers 3로 지도 서비스를 만들때 Google Map을 바탕지도로 사용하는 방법이다.

OpenLayers 3의 Quick Start에 소개된 것처럼
ol.Map에 ol.layer.Tile로 source를 등록하는게 정석이다.

<script type='text/javascript'>
    var map = new ol.Map({
        target: 'map',
        layers: [
          // 이미지 방식의 Tile이 깔리고 View에 의해 제어된다
          new ol.layer.Tile({
            // 여기에 new ol.source.Google()이 붙는 형태였음
            source: new ol.source.OSM()
          })
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([37.41, 8.82]),
          zoom: 4
        })
    });
</script>

 

이 방식을 OpenLayers 2까지는 Google에서 제공을 했었는데,
* 참고 http://dev.openlayers.org/examples/google.html

OpenLayers 3부터 호환성을 문제로 Tile 서비스를 공식적으로 지원하지 않게 되었다.
* 정석으로 붙일 방법이 없어졌다는 말임
* 참고 : Paul Spencer’s post on the OL3 mailing list

그렇지만, 역시나 타국의 개발자들이 방법을 만들어놓았다.

[ 요약 ]
1) 구글 지도를 생성하고
– 마우스 포함해 모든 interaction을 비활성화 시킨 채로
2) 구글맵의 div 위에 OpenLayers를 Tile 없이 생성하여 겹친다. (= Div를 겹쳐 올린다)
3) OpenLayers의 지도 이벤트를 구글 지도 이벤트에 연결한다 (setCenter, setZoom)
– OSM 이벤트 ‘change:center’, ‘change:resolution’에 대해
– mapGoogle의 setCenter와 setZoom을 연결
4) control에 대한 시간차(delay)가 발생하는데, OpenLayers 3의 interactions 옵션을 조정해 Smooth Move 효과를 죽인다

이에 대한 샘플 코드는 Openlayer Samples에 있다.
* 다만 안정성을 담보할 수 없으므로 productation 시키지는 말라고 권고하고 있음

샘플페이지를 작성해 보았다. ==> GoogleMap

이 중 핵심부분만 살펴보면

<!-- 상위 div에서 position:relative; 스타일을 적용하고 하위에서 절대위치 지정 -->
<div id="printableArea" style="width: 100%; height: 90%; margin: 0; padding:0; position:relative;">
  
	<div id="map-google" style="position: absolute; left:0px; top:0px; z-index: 1; width: 100%; height: 100%; margin: 0;  padding:0;"></div>
	<div id="map-main" style="position: absolute; left:0px; top:0px; z-index: 2; width: 100%; height: 100%; margin: 0; padding:0;"></div>
	  
	<div class="row" style="position: absolute; bottom: -17px; z-index: 999; width:100%;">
		<div id="location" style="float:left" class="col-md-6"></div>
		<div id="scale" class="pull-right" style="float:right">Scale</div>
	</div>
	<div id="info">&nbsp;</div>
	          
</div>

// view에 의해 Vector Source의 좌표값이 변경된다
// **NOTE: 'EPSG:3857'을 사용해야 두 지도가 왜곡없이 겹쳐진다!!
var viewMain = new ol.View({
    center : ol.proj.transform( centerWGS84, 'EPSG:4326', srsName ),
    projection : srsName,       // 'EPSG:3857'
    zoom: zoomDefault,
    minZoom: 10,   // 작게 보는 축소 한계
    maxZoom: 19,   // 크게 보는 확대 한계
});

var mapMain = new ol.Map({
    target : 'map-main',
    renderer : 'canvas',
    view : viewMain,
    controls : [ new ol.control.Zoom(), new ol.control.ZoomSlider(), mousePosition ],
    // 지도 조절시 부드러운 움직임을 없앤다
    interactions: ol.interaction.defaults({
            dragPan: false,
            mouseWheelZoom: false
          }).extend([
            new ol.interaction.DragPan({kinetic: false}),
            new ol.interaction.MouseWheelZoom({duration: 0})
          ]),
    layers : layerArr
});

var mapGoogle;
// google API키 위치 다음에 callback 함수 지정하는 부분이 있음: &callback=initMap
function initMap() {
	// 구글 지도 생성 : <div id='map-google'>에 올려짐
	// 대부분의 control들이 disable 된 상태다
	mapGoogle = new google.maps.Map(document.getElementById('map-google'), {
		disableDefaultUI: true,
		keyboardShortcuts: false,
		draggable: false,
		disableDoubleClickZoom: true,
		scrollwheel: false,
		streetViewControl: false,
	        center: {lat: centerWGS84[1], lng: centerWGS84[0]},
	        zoom: zoomDefault
	});

};

// ol3의 map change 이벤트를 google map과 연결한다	
viewMain.on('change:center', function() {
	var center = ol.proj.transform( viewMain.getCenter(), srsName, 'EPSG:4326');
	mapGoogle.setCenter(new google.maps.LatLng( center[1], center[0] ));
});
// google map은 ol3의 zoom level과 호환됨
viewMain.on('change:resolution', function() {
	mapGoogle.setZoom( viewMain.getZoom() );
});

** 참고 자료

• Use OL3 and Google Maps together
• Openlayers 3 turn off smooth scroll