OpenLayers를 여행하는 개발자를 위한 안내서 - 20. WFS Transaction으로 데이터 추가하기
프로젝트
⏰ 2022-05-29 15:55:46
D O W N
D O W N
지금까지는 GeoServer를 통해 데이터를 호출하고, 이를 표현하는 것이 전부였다. 객체로 표현을 하던, 이미지로 그리던, 데이터를 직접 표현해주던, 결국 어떠한 형태로든 데이터를 보여주는 수준에 그쳤다.
이 문서를 포함하여, 앞으로 서술할 3개 문서는 공간정보 데이터의 삽입/수정/삭제에 대해 다룬다. WFS Transaction 프로토콜을 활용하면 정해진 패턴으로 데이터의 CUD를 수행할 수 있다.
이 중 이 문서에서는 WFS Transaction Insert. 즉, 공간정보 데이터의 추가에 대해 다룬다.
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
<wfs:Transaction xmlns:wfs="http://www.opengis.net/wfs" xmlns:gml="http://www.opengis.net/gml" 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:Insert> <layer_name> <column1>value1</column1> <column2>value2</column2> <column3>value3</column3> <geo_column> <gml:Polygon srsName="EPSG:4326"> <gml:outerBoundaryIs> <gml:LinearRing> <gml:coordinates>x1,y1 x2,y2 x3,y3 x4,y4 x1,y1</gml:coordinates> </gml:LinearRing> </gml:outerBoundaryIs> </gml:Polygon> </geo_column> </layer_name> </wfs:Insert> </wfs:Transaction>
이전까지의 API 호출은 모두 GET으로 이루어졌지만, WFS Transaction의 모든 요청은 POST로 이루어진다. 요청의 body에 위 XML 양식을 입력하여 추가할 데이터를 선언할 수 있다.
XML의 의미는 위와 같다. 직접 지도에 도형을 그린 후, 도형의 좌표값과 넣을 데이터를 입력하여 XML을 생성해야한다.
위 XML은 Polygon 데이터를 포함하며, 다른 형식의 데이터 XML이 궁금하다면 🔗 8장을 참조하자.
지도는 일반적인 WFS 지도를 활용한다. 지도 위에 Polygon을 그리기 위해 Draw 객체를 추가해보자.
TYPESCRIPT
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
import { Map } from 'ol'; import Draw from 'ol/interaction/Draw'; import VectorLayer from 'ol/layer/Vector'; import VectorSource from 'ol/source/Vector'; const drawSource = new VectorSource(); const drawLayer = new VectorLayer({ source: drawSource, properties: { name: 'draw' } }); const drawInteraction = new Draw({ source: drawLayer.getSource(), type: 'Polygon' }); new Map({ ... layers: [ ..., drawLayer ] });
map.addInteraction() 메서드로 기능을 활성화할 수 있다. 반대로 드로잉 기능을 비활성화하려면, map.removeInteraction()으로 Draw 객체를 제거해야한다.
즉, Draw를 Map에 추가해놓고 제거하지 않으면, 드로잉 기능이 계속 활성화되어 있어서 지도를 제대로 조작할 수 없는 현상이 발생한다. 따라서 드로잉 후 적절한 시점에 Draw 객체를 Map에서 제거해줘야한다.
혹은 Draw 객체의 setActive() 메서드를 통해서 조작할 수도 있다. boolean을 파라미터로 주어 동작 여부를 지정한다.
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(drawInteraction); } }; document.oncontextmenu = () => { map.removeInteraction(drawInteraction); };
각각 ESC 키를 눌렀을 때, 오른쪽 마우스 버튼을 눌렀을 때 Draw 기능을 해제한다.
Draw 객체 또한 이벤트를 지원한다.
TYPESCRIPT
1 2 3 4 5 6 7 8
// 드로잉 시작 이벤트 drawInteraction.on('drawstart', () => {}); // 드로잉 종료 이벤트 drawInteraction.on('drawend', () => {}); // 드로잉 취소 이벤트 drawInteraction.on('drawabort', () => {});
이 문서에서는 드로잉이 끝날 경우 데이터 입력 폼을 출력한다. 입력이 완료되면 WFS Transaction API를 호출한다.
🔗 OpenLayers6 Sandbox - WFS Transaction Insert에서 이를 구현한 예제를 확인할 수 있다.
🏷️ Related Tag