[OpenLayers] WFS API 호출 with Vworld

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

 

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

 

WFS 란?

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

    방식의 프로토콜이다.

  - 호출된 해당 데이터 중에 피처(Feature) 라고 하는 공간 및 지리정보 데이터를 이용하여

    지도 위에 다양한 기능을 추가 할 수 있다.

 

1. API 신청

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

 

 

2. WFS를 호출하기 위한 GET 방식 URL 파라미터 설정

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

    그런것들을 포함하여 피처 데이터 값을 받는 방식, 피처의 최대 갯수 등의 여러 부가정보를 설정할 수 있다.
    자세한 것은 브이월드 홈페이지에 나와있는 공식 API문서를 확인해야 한다.

let wfsUrl = `https://api.vworld.kr/req/wfs?
SERVICE=WFS&  -- 지도 호출 방식
REQUEST=GetFeature&
TYPENAME=lt_c_uq111& -- 지도 종류
BBOX=13987670,3912271,14359383,4642932&
PROPERTYNAME=mnum,sido_cd,sigungu_cd,dyear,dnum,ucode,bon_bun,bu_bun,uname,sido_name,sigg_name,ag_geom& -- 호출할 데이터
VERSION=1.1.0& -- 버전
MAXFEATURES=40& -- 최대 피처갯수
SRSNAME=EPSG:900913& -- 좌표계
OUTPUT=application/json& -- 데이터 받는 방식
EXCEPTIONS=text/xml&
KEY='API 인증키'&
DOMAIN='127.0.0.1:8201`

 

 

3. WFS 피처 호출

  - 앞서 파라미터를 설정해준 URL을 가지고 fetch 방식으로 호출해야한다.

fetch(url)
    .then(response => response.json())
    .then(data => {
	for(let i = 0; i < data.features.length; i++){
		const feature = new ol.format.GeoJSON().readFeature(data.features[i]);
			
		const source = new ol.source.Vector({
			features: [feature]
 		});
	
        	const layer = new ol.layer.Vector({
            		source: source,
        	});		
	 	mapView.addLayer(layer);
	}
    })

 

  - 데이터를 호출하고 레이어까지 생성하는 코드이다. 하나씩 살펴보자.

 

 

4. 호출된 피처(Feature)를 GeoJSON으로 변환하기

  - GeoJSON은 간단하게 공간, 지리, 위치 정보를 가진 JSON이라 할 수 있다.

    원본 Feature 값으로는 해당 정보들을 처리 할 수 없기 때문에 JSON으로 변환을 시켜주는 것이다.

const feature = new ol.format.GeoJSON().readFeature(data.features[i]);

 

 

5. VectorSource 생성

  - 변환된 GeoJSON을 가지고 Vector 객체를 만들어준다.

const source = new ol.source.Vector({
    features: [feature]
});

 

 

6. VectorLayer 생성

  - 앞서 생성한 VectorSource를 가지고 기존의 베이스 맵 객체를 가져와 최종 레이어를 생성한다.

const layer = new ol.layer.Vector({
        source: source,
});		
mapView.addLayer(layer); // 레이어 추가

 

이렇게 공간정보 전문 플랫폼에서 제공하는 WFS API 레이어를 생성하기 위해서는

1. WFS API 호출

2. Feature 정보를 GeoJSON으로 변환

3. VectorSource 생성

4. VectorLayer 생성

5. 레이어 추가

 

이와 같은 과정이 필요하다.

 

그리고,

1. OpenLayers의 ol.source.Vector 와 ol.layer.Vector 객체의 적절한 조합이 중요하다.

2. Feature 데이터를 무조건 GeoJSON으로 변환할 것.

 

이 두가지를 명심하자.