leaflet - #4 WFS 활용하기

이번 글에서는 WFS를 활용하는 방법에 대해서 설명드리겠습니다.

WFS는 Web Feature Service의 약자로 웹에서 지도에 표현하는 객체의 정보를 서비스하는 표준 스펙입니다. 역시 OGC(개방형 공간정보 컨소시엄)에서 만든 것이고, WMS(Web Map Service)와 함께 ArcGIS Server, Geoserver, Mapserver 등 대부분의 웹 서버 엔진에 구현되어있습니다.

WMS 서비스와 WFS 서비스의 가장 큰 차이점은 응답 형태에 있습니다. WMS는 웹 요청에 대한 응답으로 이미지(png, jpeg 등)를 제공하고, WFS는 응답으로 텍스트 파일(gml, kml, geojson 등)을 제공합니다.

WFS에서 응답으로 보내주는 텍스트 파일에는 요청한 지도 위치에 있는 객체의 기하(좌표 목록)정보와 속성정보를 보내줍니다. 우리는 이렇게 받은 텍스트 파일을 파싱해서 원하는 정보를 골라쓰면 되는 것입니다.

아래는 지난 글에서 브이월드 WMS 서비스를 연속지적도 이미지를 지도에 중첩하는 방법을 설명드렸는데, 이번에는 연속저정도를 클릭하면 해당 속성정보를 확인하는 방법을 알려드리겠습니다.

 

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

 

 

클릭 시 마커가 보여지는 부분은 아래와 같습니다.

map.on("click", function(e) {
  var delta = 0.0000001;
  var bbox = [];
  bbox.push(e.latlng.lng-delta);
  bbox.push(e.latlng.lat-delta);
  bbox.push(e.latlng.lng+delta);
  bbox.push(e.latlng.lat+delta);
  var getFeatureUrl = "http://api.vworld.kr/req/wfs?REQUEST=GetFeature";
  getFeatureUrl += "&TYPENAME=lp_pa_cbnd_bubun";
  getFeatureUrl += "&VERSION=1.1.0";
  getFeatureUrl += "&MAXFEATURES=1";
  getFeatureUrl += "&SRSNAME=EPSG:4326";
  getFeatureUrl += "&OUTPUT=json";
  getFeatureUrl += "&BBOX=" + bbox.join(",");
  getFeatureUrl += "&KEY=" + apiKey;
  getFeatureUrl += "&DOMAIN=" + apiDomain;
  
  L.marker(e.latlng)
  .addTo(map)
  .bindPopup('<a target="_blank" href="'+getFeatureUrl+'">지적정보 확인</a>')
  .openPopup();
});

주요 코드를 설명드리면

3~7: 마우스로 클릭한 위치에 조그마한 사각 영역 생성

8~16: 해당영역의 지적정보를 가져오는 브이월드의 WFS 요청 URL 생성

18~21: 영역 지적정보 요청 URL 링크를 만들어 마커 생성후 팝업

 

지적정보를 바로 가져와 보여주면 좋겠지만 CORS(교차 출처 리소스 공유) 위반 해결을 위해서는 추가적인 작업이 필요하기 때문에 강의 범위를 벗어난다고 생각해 링크만 생성했습니다.

링크를 클릭하면, 그 곳의 지번, 주소, 공시지가 등을 확인 할 수 있습니다.

앞선 글에서도 언급했지만,

※ apiKey(브이월드 서비스 인증키)는 본인이 직접 발급받아서 사용하시기 바랍니다. domain 값과 다른 서비스에서 사용할 경우 서비스가 갑자기 중단되거나 법적인 제재를 받을 수 있습니다.