logo

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

screen

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

projects

GIS

시리즈 톺아보기

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

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

개요 🔗

세 가지 WFS Transaction API 중, 데이터를 수정하는 Update에 대해 다뤄보자.




공간정보 데이터 수정하기 🔗

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

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

  1. 객체를 클릭하면 나타나는 Overlay 안의 수정 버튼을 클릭한다.
  2. 원하는 모양으로 Polygon을 수정한다.
    1. 본 문서에서는 Polygon 형태만을 다룬다.
  3. 수정할 데이터를 작성한다.
  4. WFS Transaction Update를 통해 데이터를 수정한다.


1. WFS Transaction Update 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:ogc="http://www.opengis.net/ogc"
4 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
5 service="WFS"
6 version="1.0.0"
7 xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/WFS-transaction.xsd">
8 <wfs:Update typeName="layer_name">
9 <wfs:Property>
10 <wfs:Name>column1</wfs:Name>
11 <wfs:Value>value1</wfs:Value>
12 </wfs:Property>
13
14 <wfs:Property>
15 <wfs:Name>column2</wfs:Name>
16 <wfs:Value>value2</wfs:Value>
17 </wfs:Property>
18
19 <wfs:Property>
20 <wfs:Name>geo_column</wfs:Name>
21 <wfs:Value>
22 <gml:Polygon srsName="EPSG:0000">
23 <gml:outerBoundaryIs>
24 <gml:LinearRing>
25 <gml:coordinates>x1,y1 x2,y2 x3,y3 x4,y4 x1,y1</gml:coordinates>
26 </gml:LinearRing>
27 </gml:outerBoundaryIs>
28 </gml:Polygon>
29 </wfs:Value>
30 </wfs:Property>
31
32 <ogc:Filter>
33 <ogc:FeatureId fid="layer_name.32" />
34 </ogc:Filter>
35 </wfs:Update>
36</wfs:Transaction>

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

  • 대상 테이블은 layer_name이다.
    • wfs:Update 태그의 프로퍼티 typeName으로 명시한다.
  • 각 컬럼 데이터는 wfs:Property 태그로 각각 표시한다.
    • 하위 태그 wfs:Name는 컬럼의 이름을 의미한다.
    • 하위 태그 wfs:Value는 컬럼의 수정할 값을 의미한다.
  • 조건은 ogc:Filter 태그로 명시하며, OGC Filter 스펙을 따른다.

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

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



2. Snap과 Modify 기능 추가하기 🔗

지도는 일반적인 WFS 지도를 활용한다. Draw 객체가 도형을 그리는 객체라면, Modify 객체는 이미 그려진 도형을 조작할 수 있는 기능이다.

쉽게 말해서, 그냥 도형의 모습을 바꿀 수 있다고 생각하면 된다.

Snap은 마우스 포인터가 객체에 쉽게 달라붙도록 유도하는 기능이다.

TYPESCRIPT

0import Snap from 'ol/interaction/Snap';
1import Modify from 'ol/interaction/Modify';
2
3const snap = new Snap({
4 source: wfsLayer
5});
6
7const modify = new Modify({
8 source: wfsLayer
9});

SnapModify 모두 Source 객체를 주요 옵션으로 받는다. 각 기능은 해당 Source 데이터에서만 동작하게 된다.



3. Snap과 Modify 객체에 이벤트 붙이기 🔗

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

Snap 객체는 그냥 바로 Map 객체에 상시 할당해도 무방하다.

TYPESCRIPT

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

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

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




예제 확인하기 🔗

image

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