𝝅번째 알파카의 개발 낙서장

screen

OpenLayers를 여행하는 개발자를 위한 안내서 - 20. WFS Transaction으로 데이터 추가하기

projects

GIS

시리즈 톺아보기

OpenLayers를 여행하는 개발자를 위한 안내서

OpenLayers를 여행하는 개발자를 위한 안내서
count

개요 🔗

지금까지는 GeoServer를 통해 데이터를 호출하고, 이를 표현하는 것이 전부였다. 객체로 표현을 하던, 이미지로 그리던, 데이터를 직접 표현해주던, 결국 어떠한 형태로든 데이터를 보여주는 수준에 그쳤다.

이 문서를 포함하여, 앞으로 서술할 3개 문서는 공간정보 데이터의 삽입/수정/삭제에 대해 다룬다. WFS Transaction 프로토콜을 활용하면 정해진 패턴으로 데이터의 CUD를 수행할 수 있다.

이 중 이 문서에서는 WFS Transaction Insert. 즉, 공간정보 데이터의 추가에 대해 다룬다.




공간정보 데이터 추가하기 🔗

WFS Transaction 프로토콜을 활용하면, 공간정보 데이터를 DB가 아닌 웹/앱 등 API 호출이 가능한 다양한 환경에서 데이터를 추가할 수 있다.

본 문서에서의 처리 방식은 아래와 같다.

  1. 추가하기 버튼을 누른다.
  2. 원하는 모양으로 Polygon을 그린다.
    1. 본 문서에서는 Polygon 형태만을 다룬다.
  3. 삽입할 데이터를 작성한다.
  4. WFS Transaction Insert를 통해 데이터를 추가한다.


1. WFS Transaction Insert URL 구성하기 🔗

TXT

0POST https://example.com/geoserver/wfs

XML

0<wfs:Transaction
1 xmlns:wfs="http://www.opengis.net/wfs"
2 xmlns:gml="http://www.opengis.net/gml"
3 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
4 service="WFS"
5 version="1.0.0"
6 xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/WFS-transaction.xsd">
7 <wfs:Insert>
8 <layer_name>
9 <column1>value1</column1>
10 <column2>value2</column2>
11 <column3>value3</column3>
12 <geo_column>
13 <gml:Polygon srsName="EPSG:4326">
14 <gml:outerBoundaryIs>
15 <gml:LinearRing>
16 <gml:coordinates>x1,y1 x2,y2 x3,y3 x4,y4 x1,y1</gml:coordinates>
17 </gml:LinearRing>
18 </gml:outerBoundaryIs>
19 </gml:Polygon>
20 </geo_column>
21 </layer_name>
22 </wfs:Insert>
23</wfs:Transaction>

이전까지의 API 호출은 모두 GET으로 이루어졌지만, WFS Transaction의 모든 요청은 POST로 이루어진다. 요청의 body에 위 XML 양식을 입력하여 추가할 데이터를 선언할 수 있다.

  • 대상 테이블은 layer_name이다.
  • 컬럼 column1, column2, column3에 각각 value1, value2, value3을 삽입한다.
    • Schema엔 있으나, 삽입 시 컬럼을 명시하지 않았을 경우, 해당 컬럼은 null로 삽입된다.
  • 공간정보 컬럼명은 geo_column이다.
  • 좌표 x1,y1 x2,y2 x3,y3 x4,y4 x1,y1의 폴리곤이다.
    • 좌표계는 EPSG:4326이다.

XML의 의미는 위와 같다. 직접 지도에 도형을 그린 후, 도형의 좌표값과 넣을 데이터를 입력하여 XML을 생성해야한다.

위 XML은 Polygon 데이터를 포함하며, 다른 형식의 데이터 XML이 궁금하다면 8장을 참조하자.



2. Draw 기능 추가하기 🔗

지도는 일반적인 WFS 지도를 활용한다. 지도 위에 Polygon을 그리기 위해 Draw 객체를 추가해보자.

TYPESCRIPT

0import { Map } from 'ol';
1import Draw from 'ol/interaction/Draw';
2import VectorLayer from 'ol/layer/Vector';
3import VectorSource from 'ol/source/Vector';
4
5const drawSource = new VectorSource();
6
7const drawLayer = new VectorLayer({
8 source: drawSource,
9 properties: { name: 'draw' }
10});
11
12const drawInteraction = new Draw({
13 source: drawLayer.getSource(),
14 type: 'Polygon'
15});
16
17new Map({
18 ...
19 layers: [ ..., drawLayer ]
20});
  1. VectorSource를 생성한다.
    1. 드로잉되는 객체는 해당 VectorSource에 생성된다.
  2. VectorSourceVectorLayer를 생성한다.
    1. 기존의 VectorLayer를 활용하는 것도 가능하다.
  3. VectorSourceDraw 객체를 생성한다.
    1. type 값을 통해 원하는 데이터의 형식을 지정할 수 있다.


4. Draw 객체에 이벤트 붙이기 🔗

map.addInteraction() 메서드로 기능을 활성화할 수 있다. 반대로 드로잉 기능을 비활성화하려면, map.removeInteraction()으로 Draw 객체를 제거해야한다.

즉, DrawMap에 추가해놓고 제거하지 않으면, 드로잉 기능이 계속 활성화되어 있어서 지도를 제대로 조작할 수 없는 현상이 발생한다. 따라서 드로잉 후 적절한 시점에 Draw 객체를 Map에서 제거해줘야한다.

혹은 Draw 객체의 setActive() 메서드를 통해서 조작할 수도 있다. boolean을 파라미터로 주어 동작 여부를 지정한다.

TYPESCRIPT

0document.onkeyup = (e) =>
1{
2 // ESC를 눌렀을 경우
3 if (e.key.toLowerCase() === 'escape')
4 {
5 map.removeInteraction(drawInteraction);
6 }
7};
8
9document.oncontextmenu = () =>
10{
11 map.removeInteraction(drawInteraction);
12};

각각 ESC 키를 눌렀을 때, 오른쪽 마우스 버튼을 눌렀을 때 Draw 기능을 해제한다.

Draw 객체 또한 이벤트를 지원한다.

TYPESCRIPT

0// 드로잉 시작 이벤트
1drawInteraction.on('drawstart', () => {});
2
3// 드로잉 종료 이벤트
4drawInteraction.on('drawend', () => {});
5
6// 드로잉 취소 이벤트
7drawInteraction.on('drawabort', () => {});
  • drawstart - 드로잉을 시작할 때
  • drawend - 드로잉이 종료될 때 (도형을 정상적으로 그림)
  • drawabort - 드로잉을 취소할 때 (다시 그리기와 비슷)

이 문서에서는 드로잉이 끝날 경우 데이터 입력 폼을 출력한다. 입력이 완료되면 WFS Transaction API를 호출한다.




예제 확인하기 🔗

image

OpenLayers6 Sandbox - WFS Transaction Insert에서 이를 구현한 예제를 확인할 수 있다.