[OpenLayers] 마우스로 Vector 생성하기(그리기)

ol에서 마우스를 이용해 지도에 도형을 그리기 내용에 대한 정리이다. UI에 대한 DOM 구성은 아래와 같다.

위의 DOM에 대한 CSS는 아래와 같다.

이제 JavaScript 코드이다. 먼저 필요한 모듈을 import 한다.

배경지도로 OpenStreetMap을 사용하기 위해 아래의 TileLayer 타입의 raster 객체를 생성한다.

마우스를 이용해 도형을 그리면 해당 도형이 저장될 벡터 저장소가 필요하다. 이에 대한 저장소와 표현을 위한 레이어 객체를 생성한다.

위의 2개의 레이어를 구성하여 지도 객체를 생성한다.

id가 type인 DOM 요소를 얻어오고, 이 DOM 요소를 통해 사용자가 자신이 그릴 도형의 타입을 선택할때 발생하는 이벤트를 아래처럼 지정한다.

addInteraction 함수는 아래와 같은데, 그릴 도형을 선택하여 선택된 값으로 Draw 타입의 클래스의 객체를 생성해 지도에 Interaction으로써 추가해 준다.

실행하면 마우스를 통해 내가 원하는 도형을 선택해 그릴 수 있다.

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다