[OpenLayers] WMS 와 WFS

OpenLayers에서 WMS, WFS의 사용 목적

WMS와 WFS는 지리공간 데이터를 제공하고 공유하기 위한 표준 프로토콜이다. 각각의 역할과 작동 방식을 이해하고 개발을 해보자

 

1. WMS (Web Map Service)

• 지도 위에 이미지로 데이터 표시
  • JPEG, PNG, GIF 등의 이미지 형식으로 데이터를 반환하며, 지리공간 데이터를 렌더링하여 사용자에게 보여준다
  • 지도 타일을 제공하며, 배경 지도나 정적 데이터 시각화에 주로 사용
• 특징
  • 이미지 기반 : 데이터를 요청하면 서버에서 지도를 이미지로 생성하여 반환
  • 표준 요청 : GetMap, GetCapabilities, GetFeatureInfo 요청을 통해 작동
    • GetCapabilities : 사용 가능한 레이어와 설정 정보 조회
    • GetMap : 특정 영역의 지도 이미지 반환
    • GetFeatureInfo : 클릭한 위치의 속성 정보를 요청
• 장점
  • 이미지로 제공되므로 클라이언트에서 별도의 렌더링이 필요 없다
  • 데이터 보안이 비교적 용이하다(원본은 사용자에게 공개x)
• 단점
  • 사용자와의 상호작용이 제한적
  • 대규모 데이터를 처리하거나 수정하기에는 부적합

 

2. WFS (Web Feature Service)

• 벡터 데이터를 제공하는 서비스
  • 데이터 자체를 GeoJSON, GML 등의 벡터 형식으로 반환하며, 사용자 애플리케이션에서 데이터를 수정하거나 분석할 수 있다
• 특징
  • 데이터 기반 : 공간 객체(Features)와 속성 정보를 직접 반환
  • 표준 요청 : GetCapabilities, DescribeFeatureType, GetFeature 등을 사용
    • GetCapabilities: 서비스 기능과 데이터 제공 범위를 조회
    • DescribeFeatureType: 특정 데이터의 스키마(구조) 조회
    • GetFeature: 지정된 조건에 맞는 공간 데이터를 반환
• 장점
  • 사용자가 데이터를 분석하거나 커스터마이징할 수 있다
  • 상호작용이 가능한 애플리케이션 개발이 가능하다
  • 데이터를 실시간으로 업데이트하고, 사용자가 데이터를 수정할 수도 있다
• 단점
  • 서버와 클라이언트 모두에서 벡터 데이터를 처리해야 하므로 더 많은 리소스가 필요
  • 대규모 데이터를 처리할 때 속도 저하가 발생할 수 있다

특징	WMS	WFS
데이터 형식	이미지 (PNG, JPEG 등)	벡터 데이터 (GeoJSON, GML 등)
상호작용	제한적	가능 (데이터 편집 및 질의 지원)
사용 사례	배경 지도, 정적 지도 시각화	데이터 분석, 사용자 정의 기능 개발
성능	상대적으로 빠름	데이터량에 따라 느려질 수 있음

 

즉, WMS는 '보여주기', WFS는 '데이터 다루기' 에 특화되어 있어 목적에 맞게 사용한다.

 

WMS 사용 예시

// WMS 레이어 추가
const wmsLayer = new TileLayer({
  source: new TileWMS({
    url: 'https://example.com/geoserver/wms', // WMS 서버 URL
    params: {
      LAYERS: 'your-layer-name', // 원하는 레이어 이름
      TILED: true,
      FORMAT: 'image/png',
    },
    serverType: 'geoserver', // GeoServer 또는 사용 중인 서버 종류
  }),
});

const map = new Map({
  target: 'map', // HTML의 div ID
  layers: [
    new TileLayer({
      source: new TileWMS({
        url: 'https://example.com/geoserver/wms',
        params: { LAYERS: 'base-layer', TILED: true },
      }),
    }),
    wmsLayer, // WMS 레이어 추가
  ],
  view: new View({
    center: [0, 0], // 초기 중심점 (EPSG:3857 좌표계)
    zoom: 2, // 초기 줌 레벨
  }),
});

 

WFS 사용 예시

// WFS 데이터를 벡터 레이어로 로드
const wfsLayer = new VectorLayer({
  source: new VectorSource({
    format: new GeoJSON(),
    url: function (extent) {
      return (
        'https://example.com/geoserver/wfs?' + // WFS 서버 URL
        'service=WFS&' +
        'version=1.1.0&' +
        'request=GetFeature&' +
        'typename=your-layer-name&' + // 원하는 레이어 이름
        'outputFormat=application/json&' +
        'srsname=EPSG:3857&' + // 좌표계 설정
        'bbox=' + extent.join(',') + ',EPSG:3857'
      );
    },
    strategy: function () {
      // 요청 전략 설정 (기본값 사용)
      return [];
    },
  }),
  style: new Style({
    fill: new Fill({ color: 'rgba(0, 0, 255, 0.1)' }),
    stroke: new Stroke({ color: '#0000ff', width: 2 }),
  }),
});

const map = new Map({
  target: 'map', // HTML의 div ID
  layers: [wfsLayer], // WFS 레이어 추가
  view: new View({
    center: [0, 0], // 초기 중심점
    zoom: 2, // 초기 줌 레벨
  }),
});

 

 

• WMS는 TileLayer와 TileWMS를 사용하여 이미지를 가져온다
• WFS는 VectorLayer와 VectorSource를 사용해 벡터 데이터를 가져오고, 데이터를 렌더링하기 위해 GeoJSON 형식 변환이 필요하다