환경 구성 정보
사용된 주요 기술 스택 버전:
- GeoServer: 2.20.4
- PostGIS: 3.2.0 (PostgreSQL 13.5 기반)
- OpenLayers: 9.1.0
WFS 트랜잭션 XML 예시
PostGIS 필드명 일치가 중요(예: 'geom'):
<wfs:Transaction service="WFS" version="1.0.0"
xmlns:wfs="http://www.opengis.net/wfs"
xmlns:gml="http://www.opengis.net/gml"
xmlns:spatial="spatial"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/WFS-transaction.xsd
spatial http://192.168.9.158:9092/geoserver/spatial_data/wfs/DescribeFeatureType?typename=spatial:region">
<wfs:Insert>
<spatial:region>
<spatial:geom>
<gml:MultiPolygon srsName="EPSG:4326">
<gml:polygonMember>
<gml:Polygon>
<gml:outerBoundaryIs>
<gml:LinearRing>
<gml:coordinates decimal="." cs="," ts=" ">
117.241,32.979 118.048,33.008
118.053,32.633 117.258,32.639
117.241,32.979
</gml:coordinates>
</gml:LinearRing>
</gml:outerBoundaryIs>
</gml:Polygon>
</gml:polygonMember>
</gml:MultiPolygon>
</spatial:geom>
<spatial:category>urban</spatial:category>
</spatial:region>
</wfs:Insert>
</wfs:Transaction>
네임스페이스 오류 시 발생 문제: 'Feature type not available' 또는 XML 파싱 에러
OpenLayers에서 WFS 전송 구현
// 공간 피처 생성
const spatialFeature = new Feature();
spatialFeature.setGeometryName('geom');
spatialFeature.setGeometry(new MultiPolygon([[
[ [117.241, 32.979], [118.048, 33.008],
[118.053, 32.633], [117.258, 32.639],
[117.241, 32.979] ]
]]));
spatialFeature.set('feature_id', 'feat-001');
// WFS 트랜잭션 생성
const wfsPayload = new WFS().writeTransaction(
[spatialFeature], null, null, {
featureNS: "spatial",
featureType: 'region',
srsName: "EPSG:4326"
});
// XML 직렬화 및 전송
const xmlData = new XMLSerializer().serializeToString(wfsPayload);
fetch('http://192.168.9.158:9092/geoserver/spatial_data/wfs', {
method: 'POST',
headers: {'Content-Type': 'text/xml'},
body: xmlData
})
.then(response => response.text())
.then(data => console.log('서버 응답:', data))
.catch(error => console.error('전송 실패:', error));
WFS 버전별 좌표 처리
버전 차이 해결 방법:
// 좌표 포맷 변환
let adjustedXML = xmlData.replace(
/<posList[^>]*>([^<]*)<\/posList>/g,
(match, coordData) => {
const coords = coordData.trim().split(/\s+/);
return `<coordinates decimal="." cs="," ts=" ">${coords.join(',')}</coordinates>`;
}
);
그리기 툴 통합 예제
function initDrawTool() {
const drawTool = new Draw({
source: vectorSource,
type: 'MultiPolygon',
style: new Style({ /* 스타일 설정 */ })
});
drawTool.on('drawend', event => {
const drawnFeature = event.feature;
drawnFeature.setGeometryName('geom');
saveFeatureToWFS(drawnFeature);
});
map.addInteraction(drawTool);
}
function saveFeatureToWFS(feature) {
// WFS 트랜잭션 처리 로직
}