mapbox 타일 불러오기 + 브이월드(공간정보 오픈플랫폼) 타일 사용

진행중인 프로젝트에서 지도의 타일을 변경해야하는 경우가 발생했었다.

 

지도는 mapbox라는 플랫폼을 사용중고, mapbox에서는 다양한 api들을 제공한다.

네이버 지도와의 차이를 말한다면 솔직히 큰 차이가 있는가 싶다. 네이버에서도 엄청 많은 기능들을 지도 API에서 제공을 하니깐.... 그래도 mapbox는 나름 유명한 대기업들이 사용중인것으로 나타나며 새로운 신기한 기술들이 많이 적용 가능하다. 3D같은거라던가....

 

중요한점은 프로젝트에서 mapbox를 쓴다는것 

타일을 변경하기 위해서는

 

1. 타일 적용 코드

2. 타일 url

 

이렇게 두가지가 필요하다.

mapbox에서의 타일 적용 코드는 아래의 샘플 페이지에서 확인 가능하다.

 

Mapbox에서 타일 적용 코드

 

https://docs.mapbox.com/mapbox-gl-js/example/map-tiles/

Add a raster tile source | Mapbox GL JS

소스 상에서

'tiles': [

    'https://stamen-tiles.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg'

]

이 부분이 타일에 관한 것이다. 이 부분만 변경되면 되는데..

 

 

타일 url

브이월드(공간정보 오픈플랫폼)에서 보면 아래의 링크에 타일에 관한것이 있다.

https://www.vworld.kr/dev/v4dv_wmtsguide_s001.do

공간정보 오픈플랫폼 오픈API

 

WMTS레퍼런스에 있는 내용을 보면 되고, WMTS는 Web Map Tile Service의 약자이다.

 

위의 tiles부분을 브이월드꺼로 변경을 하면 다음과 같다.

'tiles': [

    'http://api.vworld.kr/req/wmts/1.0.0/key/Satellite/{z}/{y}/{x}.jpeg'

]

key값만 회원가입을 하고 받아서 입력을 하면된다.

 

나머지 부분은 api문서를 보면 자세히 나와있으며, 솔직히 나는 지도쪽은 처음이라 
  http://api.vworld.kr/req/wmts/1.0.0/{key}/{layer}/{tileMatrix}/{tileRow}/{tileCol}.{tileType} 

이 부분이 잘 이해되지 않았다고 볼 수 있다. 알고보면 별거 아니었다.

 

혹시라도 누군가 나 처럼 헤매는 분을 위해서 글을 남긴다. 몇분이면 끝날거를 몇시간 끌었으니ㅎㅎ