[OpenLayers3] 지도 위에 DOM 요소를 올려놓기(Overlay)

ol3에서 DIV 등과 같은 DOM 요소를 지도 상에 올려 놓는 내용을 설명합니다. 일단 지도 위에 올려 놨다는 것은 지도의 뷰가 변경되면, 변경된 지도에 따라 올려 놓은 DOM 요소도 함께 이동되어야 한다는 것인데요. 구현하고자 하는 내용에 대한 화면은 아래와 같습니다.

위의 지도를 보면 지도 상에 이미지와 문자열이 보입니다. 이미지는 DIV 요소 안에 IMG 요소로 표현했고, 문자열은 A 요소로 표현했습니다. A 요소로 표현했으니 문자열을 클릭하면 A 요소의 href 속성에 지정된 URL에 대한 페이지가 뜹니다.

위의 지도 기능을 위해 필요한 외부 css와 js 파일을 아래처럼 페이지에 추가합니다.

다음은 화면을 구성하는 UI 요소에 대한 코드입니다.



    
        내가 널 지켜보고 있다냥

id가 map인 DIV에 지도가 표시될 것입니다. 또한 id가 txtlink인 A 요소와 id가 marker인 DIV 요소는 ol3의 Overlay로써 지도와 함께 원하는 지점에 표시되도록 할 것입니다. 아래는 UI 요소에 대한 스타일입니다.

이제 스크립트 코드를 작성할 것인데요. 먼저 jQuery의 ready 이벤트를 아래처럼 미리 준비해 둡니다.

위의 ….에 스크립트를 추가해 나가겠습니다. 먼저 지도에 오픈스트리트맵을 배경지도로 구성하기 위해 타일 레이어 객체를 준비합니다.

var layer = new ol.layer.Tile({
    source: new ol.source.OSM()
});

그리고 id가 map인 DIV 요소에 지도를 표시하기 위해 지도 객체를 아래처럼 추가하는데요. 이때 앞서 만들어 둔 레이어 객체를 지정합니다.

var map = new ol.Map({
    layers: [layer],
    target: 'map',
    view: new ol.View({
        center: [0, 0],
        zoom: 2
    })
});

앞서 id가 txtlink와 marker인 두 요소를 지도 상에 원하는 위치에 Overlay 한다고 하였습니다. 그 원하는 위치를 아래처럼 pos라는 변수에 담아 둡니다.

var pos = ol.proj.fromLonLat([16.3725, 48.208889]);

먼저 id가 marker인 DIV 요소에 대한 Overlay를 위한 코드입니다.

var marker = new ol.Overlay({
    position: pos,
    positioning: 'center-center',
    element: document.getElementById('marker'),
    stopEvent: false
});

map.addOverlay(marker);

Overlay 생성을 위해서 먼저 위의 코드의 1번에서처럼 ol.Overlay 클래스 타입을 생성합니다. 생성시에 Overlay될 위치와 이 위치를 기준으로 어떻게 자리를 잡을지를 위한 positioning 옵션을 지정하고, Overlay 대상이 되는 요소를 element 옵션에 지정합니다. stopEvent 옵션을 false로 지정함으로써 다른 요소와 중첩될때 그 요소의 이벤트가 발생하도록 허용 합니다. 이처럼 Overlay 객체를 생성했으면 8번 코드처럼 map 객체의 addOverlay 함수를 호출하여 Overlay 요소를 추가하면, 지도와 함께 항상 지정된 위치에 표시됩니다. 다음은 id가 txtlink인 요소에 대한 Overlay 생성 및 지도에 추가하는 코드입니다.

var txtlink = new ol.Overlay({
    position: pos,
    positioning: 'center-center',
    element: document.getElementById('txtlink')
});

map.addOverlay(txtlink);

이제 실행해 보면, 처음 살펴봤던 Overlay 지도 기능을 볼 수 있습니다. 아래의 링크는 지금까지 작성한 전체 코드에 대한 다운로드입니다.

답글 남기기 응답 취소