[OpenLayers3] 지도 상에 팝업 정보창 표시

ol3에서 지도 상의 특정한 좌표 지점에 팝업창을 표시하여 해당 지점과 관련된 정보를 표시하는 기능에 대한 API를 살펴 보겠습니다. 먼저 아래의 웹 페이지에 표시된 지도를 클릭하면 클릭된 지점에 대한 경위도 좌표계를 도분초로 표시하는데요. 한번 확인해 보시기 바랍니다.

위의 지도 상의 팝업에 대한 기능을 구현하는 코드를 하나 하나 살펴 보겠습니다. 먼저 필요한 외부 CSS와 스크립트를 아래처럼 추가합니다.

다음은 필요한 UI에 대한 태그인데요. ol3에서는 팝업창에 대한 구체적인 UI에 대해 ol3 엔진단에서 제공하는 것이 아니고 개발자가 직접 제공해야 합니다. 팝업창을 구성하는 닫기 버튼이라든지, 실제 내용이 표시되는 div 영역이라든지 말입니다. 아래는 UI에 대한 태그입니다.

id가 map인 div에 지도가 표시됩니다. 그리고 id가 popup인 div가 실제 팝업창인데요. 이 div 내부에는 다시 id가 popup-closer이라는 a 태그가 있고, id가 popup-content인 div가 있습니다. popup-closer인 a 태그는 팝업을 닫는 버튼으로 사용되고, popup-content인 div는 팝업의 내용을 채울 컨테이너로 사용됩니다. 이제 각 UI에 대한 지정된 스타일에 대한 코드를 살펴 봅시다.

스타일 코드가 상당히 깁니다. 이는 ol3가 팝업에 대한 UI를 기본적으로 제공해주지 않아, 개발자가 직접 팝업에 대한 UI 및 그 위치와 색상 등에 대한 스타일을 직접 지정해야 하기 때문인데요. 먼저 2번 코드의 .my-ol-popup에 대한 스타일은 팝업창에 대한 스타일로 배경색은 white로, 가장자리를 둥글게하고 외곽선을 획색의 1px로 지정하고 최소 가로 크기를 280px 등으로 지정하고 있는데요, 중요한 것은 position 속성을 absolute로 지정함으로써 지도 상의 원하는 위치를 절대 좌표로 지정할 수 있도록 하였습니다. 그리고 13번과 30번의 스타일 코드는 팝업창의 하단에 뾰족한 꼬리(?)를 표시하기 위한 스타일 코드입니다. 아래처럼 말입니다.

그리고 37번 코드의 스타일 지정은 닫기 버튼에 대한 a 태그의 위치를 지정하고 있구요. 44번은 이 닫기 버튼에 대한 컨텐트를 ✖ 문자로 지정합니다.

자! 이제 이 스타일이 멋지게 적용된 UI에 영혼을 불어 넣을 스크립트 코드를 살펴 보겠는데요, jQuery의 ready 이벤트 코드를 아래처럼 먼저 준비해 둡니다.

위의 jQuery의 ready 이벤트는 모든 UI와 스타일의 준비가 완료되었을 때 호출되는 참으로 편리한 이벤트인데요. 아래의 모든 스크립트는 위의 ….에 해당하는 부분에 추가됩니다. 먼저 개발 편의를 위해 필요한 모든 UI 객체를 id 값을 통해 변수에 할당해 둡니다.

다음으로 팝업창 표시하고 지도를 이동하면 이 팝업창도 함께 이동할 수 있도록 해주는 ol.Overlay를 생성하는데요. 닫기 버튼(closer 변수)과 팝업의 내용이 담길 div 요소(content 변수)를 포함하고 있는 팝업창을 위한 DOM 요소(container 변수)를 지정하면서 생성합니다.

다음은 닫기 버튼에 대한 클릭 이벤트를 지정합니다.

위의 코드를 보면, 팝업창을 닫는 코드는 2번과 3번 코드 모두가 필요합니다. 그리고 4번의 코드는 a 태그를 클릭하면 href 속성에 지정된 url로 이동하는 기본 행위를 발생하지 않도록 합니다.

다음은 지도를 구성할 것인데요. 코드를 먼저 살펴 보겠습니다.

ol.Map 타입의 생성을 통해 지도 객체를 생성합니다. 레이어 구성을 위해 layers 속성에 필요한 레이어 객체를 배열로 지정하고 지도가 표시될 div에 대한 id를 target 속성에 지정하고 있습니다. 그리고 view 속성에는 처음 지도가 표시될 위치와 축척 레벨 값을 지정하고 있습니다. 팝업창과 관련된 중요한 부분은 10번 코드인 overlays 속성인데요. 앞서 생성한 overlay 변수를 배열의 한 요소로 지정하고 있습니다. 지도 구성 끝!

이제 다음은 지도를 클릭했을 때, 클릭된 지점에 대한 좌표를 팝업창의 컨텐츠로 표시해야 하는데요. 해당 코드는 아래와 같습니다.

클릭된 지점은 이벤트 발생시 전달되는 객체의 coordinate 속성을 통해 얻을 수 있습니다. 현재 배경지도가 EPSG:3857 좌표계인데요. 이를 WGS84 타원체의 경위도 좌표계인 EPSG:4326으로 변경하고 경위도 좌표계를 도분초 단위로 변경하는 코드는 4번입니다. 이렇게 얻은 도분초 좌표 값을 6번 코드에서 컨테이너로 지정하고 있습니다. 7번은 클릭한 좌표에 팝업창을 표시하도록 위치를 지정하고 있는 코드입니다.

아래는 위에서 설명한 전체 코드에 대한 다운로드입니다.

댓글 남기기

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