[OpenLayers] WMS API 호출 with Vworld

브이월드에서 제공하는 API를 이용하여 WMS 방식의 지도 레이어를 그려보자

 

먼저, 알아야할 몇가지들을 보자

 

WMS 란?

  - 지도를 호출하는 방식 중에, 지도서버 내에서 지도와 관련된 데이터를 이용하여

    생성된 이미지를 호출하는 방식의 프로토콜이다.

  - 보통, 타일 방식으로 생성된 기본 지도 위에 특별한 기능을 추가하기 위해 선을 그리거나,

    지도에서 건물을 감싸는 레이어를 호출하는 목적으로 사용 된다.

 

1. API 신청

  - https://www.vworld.co.kr 브이월드 홈페이지에서 API 신청을 할 수 있다.

 

 

2. WMS를 호출하기 위한 파라미터 설정

  - 지도에 추가할 특정 기능을 위해 본인이 원하는 레이어 종류가 있을 것이다.

    그런것들을 포함하여 해당 지도 정보 값을 받는 방식, 이미지의 크기 등을 설정할 수 있다.
    자세한 것은 브이월드 홈페이지에 나와있는 공식 API문서를 확인해야 한다.

let mapParam = {
    SERVICE: 'WMS',  // 지도 호출 방식
    REQUEST: 'GetMap',
    VERSION: '1.3.0',  // 버전
    LAYERS: ['lp_pa_cbnd_bonbun','lp_pa_cbnd_bubun'],  // 지도 종류
    STYLES: ['lp_pa_cbnd_bonbun','lp_pa_cbnd_bubun'],  // 지도의 스타일 종류(지도 색상, 글자크기 등)
    CRS: EPSG,
    WIDTH: '256',  // 이미지 너비
    HEIGHT: '256',  // 이미지 높이
    FORMAT: 'image/png',  // 지도 정보 값 받는 방식
    TRANSPARENT: 'TRUE',
    BGCOLOR: '0xFFFFFF',
    EXCEPTIONS: 'text/xml',
    KEY: 'API 인증키',  // 브이월드에서 신청한 API 인증 키값을 넣으면 된다.
    DOMAIN: '127.0.0.1:8201',
};

 

 

3. WMS 레이어 생성

  - 지도를 본격적으로 셋팅해주는 OpenLayers의 기능을 사용하여 레이어를 생성해주자

let wmsLayer = new ol.layer.Tile({
    source: new ol.source.TileWMS({
        url: 'https://api.vworld.kr/req/wms',
        params: mapParam,
    })
});

  - 브이월드 API URL을 입력하고 앞에서 설정한 파라미터를 넣어주면 생성이 완료된다. 

 

 

4. 생성된 레이어 그리기

  - WMS를 호출하기 이전에 기본 지도가 존재한다는 것을 가정하고

    해당 지도 오픈레이어스 객체의 함수를 이용하여 추가해주기만 하면 된다.

mapView.addLayer(wmsLayer);