[TMS] Tilemap을 활용하여 google basemap을 ol3에 올려보자

OpenLayers2에서는 basemap으로 google map을 설정할 수 있도록 지원하고 있으나

OpenLayers 3(통상 ol이라고 부르는 ol3이상의 버전)부터는 지원하지 않는다.

예를 들면 이런 식.

 

OpenLayers2

var map = new OpenLayers.Map('map_target_element', {
    projection: 'EPSG:3857', // google map srs
    layer: 
        new OpenLayers.Layer.Google(
            "Google Streets" // the default
        ),
    center: new OpenLayers.LonLat(x, y), // x, y coords must be epsg:3857
    zoom: 5
});

 

Default는 google streets map이고, satellite나 hybrid map을 올리고 싶다면

type 값을 google.map.MayTypeId.SATELLITE 와 같이 주면 된다.

아래는 google physical map에 대한 예시.

 

new OpenLayers.Layer.Google(
    "Google Physical",
    {type: google.maps.MapTypeId.TERRAIN}
);

 

 

Openlayers 3 이상

그러나 ol3부터는 이와같은 내장함수를 지원하지 않고있다.

그래서 ol3부터는 TMS를 활용하면 된다.

 

TMS(Tile Map Service)란?
타일 맵 서비스(Tile Map Service) 또는 TMS는 오픈 소스 지리공간 재단이 개발한 타일 웹 맵 사양이다. 일반적으로 REST 원칙 충족을 시도하는 URI 구조를 요구한다. 이 TMS 프로토콜은 오픈스트리트맵에 쓰이는 매우 단순한 표준과 웹 맵 서비스 표준의 복잡성 간의 갭을 채움으로써 대체 공간 참조 시스템을 지원하면서도 타일에 대한 단순한 URL을 제공한다.

 

Google map 타일 서비스를 활용하고 싶다면 아래 URL을 base로 하여

원하는 레이어를 선택해서 활용하면 된다.

 

http://mt0.google.com/vt/lyrs=m&hl=en&x={x}&y={y}&z={z}  // lyrs옵션이 layer type
- h = roads only
- m = standard roadmap
- p = terrain
- r = altered roadmap
- s = satellite only
- t = terrain only
- y = hybrid

 

ol3에서의 Tilemap 활용은 아래를 참고하면 된다.

 

// google road
var googleRoadLayer = new ol.layer.Tile({
    type : 'base',
    title: "Google roads",
    source: new ol.source.XYZ({
        projection : 'EPSG:3857',
        url : 'http://mt0.google.com/vt/lyrs=m&hl=en&x={x}&y={y}&z={z}',
        crossOrigin: 'anonymous'
    }),
    visible: true
});

 

 

 

Reference

• [위키백과] 타일 맵 서비스
• [StackOverFlow] Google Maps Tile URL for HYBRID mapType tiles?