[OpenLayers 2] 좌표변환 with Proj4js

GeoServer의 WMS 서비스를 이용해 지도 애플리케이션을 제작하는 경우
‘OpenLayers2’를 아직도 많이 사용한다.
* 참고 OpenLayers 2 – JavaScript Mapping Library

특히 관공서의 지도 애플리케이션들이 그러하고
좌표체계도 일반적인 WGS84(EPSG:4326)이 아닌 GRS80 한국형 좌표체계를 사용한다.
* 한국형이라고 나쁜게 아니다. 한반도 지형과 가장 잘맞는 투영도법을 쓴다는 뜻이다.

따라서 지도를 그리기 위해 사용할 OSM 소스의 EPSG:3857과 달라
좌표변환을 필수적으로 해야 한다.
** 과거 OSM 좌표로 사용했던 EPSG:900913는 없어졌다. EPSG:3857로 표기해야 함
==> 참조 Proj4js Problem in converting coordinates from google mercator

좌표변환을 위해 OpenLayers2에서 사용하는 라이브러리는 Proj4js 이다.
* OpenLayers3에서는 라이브러리가 통합되어 ol.proj 로 제공되고 있음

  Proj4js.defs["EPSG:4019"] = "+proj=longlat +ellps=GRS80 +no_defs";
  Proj4js.defs["EPSG:3857"] = "+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +no_defs";
  Proj4js.defs["EPSG:900913"] = "+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +no_defs";
  //UTM-K
  Proj4js.defs["EPSG:5179"] = "+proj=tmerc +lat_0=38 +lon_0=127.5 +k=0.9996 +x_0=1000000 +y_0=2000000 +ellps=GRS80 +units=m +no_defs";
  //중부원점(50만)
  Proj4js.defs["EPSG:5181"]="+proj=tmerc +lat_0=38 +lon_0=127 +k=1 +x_0=200000 +y_0=500000 +ellps=GRS80 +units=m +no_defs";
  //서부원점
  Proj4js.defs["EPSG:5185"] = "+proj=tmerc +lat_0=38 +lon_0=125 +k=1 +x_0=200000 +y_0=600000 +ellps=GRS80 +units=m +no_defs";
  //중부원점-o
  Proj4js.defs["EPSG:5186"] = "+proj=tmerc +lat_0=38 +lon_0=127 +k=1 +x_0=200000 +y_0=600000 +ellps=GRS80 +units=m +no_defs";
  //동부원점
  Proj4js.defs["EPSG:5187"] = "+proj=tmerc +lat_0=38 +lon_0=129 +k=1 +x_0=200000 +y_0=600000 +ellps=GRS80 +units=m +no_defs";
  //동해(울릉)원점
  Proj4js.defs["EPSG:5188"] = "+proj=tmerc +lat_0=38 +lon_0=131 +k=1 +x_0=200000 +y_0=600000 +ellps=GRS80 +units=m +no_defs";

  // projection for WGS84
  var projWGS84 = new OpenLayers.Projection("EPSG:4326");
  // projection for WMS
  var projWMS = new OpenLayers.Projection("EPSG:5186");
  // projection for OSM
  var projOSM = new OpenLayers.Projection("EPSG:3857");

  //초기 페이지 지도 중심점 (EPSG:5186 -> EPSG:3857) 
  // ex) 제주도청 [EPSG:4326] 126.498197, 33.489004 
  //	<==> [EPSG:5186] 99597.5637890962, 153365.05908124548
  //	<==> [EPSG:3857] 3960392.400920103, 14081714.876307208
  try{
    var centerWGS84 = new OpenLayers.LonLat( 126.498197, 33.489004 );
    var center4WMS = centerWGS84.transform( projWGS84, projWMS );
    console.log( 'center4WMS : '+center4WMS.toShortString() );
    //=> center4WMS : 153365.05908124548, 99597.5637890962

    var centerWGS84 = new OpenLayers.LonLat( 126.498197, 33.489004 );
    var center4OSM = centerWGS84.transform( projWGS84, projOSM );
    console.log( 'center4OSM : '+center4OSM.toShortString() );
    //=> center4OSM : 14081714.876307208, 3960392.400920103

    var center4WMS = new OpenLayers.LonLat( 153365.05908124548, 99597.5637890962 );
    var mapCenter = center4WMS.transform( projWMS, projOSM );
    console.log( 'mapCenter : '+mapCenter.toShortString() );
    //=> mapCenter : 14081714.876307214, 3960392.400919703
  }catch(e){}

** 특이사항
왜 그런지는 모르겠지만..
projWGS84 에서 projOSM 변환시 원점인 centerWGS84 변수를 다시 선언하지 않고
앞에 썼던거 그대로 다시 사용하면 transform() 함수가 비정상 작동한다.
centerWGS84 변수의 재선언 라인을 주석처리하면 다음과 같이 출력된다.
“center4OSM : 17032445265.718983, NaN”

변수를 참조해서 값을 직접 조작하는 탓인듯 한데, 정리하자면
OpenLayers.LonLat의 transform() 함수 사용시 좌표변수를 반드시 재선언해야 한다!

Proj4js에도 포인트와 좌표변환 함수가 있다. (같은 결과)
* 좌표 new Proj4js.Proj(“EPSG:4326”);
* 포인트 new Proj4js.Point( 85286.417057415703, 4347668.9422677439 );
* 변환 Proj4js.transform(source, dest, point);

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중

%d 블로거가 이것을 좋아합니다: