OpenLayer, 좌표계 변환하기
- Web/JavaScript
- 2021. 10. 10.
OpenLayer, 좌표계 변환하기
좌표계 변환하기
전의 글 사진을 인용을 해보았다.
오픈 레이어를 처음 사용한 사람이라면, 모르겠지만 카카오 API로부터 지도 API를 처음 접한 나의 입장에서는 좌표의 위치가 다르다는 것을 알 수 있다.
흔히, 우리나라의 아픈 추억으로 일컫는 북위 38선.그래서 우리나라의 수도의 위도의 좌표는 대략 37.5 정도로 나온다.
그러나 저 위의 코드로는 수도, 경복궁이 중심임에도 37이라는 숫자는 어디서도 찾을 수가 없다.이는 오픈 레이어가 표시하는 좌표가 우리나라 지도 API에서 제공하는 좌표계가 달라서 생겨나는 이유이다.
만약, 오픈레이어만 사용한다면 이런 문제점에 대해서 그냥 지나칠 수 있지만다른 곳에서 가져온 좌표를 오픈 레이어에 적용을 한다면, 좌표에서 벗어난 값이 되어서 지도에서 해당 좌표를 찾을 수 없는 현상이 일어난다.
따라서, 오픈레이어를 사용하고 우리나라의 지도 API를 무엇이든 사용하게 된다면, 좌표계의 변화는 알아두는 것이 편하다.
좌표계 변환하는 방법
카카오 지도 api의 경복궁 좌표를 대입해보았을 때,
오픈 레이어에서도 동작되도록 변형한 코드이다.
기존 center 부분에서 좌표에 대해 transform을 하고 있다는 것을 알 수 있다.
앞으로, transform을 활용하여 저장하고 불러온다면 오픈 레이어와 우리나라 지도 api를 동시에 사용할 수 있는 방법을 구축할 수 있다.
new ol.geom.Point(ol.proj.transform([longitude, latitude], 'EPSG:4326', 'EPSG:3857'))
즉, 앞으로 좌표를 붙일 때마다 이렇게 불러와야 사용이 가능하다는 점이다.
map에서 좌표계 변환하기
기본으로 주어진 EPSG:3857이 아닌, projection을 통해서 좌표계 변환을 할 수 있다.
이를 하게 된다면 해당 OpenLayer가 제공하는 지도의 기준은 모두 'EPSG:4326'이 된다.
마무리
필자는 검색기능을 네이버나 다음의 도움을 요구하는 상황에 있어, 주소에 대한 검색 값을 좌표로 반환하고 등록하기 위해서는 오픈 레이어의 좌표계 변환이 필요했다. 이로 인해 기존의 좌표계 변환은 필수적인 상황이 되었고, 모든 좌표는 저 방식으로 저장처리가 된다.
'Web > JavaScript' 카테고리의 다른 글
[JavaScript] addEventListener알아보기 (0) | 2021.10.18 |
---|---|
OpenLayer, 스타일 변경하기 (0) | 2021.10.11 |
OpenLayer, 한국에 익숙한 Layer 소개 (0) | 2021.10.09 |
OpenLayer, 좌표 등록하기 (0) | 2021.10.08 |
OpenLayer, Vector 적용하기 (0) | 2021.08.31 |