GeoServer WFS 서비스 테스트 및 Vue3와 OpenLayers를 통한 공간 데이터 저장

환경 구성 정보

사용된 주요 기술 스택 버전:

  • 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 트랜잭션 처리 로직
}

태그: GeoServer WFS OpenLayers vue3 PostGIS

7월 10일 21:37에 게시됨