[새싹 프론트엔드] GRS80TM좌표계 -> WGS84좌표계 변환하기

서울 열린데이터 광장에서 가져온 데이터의 좌표가 GRS80TM좌표계라

카카오(WGS84좌표계) 지도에서 사용하기 위해서는 좌표변환이 필요했다.

 

*GRS80 경위도: WGS84와 거의 유사

EPSG:4019, EPSG:4737 (Korean 2000)

+proj=longlat +ellps=GRS80 +no_defs

 

 

*WGS84 경위도: GPS가 사용하는 좌표계

EPSG:4326, EPSG:4166 (Korean 1995)

+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs 

 

 

나는 프로젝트 때 데이터 좌표가 GRS80가 아니라 bessel 좌표계인 줄 알고 bessel 좌표계로 변환했는데(?)

좌표 변환이 잘 되었다.

 

 

*중부원점(Bessel): 서울 등 중부지역

EPSG:2097

+proj=tmerc +lat_0=38 +lon_0=127 +k=1 +x_0=200000 +y_0=500000 +ellps=bessel +units=m +no_defs +towgs84=-115.80,474.99,674.11,1.16,-2.31,-1.63,6.43

 

 

 

1. 먼저 proj4js를 설치한다.

proj4js : 좌표계 변환하는 javascript 라이브러리

 

https://www.cdnpkg.com/proj4js/file/proj4js-combined.min.js/?id=63011 

PROJ4JS-COMBINED.MIN.JS: DOWNLOAD - CDNPKG

여기서 파일을 다운받고 압축해제 하면 js파일이 나온다.

 

 

 

2. js파일을 프로젝트 폴더 안에 넣어주고 html 파일에 연결시킨다.

<script language="JavaScript" src="proj4js-combined.min.js"></script>

 

 

 

3. js파일에 좌표변환 코드를 작성한다

//EPSG:2097 : 변환 전 좌표계(GRS80TM)
Proj4js.defs["EPSG:2097"] =
  "+proj=tmerc +lat_0=38 +lon_0=127 +k=1 +x_0=200000 +y_0=500000 +ellps=bessel +units=m +no_defs +towgs84=-115.80,474.99,674.11,1.16,-2.31,-1.63,6.43";
//EPSG:4326 : 변환 후 좌표계(wgs84=카카오)
Proj4js.defs["EPSG:4326"] = "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs";

var s_srs = new Proj4js.Proj("EPSG:2097");
var t_srs = new Proj4js.Proj("EPSG:4326");

var x = info.x;			//GRS80TM좌표의 x
var y = info.y;			//wgs84좌표의 y

var pt = new Proj4js.Point(x, y);

//Proj4js.transform(현재좌표, 변환좌표, geometry객체) : 좌표계변경
var result = Proj4js.transform(s_srs, t_srs, pt);

console.log(result); //경도, 위도
//콘솔에 변수 result를 찍어보면 위경도 순서가 바뀌어 출력된다

//그래서 위도에 y값, 경도에 x값을 저장한다
var lat = result.y;
var lng = result.x;

 

콘솔 결과 : 경도, 위도

위처럼 위경도가 바뀌어서 출력되므로 변수 저장 시 유의한다

(이것때문에 결과 출력이 잘 안돼서 넘나 고생했다..)

 

 

 

혹시 변환해야하는 좌표가 다르다면 아래의 사이트를 참고하면 된다.

https://www.osgeo.kr/17

한국 주요 좌표계 EPSG코드 및 proj4 인자 정리

 

 

새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 6주차 블로그 포스팅