[OpenLayers3] 커서 위치에 대한 지도 좌표 얻기

OpenLayers에서 특정 지점에 대한 지도 좌표를 얻을 수 있는 방법에 대해 정리해 봅니다. 2가지 방법으로 접근해 볼텐데요. 첫번째는 OpenLayers에서 기본적으로 제공하는 MousePosition이라는 컨트롤을 사용해 지도 상에 마우스 위치에 대한 지도 좌표를 항상 표시하는 것이고.. 두번째는 지도 상에서 마우스를 클릭하면 클릭한 지점에 대한 지도 좌표를 alert 창을 통해 표시하는 것입니다. 아래의 페이지는 위의 두가지에 대한 기능을 모두 담고 있습니다.

위의 페이지에 대한 구현을 위한 코드를 하나 하나 살펴보겠습니다. 먼저 필요한 CSS와 OpenLayers 및 jQuery 라이브러리를 페이지에 포함하고 UI에 대한 코드까지 살펴보면 아래와 같습니다.