WMS

---

이 장에선 WFS를 통해 지도에 이미지를 표시하는 방법에 대해 다룬다.

이전 장의 WFS는 공간정보 데이터를 GeoJSON으로 받아 직접 객체로 표시하지만, WMS는 객체를 GeoServer에서 이미지로 렌더링한 이미지를 받아 표시한다.

즉, GeoServer로 부터 직접 Tile Map을 받아 표현한다고 생각하면 된다.

WMS를 활용하여 지도에 표시하기

---

WMS를 표시하기 위해, 총 4개 객체가 필요하다. WMS는 이미지를 받아 표시하므로, 이 이미지를 담을 ImageWMS, 이를 활용하여 지도에 렌더링하는 ImageLayer. 나머지 View와 Map 객체가 필요하다

이 4가지 요소를 구현하는 방법을 차례로 설명하여, 최종적으로 WMS를 활용한 지도를 만든다.

1. GetImage URL 구성하기

---

GeoServer를 통해 데이터를 구축했던 데이터를 통해 WMS 이미지를 호출한다.

WMS 중에서도, 속성정보를 제공하는 GetImage를 사용한다. GetImage의 요청방법은 아래와 같다.

TXT
1
GET https://example.com/geoserver/wms?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&FORMAT=image%2Fpng&TRANSPARENT=true&layers=test:building&exceptions=application%2Fjson&WIDTH=256&HEIGHT=256&CRS=EPSG%3A3857&STYLES=&BBOX=14168061.814827133%2C4367306.048101831%2C14168367.562940273%2C4367611.796214972

하지만 WMS의 URL, WFS에 비해 요구하는 파라미터의 갯수가 많아 다소 복잡하다. WFS에선, VectorSource에 직접 URL을 입력했지만, WMS의 소스 객체인 ImageWMS의 경우 몇 가지 필요한 값을 입력하면 알아서 URL을 만들어 호출해준다.

그냥 WMS는 이런 방식으로 직접 호출한다고만 알고 넘어가자.

2. ImageWMS 생성하기

---

OpenLayers의 ImageWMS 객체는 주어진 값을 통해 WMS URL을 생성해 호출한다.

TYPESCRIPT
1
2
3
4
5
6
7
8
9
10
import { ImageWMS } from 'ol/source';

const source = new ImageWMS({
	url: 'https://example.com/geoserver/wms',
	params: {
		layers: 'test:building',
		exceptions: 'application/json'
	},
	serverType: 'geoserver'
});

ImageWMS에 대한 전체 정보는 🔗 공식 문서에서 확인할 수 있다.

설정의 세부 내용은 아래와 같다.

url, params.layers는 반드시 입력해야 정상적인 WMS 호출을 수행할 수 있다. 위 두 값만 입력하면, WMS에 필요한 나머지 파라미터는 ImageWMS에서 알아서 계산해 넣어준다.

3. TileLayer 생성하기

---

OpenLayers의 TileLayer 객체는 ImageWMS로 호출한 이미지를 통해 지도를 렌더링한다. 이 지도는 배경지도와 같은 이미지로 이루어져있다.

TYPESCRIPT
1
2
3
4
5
6
7
8
import ImageLayer from 'ol/layer/Image';

const layer = new TileLayer({
	source: source,
	minZoom: 15,
	properties: { name: 'wms' },
	zIndex: 5
});

ImageLayer에 대한 전체 정보는 🔗 ol/layer/Image-ImageLayer에서 확인할 수 있다.

4. View 만들기

---

지도의 뷰잉 정보를 선언할 View 객체를 생성한다.

TYPESCRIPT
1
2
3
4
5
6
7
8
import View from 'ol/View';
import proj4 from 'proj4';

const view = new View({
	projection: 'EPSG:3857',
	center: proj4('EPSG:4326', 'EPSG:3857', [ 127.28923267492068, 36.48024986578043 ]),
	zoom: 17
});

5. Style 정의하기

---

WMS 역시 이미지에 그려지는 요소를 스타일링할 수 있다.

WFS는 스타일 객체를 코드 내부에서 기술할 수 있었지만, WMS는 기본적으로 GeoServer와 같은 백엔드 영역에서 이루어지므로, 해당 서버에서 직접 스타일을 기술해준다.

보통 XML 형태로 기술하며, 이를 SLD라 부른다.

GeoServer의 경우, [스타일] 메뉴에서 관리할 수 있다. 별다른 조작을 하지 않았다면, 즉시 사용 가능한 몇 가지 SLD가 기본으로 탑재된다.

레이어 추가 시 [발행] 단계에서 스타일 설정을 할 수 있는데, 이 때 설정하는 것이 WMS에 사용할 SLD다.

여러개를 등록할 수도 있으며, 이 경우 STYLES에 명시된 이름으로 원하는 스타일을 호출할 수 있다. STYLES의 기본값은 ''로 비어있으며, 이 경우 지정된 기본 스타일을 사용하여 이미지를 렌더링한다.

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<?xml version="1.0" encoding="UTF-8"?>
<StyledLayerDescriptor version="1.0.0" 
 xsi:schemaLocation="http://www.opengis.net/sld StyledLayerDescriptor.xsd" 
 xmlns="http://www.opengis.net/sld" 
 xmlns:ogc="http://www.opengis.net/ogc" 
 xmlns:xlink="http://www.w3.org/1999/xlink" 
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <!-- a Named Layer is the basic building block of an SLD document -->
  <NamedLayer>
    <Name>default_polygon</Name>
    <UserStyle>
    <!-- Styles can have names, titles and abstracts -->
      <Title>Default Polygon</Title>
      <Abstract>A sample style that draws a polygon</Abstract>
      <!-- FeatureTypeStyles describe how to render different features -->
      <!-- A FeatureTypeStyle for rendering polygons -->
      <FeatureTypeStyle>
        <Rule>
          <Name>rule1</Name>
          <Title>Gray Polygon with Black Outline</Title>
          <Abstract>A polygon with a gray fill and a 1 pixel black outline</Abstract>
          <PolygonSymbolizer>
            <Fill>
              <CssParameter name="fill">#ED143D</CssParameter>
              <CssParameter name="opacity">0.6</CssParameter>
            </Fill>
            <Stroke>
              <CssParameter name="stroke">#ED143d</CssParameter>
              <CssParameter name="stroke-width">2</CssParameter>
            </Stroke>
          </PolygonSymbolizer>
          <TextSymbolizer>
            	  <Geometry>
	    <ogc:Function name="centroid">
	      <ogc:PropertyName>SHAPE</ogc:PropertyName>
	    </ogc:Function>
	  </Geometry>
            <Label>
              <ogc:PropertyName>buld_nm</ogc:PropertyName>
            </Label>
            <Font>
              <CssParameter name="font-family">sans-serif</CssParameter>
              <CssParameter name="font-size">16</CssParameter>
            </Font>
            <LabelPlacement>
              <PointPlacement>
                <AnchorPoint>
                  <AnchorPointX>0.5</AnchorPointX>
                  <AnchorPointY>0.5</AnchorPointY>
                </AnchorPoint>
                <Displacement>
                  <DisplacementX>0</DisplacementX>
                  <DisplacementY>0</DisplacementY>
                </Displacement>
              </PointPlacement>
            </LabelPlacement>
            <Halo>
              <Radius>
                <ogc:Literal>2</ogc:Literal>
              </Radius>
              <Fill>
                <CssParameter name="fill">#000000</CssParameter>
              </Fill>
            </Halo>
            <Fill>
              <CssParameter name="fill">#FFFFFF</CssParameter>
            </Fill>
          </TextSymbolizer>
        </Rule>
      </FeatureTypeStyle>
    </UserStyle>
  </NamedLayer>
</StyledLayerDescriptor>

위 SLD는 실제로 프로젝트의 WMS 요청에서 사용하는 SLD다. WFS에서 스타일 기술에 대한 문단을 읽어봤다면 이해가 더욱 쉬울 것이다. XML의 특성 상 복잡해보이지만, 잘 뜯어보면 별거 없다.

마찬가지로 Point와 Polygon 등, 데이터 형식에 따라 기술되는 형태가 조금씩 다르다.

굳이 GeoServer에 SLD를 기술하지 않아도 원하는 디자인을 사용할 수 있는 방법이 있는데, WMS의 요청 파라미터 중 sld_body를 활용하면 가능하다.

sld_body에 SLD를 직접 입력하면, 해당 SLD를 우선으로 적용한다. 파라미터의 내용은 SLD 그대로를 입력한다.

6. Map 만들기

---

모든 정보를 종합하여 지도를 만드는 Map 객체를 생성한다.

TYPESCRIPT
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
import Map from 'ol/Map';
import { ImageWMS } from 'ol/source';
import ImageLayer from 'ol/layer/Image';
import View from 'ol/View';
import proj4 from 'proj4';

// WMS 소스 객체
const source = new ImageWMS({
	url: 'https://example.com/geoserver/wms',
	params: {
		layers: 'test:building',
		exceptions: 'application/json'
	},
	serverType: 'geoserver'
});

// WMS 레이어 객체
const layer = new ImageLayer({
	source: source,
	minZoom: 15,
	properties: { name: 'wms' },
	zIndex: 5
});

// 뷰 객체
const view = new View({
	projection: 'EPSG:3857',
	center: proj4('EPSG:4326', 'EPSG:3857', [ 127.28923267492068, 36.48024986578043 ]),
	zoom: 17
});

// 맵 객체
const map = new Map({
	layers: [ vworldBaseLayer, vworldHybridLayer, wfsLayer ],
	target: 'map',
	view: view
});

Map 객체에 지금까지 선언한 객체들을 할당한다. target에 지정된 DOM에 선언된 지도가 표시된다.

target: map은 아이디가 map인 DOM에 지도를 표시한다는 뜻이다. 꼭 아이디가 아니더라도 HTMLElement를 할당할 수도 있다.

WMS로 호출한 이미지가 지도에 표시되는 것을 확인할 수 있다.

6-1. WMS 호출 방식

---

OpenLayers에서 제공하는 WMS 호출 방식에는 두 가지가 존재한다. 현재 영역의 전체 이미지를 불러오는 Image 방식과, 여러 격자로 쪼개서 불러오는 Tile 방식이 있다.

이 장에서는 현재 영역의 전체 이미지를 호출하는 Image 방식을 기술했다.

만약, 타일 형태로 WMS를 호출하고 싶다면, TileWMS와 TileLayer를 사용하면 된다. 사용법은 동일하다. 이 장에서 설명한 코드를 기준으로 ImageWMS를 TileWMS로 바꾸기만 해도 이상이 없는 수준. TileLayer도 마찬가지.

두 방식의 차이를 도식화하면 위 그림과 같다. 배경지도 또한 TileWMS 방식을 사용한다.

• Image 방식

  • WMS 호출이 한 번만 가므로, 요청 수를 줄일 수 있다.
  • 응답 하나의 용량이 상대적으로 크며, 속도가 느리다.

• Tile 방식

  • Image 방식 대비 WMS 호출 요청이 훨씬 많아진다.
  • 작은 이미지를 여러개 호출하므로, 상대적으로 속도가 빠르다.

차이를 확인하고, 자신의 서비스에 더 적합한 방식을 채택하면 된다.

배경 지도 또한 일종의 TileWMS와 같다.

예제 확인하기

---

🔗 OpenLayers6 Sandbox - WMS에서 이를 구현한 예제를 확인할 수 있다.

GeoServer를 통해 공간정보 데이터를 호출하여, OpenLayers가 지도에 렌더링하는 걸 확인할 수 있다.