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);
정말 감사합니다.
좋아요좋아요