이미지와 객체의 차이점은 만질 수 있다는 것

---

WFS와 WMS의 가장 큰 특징은 데이터의 결과물이다. WFS는 GeoJSON으로 공간정보 요소를 반환해주는 반면, WMS는 공간정보 요소를 토대로 직접 지도를 렌더링하여 제공해준다.

OpenLayers는 WFS의 데이터를 토대로 canvas에 객체를 렌더링한다. 공간정보를 토대로 일종의 도형을 그린다고 생각하면 쉽다.

이미지와 다르게 웹 상에서 직접 그려지는 객체이므로, 웹은 이를 인식하거나 조작할 수 있다는 큰 장점이 있다.

이 문서에서는 일전에 구현한 WFS 지도에서 상호작용을 추가해본다.

상호작용 추가하기

---

🔗 15장에서 다룬 WFS 지도를 그대로 사용한다. Select 객체를 통해 각 상호작용 별 스타일을 추가할 수 있다.

객체의 마우스 호버, 클릭 등의 상태에 따라 원하는 스타일을 부여하여 객체와의 상호작용을 시각적으로 표현할 수 있다.

1. Select 객체 구성하기

---

상호작용 디자인을 표현할 땐 Select 객체를 사용하면 쉽게 구현할 수 있다.

hover, click 등의 상태를 condition이라 부른다. 기본적인 사용법은 아래와 같다.

TYPESCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
import { Select } from 'ol/interaction';
import { click, pointerMove } from 'ol/events/condition';

const hoverSelect = new Select({
	condition: pointerMove,
	style: feature => { ... }
});

const clickSelect = new Select({
	condition: click,
	style: feature => { ... }
});

🔗 ol/events/condition-Condition에 이미 기본적인 상호작용이 선언되어 있으므로, 필요한 상호작용을 가져다 할당만 해주면 된다.

style을 통해, 지정된 상호작용 발생 시 원하는 디자인을 보여줄 수 있다.

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

2. Map에 적용하기

---

생성한 Select를 Map에 적용시켜본다.

TYPESCRIPT
1
2
3
4
5
6
7
8
import { Map } from 'ol';
import { defaults } from 'ol/interaction';

const map = new Map({
	// ...
	interactions: defaults().extend([ clickSelect, hoverSelect ])
	// ...
});

위와 같이 적용이 가능하다. default() 메서드는 기본 상호작용 객체다. extend 메서드를 활용하여 기존 상호작용에 새로운 상호작용을 확장하는 방식이다.

이런 확장 없이 상호작용을 그냥 할당하게 되면 다른 상호작용이 먹히지 않는다. 여기엔 지도 이동과 확대 같은 기본적인 상호작용도 포함된다!

TYPESCRIPT
1
2
3
4
5
6
7
8
// 상호작용 추가
map.addInteraction();

// 상호작용 리스트 반환
map.getInteractions();

// 상호작용 제거
map.removeInteraction();

관련 메서드는 위와 같다. 생성된 Map 객체에서 호출 가능하다. map.addInteraction()을 활용할 경우, 상호작용을 추가하는 동작이므로 위에서 언급한 defaults().extend()를 사용하지 않아도 된다.

예제 확인하기

---

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