OpenLayers를 여행하는 개발자를 위한 안내서 - 21. WFS Transaction으로 데이터 수정하기
프로젝트
⏰ 2022-05-30 16:10:12
D O W N

D O W N
세 가지 WFS Transaction API 중, 데이터를 수정하는 Update에 대해 다뤄보자.
WFS Transaction 프로토콜을 활용하면, 공간정보 데이터를 DB가 아닌 웹/앱 등 API 호출이 가능한 다양한 환경에서 데이터를 수정할 수 있다.
본 문서에서의 처리 방식은 아래와 같다.
TXT
1
POST https://example.com/geoserver/wfs
XML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
<wfs:Transaction xmlns:wfs="http://www.opengis.net/wfs" xmlns:gml="http://www.opengis.net/gml" xmlns:ogc="http://www.opengis.net/ogc" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" service="WFS" version="1.0.0" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/WFS-transaction.xsd"> <wfs:Update typeName="layer_name"> <wfs:Property> <wfs:Name>column1</wfs:Name> <wfs:Value>value1</wfs:Value> </wfs:Property> <wfs:Property> <wfs:Name>column2</wfs:Name> <wfs:Value>value2</wfs:Value> </wfs:Property> <wfs:Property> <wfs:Name>geo_column</wfs:Name> <wfs:Value> <gml:Polygon srsName="EPSG:0000"> <gml:outerBoundaryIs> <gml:LinearRing> <gml:coordinates>x1,y1 x2,y2 x3,y3 x4,y4 x1,y1</gml:coordinates> </gml:LinearRing> </gml:outerBoundaryIs> </gml:Polygon> </wfs:Value> </wfs:Property> <ogc:Filter> <ogc:FeatureId fid="layer_name.32" /> </ogc:Filter> </wfs:Update> </wfs:Transaction>
이전까지의 API 호출은 모두 GET으로 이루어졌지만, WFS Transaction의 모든 요청은 POST로 이루어진다. 요청의 body에 위 XML 양식을 입력하여 추가할 데이터를 선언할 수 있다.
XML의 의미는 위와 같다. 직접 지도에 도형을 그린 후, 도형의 좌표값과 넣을 데이터를 입력하여 XML을 생성해야한다.
위 XML은 Polygon 데이터를 포함하며, 다른 형식의 데이터 XML이 궁금하다면 🔗 8장을 참조하자.
지도는 일반적인 WFS 지도를 활용한다. Draw 객체가 도형을 그리는 객체라면, Modify 객체는 이미 그려진 도형을 조작할 수 있는 기능이다.
쉽게 말해서, 그냥 도형의 모습을 바꿀 수 있다고 생각하면 된다.
Snap은 마우스 포인터가 객체에 쉽게 달라붙도록 유도하는 기능이다.
TYPESCRIPT
1 2 3 4 5 6 7 8 9 10
import Snap from 'ol/interaction/Snap'; import Modify from 'ol/interaction/Modify'; const snap = new Snap({ source: wfsLayer }); const modify = new Modify({ source: wfsLayer });
Snap과 Modify 모두 Source 객체를 주요 옵션으로 받는다. 각 기능은 해당 Source 데이터에서만 동작하게 된다.
map.addInteraction() 메서드로 기능을 활성화할 수 있다. 반대로 드로잉 기능을 비활성화하려면, map.removeInteraction()으로 Modify 객체를 제거해야한다.
Snap 객체는 그냥 바로 Map 객체에 상시 할당해도 무방하다.
TYPESCRIPT
1 2 3 4 5 6 7 8 9 10 11 12 13
document.onkeyup = (e) => { // ESC를 눌렀을 경우 if (e.key.toLowerCase() === 'escape') { map.removeInteraction(modify); } }; document.oncontextmenu = () => { map.removeInteraction(modify); };
각각 ESC 키를 눌렀을 때, 오른쪽 마우스 버튼을 눌렀을 때 Modify 기능을 해제한다.
이 문서에서는 Modify 기능이 끝날 경우 데이터 입력 폼을 출력한다. 입력이 완료되면 WFS Transaction API를 호출한다.
🔗 OpenLayers6 Sandbox - WFS Transaction Update에서 이를 구현한 예제를 확인할 수 있다.
🏷️ Related Tag