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

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

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



    
        
        OpenLayers

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

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

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import ExtentInteraction from 'ol/interaction/Extent.js';
import {Tile as TileLayer} from 'ol/layer.js';
import {OSM} from 'ol/source.js';

var map = new Map({
    layers: [
        new TileLayer({
        source: new OSM()
        })
    ],
    target: 'map',
    view: new View({
        center: [0, 0],
        zoom: 2
    })
});

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

var extent = new ExtentInteraction();

map.addInteraction(extent);
extent.setActive(false);

window.addEventListener('keydown', function(event) {
    if (event.keyCode == 17) {
        extent.setActive(true);
    }
});

window.addEventListener('keyup', function(event) {
    if (event.keyCode == 17) {
        extent.setActive(false);
    }
});

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

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

답글 남기기 응답 취소