OpenLayer, 클릭시 좌표 가져오는 방법

Web/JavaScript
2021. 11. 12.

OpenLayer, 클릭시 좌표 가져오는 방법

클릭시 좌표 가져오는 방법

지도를 클릭시, 좌표를 가져오는 방법이다.

<!DOCTYPE html>
<html>
    <head>
        
    </head>
    <body>
        <button onclick='move()'>이동</button>
        <div id='js-map'></div>
    </body>

    <script src="../../assets/js/proj4.js"></script>
    <script src="../../assets/js/ol-debug.js"></script>

    <script src="../../assets/js/jquery.js"></script>
    <script>
    
    var map = new ol.Map({
    view: new ol.View({
        zoom: 16,
        center: [ 126.97659953, 37.579220423 ], //포인트의 좌표를 리턴함
        projection : 'EPSG:4326',
    }),
    target: 'js-map',
    layers: [
        new ol.layer.Tile({
            source : new ol.source.XYZ({ //vworld api 사용
            url: 'http://xdworld.vworld.kr:8080/2d/Base/202002/{z}/{x}/{y}.png',
            //tileGrid: tileGrid
        })
        })
    ]
});

//클릭하기
map.on('click', function(evt) {
    
    //var lonlat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
    let coordinate = evt.coordinate;
    console.log(coordinate);
})

Jquery를 활용하였다.

map을 클릭시, function의 매게변수 evt로부터 좌표를 가져온다.

좌표는 coordinate 이며, 배열로 담겨있는 것이 특징이다.

위의 코드는 이전글 좌표계 변환하기를 응용한 방법이다.

https://mollangpiu.tistory.com/265

OpenLayer, 좌표계 변환하기

OpenLayer, 좌표계 변환하기 좌표계 변환하기 전의 글 사진을 인용을 해보았다. 오픈 레이어를 처음 사용한 사람이라면, 모르겠지만 카카오 API로부터 지도 API를 처음 접한 나의 입장에서는 좌표

mollangpiu.tistory.com

만약, OpenLayer의 projection을 이용하지 않았다면 아래의 방법을 참고하여 가져오면 된다.

map.on('click', function(evt) {

    var coordinate = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
    //let coordinate = evt.coordinate;
    console.log(coordinate);
})

해석한다면, 좌표를 가져오고나서 OpenLayer의 기본 좌표계인 EPSG:3857을 EPSG:4326으로 변환해서 담는다는 의미이다.

마무리

본 내용은, 지도를 클릭시 Marker를 표시하기 위함에 대한 준비과정이다.

이 과정을 통해, 사용자의 UI를 제공하여, 마커 등록을 하면 된다.

'Web > JavaScript' 카테고리의 다른 글

JQuery, filter 활용하기 (1)	2021.11.29
OpenLayer, 지도 클릭시 마커를 지도에 표시하기. (0)	2021.11.12
JavaScript, CSS의 @keyframes 제어하기 (0)	2021.11.11
OpenLayer, 마커 만들기 (0)	2021.11.09
OpenLayer, 지도 이동하기 (0)	2021.11.09

작은 새의 날개짓