OpenLayers에서 WFS 방식으로 벡터 레이어 추가하기

지도는 여러개의 레이어로 구성되는데, 레이어의 종류는 TMS, WMS, WFS 등 매우 다양합니다. 그 중 WFS는 서버로부터 이미지가 아닌 좌표를 요청하여 방식인데, 클라이언트에서 받은 좌표를 활용하여 레이어를 그리는 등의 용도로 활용할 수 있습니다.

WFS는 OGC 스펙 중의 하나로 OGC 표준을 지원하는 클라이언트 GIS 엔진인 OpenLayers에서 지원됩니다.

이 글은 OpenLayers 홈페이지의 예제 중 WFS에 대한 명확한 글로 제 나름대로 재해석하여 작성하였습니다.

OpneLayers에서 지도를 표현하기 위해서는 먼저 지도가 표시되는 div 요소가 필요합니다. 즉, 아래처럼요.

위의 코드에서 div 요소의 구성이외에 script도 보이는데. 이 script에서 지정한 index.js에서 OpenLayers를 통한 div의 지도화와 레이어 구성 등에 대한 자바스크립트 코드가 작성됩니다. 여튼, div 요소에 대한 크기 지정을 위해 스타일이 필요하겠죠. 아래처럼 말입니다.

이제 index.js에 대한 부분입니다.

코드는 모두 ES6으로 작성되어 있습니다. ES6을 지원하지 않는 브라우저라도 Babel 등과 같은 라이브러리를 통해 ES5로 변환되므로 제약없이 ES6의 기능을 활용하면 됩니다.

코드를 설명해 보면, 먼저 1번은 스타일을 추가한 것이고 3~10번은 필요한 모듈을 추가하는 코드입니다. 그리고 12~21번은 레이어를 위한 데이터를 제공하는 Source 객체를 생성하는 것인데, WFS는 좌표로 구성되는 정보이므로 VectorSource 클래스를 사용합니다. 좌표의 구성은 XML과 JSON 형식이 가능한데, 여기서는 JSON을 사용하므로 format은 GeoJSON 클래슬르 통해 지정하고 있습니다. url 부분은 WFS 형식에 따라 필요한 정보를 기술하는데, 좌표를 서버측에 요청하는 방식인 MBR 또는 Boundary Box인 BBox로 지정된 사각형 영역에 포함되는 도형만을 받기 위해 bboxStrategy로 strategy 값을 지정하고 있습니다.

이렇게 생성된 소스 변수인 vectorSource는 레이어를 정의하기 위해 사용되는데, 23~31번 코드에서 VectorLayer 클래스를 통해 레이어 객체를 생성합니다. 소스가 VectorSource이므로 이에 맞게 VectorLayer 클래스가 사용된 것이고, style 값에 레이어를 그릴때 사용하는 선의 색상과 굵기를 지정하고 있습니다. 33~35번은 배경지도를 위한 Open Street Map으로 하는 레이어를 생성하고 있습니다.

37~45번 코드가 바로 지도 객체를 생성하는 것으로, layers에 앞서 생성해 놓은 2개의 레이어 객체를 요소로 하는 배열로 지정하고 지도가 그려질 DOM 요소의 id를 target에 지정합니다. 그리고 view에는 화면상의 지도 중심 좌표와 최대 줌 레벨과 초기 레벨을 12로 지정하고 있습니다. 실행해보면.. 아래와 같은 결과가 나타납니다.

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다