[OpenLayers3] WFS를 이용한 벡터 레이어

WFS는 Web Feature Service로 Feature는 도형과 속성을 가진 데이터 단위입니다. WFS를 지원하는 공간 서버를 통해 도형의 구성 좌표와 속성 데이터를 가져오고 이런 데이터를 클라이언트에서 받아 화면에 그릴 수 있는데요. 이에 대해 ol3에서 어떻게 처리하는지 살펴보도록 하겠습니다. 먼저 우리가 만들 최종 결과 지도 웹 페이지는 아래와 같습니다.

오픈 스트리트 맵을 배경지도 레이어로 사용 되고 있고, 벡터 레이어를 통해 WFS로 받은 도형이 노란색 외곽선과 반투명한 빨간색의 채움 스타일로 그려지고 있습니다. 위의 웹 페이지에 대한 구현 코드를 살펴보겠는데요. 먼저 필요한 외부 CSS와 자바스크립트 라이브러리를 페이지에 포함하는 코드입니다.

다음은 UI에 대한 태그입니다.

위의 div는 다음과 같은 크기에 대한 스타일이 지정되어 있습니다.

이제 필요한 라이브러리와 스타일, 그리고 UI는 준비가 되었는데요. 이 UI가 작동할 수 있도록 스크립트 코드를 작성하겠습니다. 먼저 jQuery의 ready 이벤트 함수를 아래처럼 미리 추가해 둡니다.

이제 위의 ….에 해당하는 부분에 스크립트 코드를 추가해 보도록 하겠습니다. 먼저 WFS를 이용해 데이터를 받을 벡터 레이어의 소스 객체를 아래처럼 생성합니다.

var vectorSource = new ol.source.Vector({
    format: new ol.format.GeoJSON(),
    url: function (extent) {
        var strUrl = 'https://ahocevar.com/geoserver/wfs?service=WFS&' +
            'version=1.1.0&request=GetFeature&typename=osm:water_areas&' +
            'outputFormat=application/json&srsname=EPSG:3857&' +
            'bbox=' + extent.join(',') + ',EPSG:3857';

        return strUrl;
    },
    strategy: ol.loadingstrategy.bbox
});

WFS 방식을 통해 공간서버에 Feature 데이터를 요청할 수 있는데요. WFS는 요청받은 데이터를 XML이나 JSON과 같은 형식으로 결과를 클라이언트에게 전달합니다. 또한 WFS는 URL 호출 방식으로 Feature 데이터를 요청합니다. 바로 3번의 url 속성이 WFS를 URL로 호출할때 사용하는 url 문자열입니다. https://ahocevar.com/geoserver/wfs 까지가 WFS 서비스를 제공하는 서버의 주소이고, 이후 ? 다음이 WFS 서비스 호출시 전달하는 인자값들입니다. 각 인자값은 다음과 같습니다.

1. service=WFS
2. version=1.1.0
3. request=GetFeature
4. typename=osm:water_areas
5. outputFormat=application/json
6. srsname=EPSG:3857
7. bbox=100,100,200,200,EPSG:3857

1번은 해당 URL 요청이 WFS 서비스라는 의미이고, 2번은 WFS의 버전을 의미하며, 3번은 WFS 기능 중 Feature 정보를 얻기 위한 GetFeature 기능에 대한 호출의 의미이고, 4번은 WFS에 의해 서비스 되는 공간 데이터 이름이고, 5번은 결과의 형식을 JSON 포맷으로 전달해줄 것에 대한 내용이며, 6번은 결과에 대한 좌표 체계를 무엇으로 할 것인지를 지정하는 것입니다. 끝으로 7번은 Feature를 조회할 좌표 범위인데요. 100,100,200,200,EPSG:3857은 최소 X 좌표값, 최소 Y 좌표값, 최대 X 좌표값, 최대 Y 좌표값, 좌표값의 좌표체계을 의미하며 해당 좌표체계로 지정된 좌표계 범위(Bounding Box)에 포함되는 Feature를 조회하라는 의미입니다.

레이어를 위한 데이터 소스가 준비되었으므로 레이어 객체를 생성할 수 있는데요. 해당 코드는 아래와 같습니다.

var vector = new ol.layer.Vector({
    source: vectorSource,
    style: new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: 'rgba(255, 255, 0, 1.0)',
            width: 4
        }),
        fill: new ol.style.Fill({
            color: 'rgba(255,0,0,0.4)'
        })
    })
});

WFS 서비스를 위한 레이어는 ol.layer.Vector 타입에 대한 객체인데요. 이 객체의 생성을 위해 낲서 생성한 데이터 소스 객체인 vectorSource 변수를 생성자의 source 속성에 지정하고 style 속성에는 도형을 그릴때 사용할 수 있는 외곽선 스타일과 채움 스타일을 지정합니다.

다음은 WFS에 의한 벡터 레이어 밑에 배경맵으로 사용할 오픈 스트리트 맵에 대한 레이어 객체의 생성입니다.

var raster = new ol.layer.Tile({
    source: new ol.source.OSM()
});

이제 끝으로 앞서 생성한 2개의 레이어 객체, 즉 WFS에 의한 벡터 레이어와 오픈 스트리트 맵에 대한 레이어로 구성된 지도 객체를 생성합니다.

var map = new ol.Map({
    layers: [raster, vector],
    target: 'map',
    view: new ol.View({
        center: [-8910887.277395891, 5382318.072437216],
        maxZoom: 19,
        zoom: 15
    })
});

아래는 위에서 설명한 전체 코드에 대한 다운로드입니다.