[OpenLayers] 지도 상에 마우스로 사각 영역 그리기

지도 상에 마우스로 사각영역을 그리는 행위는 그려진 사각영역에 포함되는 항목을 선택하거나, 사각영역으로 지도를 확대하는 등에 대해 활용될 수 있다. ol에서는 이러한 사용자의 마우스나 키보드에 대한 행위를 Interaction이라는 개념을 통해 제공한다. 또한 마우스로 사각영역을 그리는 특정한 인터렉션에 대해서도 이미 ExtentInteraction 클래스를 만들어 제공함으로 이를 이용해 ol에서 쉽게 사각영역을 그릴 수 있다.

이 글은 ol에서 마우스로 사각영역을 그리는 행위에 대한 API를 간단히 설명한다. 먼저 html 요소는 다음과 같다.

index.js에 대한 코드에서 map에 대한 다양한 스크립트 코드가 존재하는데, 하나씩 살펴보자.

먼저 필요한 모듈을 import 하는 코드과 지도 객체를 생성하는 코드이다.

그리고 마우스를 이용해 사각영역을 그리는 인터렉션인 ExtentInteraction과 관련된 코드이다.

ExtentInteraction 객체를 생성한 후 바로 setActive(false)를 호출하여 마우스를 통한 사각영역을 그리는 행위가 작동하지 않도록 하고 있다. 키보드의 Ctrl 키를 누르고 있을 경우에 사각영역을 그리도록 6~15번 코드에서 window의 keydown과 keyup 이벤트를 처리하고 있는 것을 볼 수 있다. 참고로 Ctrl은 keyCode 값이 17이다.

그려진 사각영역에 대한 MBR 값은 extent.getExtent() 과 같은 형태로 얻을 수 있다는 것도 알아둘만 하다.

[OpenLayers] 사용자 정의 Interaction

ol에서 마우스나 키보드 등을 통한 사용자의 행위에 대한 처리를 위한 Interaction를 정의하는 내용에 대한 정리이다. 이 글은 [OpenLayers] 직접 좌표를 지정하여 구성하는 벡터 레이어에서 작성된 코드를 기반으로 작성되었으므로, 실제 실행하기 위해서는 해당 글에 대한 코드를 먼저 작성한 후 이 글의 코드를 반영하기 바란다.

사용자의 조작에 대한 Interaction을 정의하기 위한 예로써 사용자가 지도에 표시된 Feature를 마우스로 드레그하여 이동하는 경우에 대한 코드를 작성한다.

먼저 아래처럼 필요한 모듈을 하나 추가한다.

PointInteraction 클래스를 상속받도록 하여, Drag라는 클래스로 하여 아래처럼 생성한다.

14~17번 코드에서 정의된 private 변수는 사용자가 마우스로 Feature를 이동할때 필요한 변수들이다. Interaction은 사용자가 마우스나 키보드 등과 같은 입력 장치을 통한 상호작용으로 6번 코드의 생성자에서 4개의 마우스 이벤트에 대한 호출 함수를 지정하고 있다. 4개의 마우스 이벤트는 각각 버튼 Down 이벤트, Drag 이벤트, Move 이벤트, 버튼 Up 이벤트이다. 이들 호출 함수는 아래와 같으며
14~17번 코드에서 정의된 private 변수들에 대해 처리하고 있는 것을 볼 수 있다.

지도에 대해 위에서 정의한 Interaction을 반영하기 위해 지도를 생성 코드에서 아래처럼 반영한다.

실행하여 Feature를 마우스로 드레그 하면 이동되는 것을 확인할 수 있다.