leaflet - #3 WMS 레이어 추가하기

이번 글에서는 WMS 레이어를 지도에 추가해 보겠습니다.

WMS는 Web Map Service의 약자로 웹에서 지도를 표시하는 표준 서비스 스펙입니다. OGC(개방형 공간정보 컨소시엄) 라는 기구에서 만든 기준입니다. WMS와 비슷한 서비스 표준으로는 WFS, WCS, WPS, WMTS 등이 있습니다. 이런 서비스들을 OWS(OGC Web Services)라고 부릅니다. 이런 표준이 있으면 좋은 점은 특정 제품이나 회사에 지도 프로그램을 쓰다가 다른 프로그램으로 교체가 가능하다는 것이겠죠. 물론 표준이란 것이 필수적인 항목에 대해서만 통일되서 구현되어 있고 벤더마다 특별한 기능들이 추가로 구현되어 있어, 1:1로 교체가 되지는 않습니다. 그래도 없는것보다 낫다는 것이겠죠.

이번에도 서두가 길었는데, 아래 예제는 브이월드에서 제공하는 WMS 서비스를 이용해 우리나라 연속지적도를 지난 번 배경지도(바탕이 되는 지도) 위에 중첩하는 겁니다.

 

See the Pen leaflet tutorial #3 by yogin (@yogin) on CodePen.

자바스크립트 코드 부분은 아래와 같습니다.

var gangnamStation = [37.497929, 127.027669];
var map = L.map('map', {
        "center": gangnamStation,
        "zoom": 18,
        "zoomControl": true,
        "minZoom": 6,
        "maxZoom": 22
    });
var osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
});
var vworldLayer = L.tileLayer('https://xdworld.vworld.kr/2d/Base/service/{z}/{x}/{y}.png', {
        "minZoom": 6,
        "maxZoom": 22,
        "maxNativeZoom": 19,
        "attribution": '&copy; <a href="http://www.vworld.kr/">vworld</a> contributors'
});

var cadastral = L.tileLayer.wms("http://api.vworld.kr/req/wms", {
        "version": "1.3.0",
        "layers": "lp_pa_cbnd_bonbun,lp_pa_cbnd_bubun",
        "styles": "lp_pa_cbnd_bonbun,lp_pa_cbnd_bubun,lp_pa_cbnd_bonbun_line,lp_pa_cbnd_bubun_line",
        "format": "image/png",
        "transparent": true,
        "opacity": 1.0,
        "maxZoom": 22,
        "maxNativeZoom": 19,
        "key": "본인 발급 인증키",
        "domain": "본인 발급 인증키 도메인"
    }).addTo(map);

var baseMaps = {
"OSM" : osmLayer,
"브이월드": vworldLayer
};
var overlayMaps = {
"지적도": cadastral
};
vworldLayer.addTo(map);
L.control.layers(baseMaps, overlayMaps).addTo(map);

 

이전 글과 다른 부분과 주요 코드 부분을 설명하면

15: 배경지도는 19레벨까지만 제공하는데, maxZoom(22)까지는 19레벨 이미지를 늘여서 확대

19~30: WMS 레이어 추가,

21: 브이월드에서 제공하는 레이어 목록을 콤마로 연결

22: 브이월드에서 제공하는 스타일 목록을 콤마로 연결

28: 브이월드에서 발급받은 인증키

29: 브이월드에서 인증키 발급받을 때 사용한 사용처 주소

(※ 사용처 주소가 아닌 곳에서 발급받은 인증키를 사용하면 부정사용으로 법적 제재를 받을 수 있습니다)

 

나머지는 이전 글과 거의 유사합니다.

브이월드에서 인증키를 받거나 다른 WMS 서비스 레이어를 확인하시려면, 여기를 클릭해서 내용을 둘러보시면 됩니다.

 

다음 글에서는 WFS 레이어를 이용하는 방법을 설명드리겠습니다.