[Openlayers] 2 - 지도 클릭 이벤트로 좌표 출력

지난 포스트에서 어떻게 OSM지도를 출력하는 지 정리 해 봤다.
이번에는 지도를 클릭 했을 때 해당 위치의 좌표를 출력하는 방법에 대해 정리 해 보곘다.

만약 Openlayers를 이용해 OSM지도를 그리는 방법에 대해 모른다면, 지도 출력 포스트를 참고하자.

바로 지도 위에 이미지를 그리는 방법에 대해 알고 싶다면, marker 출력 포스트를 참고하자!

 

Openlayers에서는 DOM 요소의 x, y좌표를 우리가 원하는 좌표계 좌표로 반환해주는 함수들이 존재한다. 
바로 코드를 통해 알아보자. 시작은 지난 포스트 코드에서 시작한다.

 

<template>
    <div class="map__wrapper">
        // 3. 현재 좌표 출력 
        <p>CURRENT POSITION: {{mousePosition}}</p>
        <div class="map" ref="map"></div>
    </div>
</template>

<script>
...
import { fromLonLat, toLonLat } from 'ol/proj.js'
...

export default {
    name: 'TestPage',
    setup() {
        const map = ref(null);
        //2. 좌표 저장 변수 선언
        const mousePosition = ref([]);
        let olMap;
        const center = fromLonLat([126.9251405697578, 37.53033241217628])
        onMounted(() => {
            olMap = new OlMap({
                target: map.value,
                controls: defaults({
                    attribution: false,
                    zoom: false,
                    rotate: false,
                }),
                layers: [new OlLayerTile({ source: new OSM() })],
                view: new OlView({
                    center: center,
                    zoom: 17,
                }),
            })
            // 1. 클릭 이벤트 등록
            olMap.on('click', (event) => {
                const currentPosition = toLonLat(event.coordinate)
                mousePosition.value = currentPosition
            })
        })
        return { map, olMap, mousePosition }
    },
}
</script>

 

1. 클릭 이벤트 등록

지난 시간 생성한 OlMap 객체에 click 이벤트 리스너를 등록 해 주자. 

이 OlMap객체의 event에는 우리가 바로 좌표에 접근 할 수 있는 coordiate 필드가 있다.

하지만, 주의할 점은 이 OlMap의 좌표계는 ESPG:3857이기에, 우리가 익히 알고 있는 위도경도 좌표계가 아니다.

 

따라서 toLonLat함수를 이용하여 읽기 쉬운 경도 위도로 변환 해 주자.

 

주의할 점은 아래처럼 DOM요소에 바로 이벤트 등록을 하면 안된다는 점이다.

<div class="map" ref="map" @click="clickHandler"></div>

정상적으로 이벤트가 작동하기는 하지만, 여기서 받아온 event 변수에는 우리가 원하는 coordinate 필드가 없다. 

꼭 OlMap 객체에서 등록하자.

 

이렇게 구한 좌표를 mousePosition 변수에 담아주자. (value는 Vue의 ref 문법이다.)

 

자, 이제 지도에서 클릭을 해보면 상단의 CURRENT POSITION에 우리가 원하는 위도 경도 값이 출력되는 것을 볼 수 있다!

openlayers 지도 좌표 출력