상세 컨텐츠

본문 제목

[OpenLayers] 좌표변환하기

개발이야기

by 꾸데따 2021. 10. 19. 10:36

본문

OpenLayers에서 다루는 좌표변환은 2가지가 있습니다. 

 

하나는 특정 지점한곳을 source 좌표계에서 target 좌표계로 변경하는 것이고 

다른 하나는 geometry를 일괄 변환하는 것입니다.

 

여기서 공통적으로 사용하는 좌표계관련 javascript 라이브러리는 https://github.com/proj4js/proj4js 입니다.

좌표변환을 위해서는 변환하고자 하는 좌표계의 이름, 스펙, 서비스영역 등을 포함하는 object를 미리 정의해둬야 합니다.

 

[좌표계 등록 및 정의]

var g_oProjs = fnGetAllProjections(); //좌표계 스펙 등록 및 정의

function fnGetAllProjections() {

  const outputProjs = {}
  const reservedOl = {}

  const projectionsJSON = [
  {
     "projName":"EPSG:5181"
    ,"proj4Def":"+proj=tmerc +lat_0=38 +lon_0=127 +k=1 +x_0=200000 +y_0=500000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs"
    ,"extent":[-219825.99, -535028.96, 819486.07, 777525.22]
  },
  {
     "projName":"EPSG:5182"
    ,"proj4Def":"+proj=tmerc +lat_0=38 +lon_0=127 +k=1 +x_0=200000 +y_0=550000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs"
    ,"extent":[-219825.99, -485028.96, 819486.07, 827525.22]
  },
  //... 페이지 하단의 좌표계...정보 참고해서 추가 필요
  {
     "projName":"SR-ORG:7165"
    ,"proj4Def":"+proj=tmerc +lat_0=38 +lon_0=127.5 +k=0.9996 +x_0=1000000 +y_0=2000000 +ellps=GRS80 +units=m +no_defs"
    ,"extent":[]
  }];
  
  
  for (let el of projectionsJSON) {

    try {
      proj4.defs(el.projName, el.proj4Def);
      outputProjs[el.projName] = proj4.Proj(el.projName)

      const innerOptions = {
        code: el.projName,
        units: "m"
      }

      if(el.extent){
        innerOptions.extent = el.extent
      } else {
        innerOptions.global = true
      }
      reservedOl[el.projName] = new Projection(innerOptions)
    } catch (exc) {
      console.warn(`${el.projName} 좌표계는 지원 대상 좌표계가 아닙니다.`);
    } 

  }

 

[특정 지점 좌표변환] 

var aMapCenter = fnTransform(g_oProjs["EPSG:5181"], g_oProjs["EPSG:900913"], [123456.12, 432134.12] ),

function fnTransform(source, dest, aCoord) {
  aCoord[0] = parseFloat(aCoord[0])
  aCoord[1] = parseFloat(aCoord[1])
  var p = new proj4.toPoint(aCoord); //proj4 lib 사용
  return proj4.transform(source, dest, p);
}

 

 

 

[geometry 일괄 변환] 

oFeature.getGeometry().transform("EPSG:5181", "EPSG:900913"); //문자열(EPSG:5181) 또는 오브젝트(g_oProjs["EPSG:5181"]) 모두 가능

 

 

 

 

 

* 우리나라에서 자주 사용하는 좌표계 정보

const projectionsJSON = [
  {
     "projName":"EPSG:2096"
    ,"proj4Def":"+proj=tmerc +lat_0=38 +lon_0=129 +k=1 +x_0=200000 +y_0=500000 +ellps=bessel +units=m +no_defs"
    ,"extent":[108158.32, 111012.87, 256584.86, 571234.42]
  },
  {
     "projName":"EPSG:2097"
    ,"proj4Def":"+proj=tmerc +lat_0=38 +lon_0=127 +k=1 +x_0=200000 +y_0=500000 +ellps=bessel +units=m +no_defs"
    ,"extent":[107581.17, 52224.72, 287427.97, 537099.14]
  },
  {
     "projName":"EPSG:2098"
    ,"proj4Def":"+proj=tmerc +lat_0=38 +lon_0=125 +k=1 +x_0=200000 +y_0=500000 +ellps=bessel +units=m +no_defs"
    ,"extent":[156579.05, 55201.04, 287775.30, 504911.43]
  },
  {
     "projName":"EPSG:3785"
    ,"proj4Def":"+proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +a=6378137 +b=6378137 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs"
    ,"extent":[-20026376.39, -19971868.88, 20026376.39, 19971868.88]
  },
  {
     "projName":"EPSG:3857"
    ,"proj4Def":"+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 +wktext  +no_defs"
    ,"extent":[-20026376.39, -20048966.10, 20026376.39, 20048966.10]
  },
  {
     "projName":"EPSG:4162"
    ,"proj4Def":"+proj=longlat +ellps=bessel +no_defs"
    ,"extent":[]
  },
  {
     "projName":"EPSG:4166"
    ,"proj4Def":"+proj=longlat +ellps=WGS84 +towgs84=0,0,0,0,0,0,0 +no_defs"
    ,"extent":[]
  },
  {
     "projName":"EPSG:4326"
    ,"proj4Def":"+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs"
    ,"extent":[]
  },
  {
     "projName":"EPSG:4737"
    ,"proj4Def":"+proj=longlat +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +no_defs "
    ,"extent":[]
  },
  /*{
     "projName":"EPSG:4926"
    ,"proj4Def":"+proj=geocent +ellps=GRS80 +units=m +no_defs"
    ,"extent":[-3028435.55, 4715462.65, -3402427.31, 3489032.51]
  },*/
  {
     "projName":"EPSG:4927"
    ,"proj4Def":"+proj=longlat +ellps=GRS80 +towgs84=0.0,0.0,0.0,0.0,0.0,0.0,0.0 +no_defs"
    ,"extent":[]
  },
  {
     "projName":"EPSG:5179"
    ,"proj4Def":"+proj=tmerc +lat_0=38 +lon_0=127.5 +k=0.9996 +x_0=1000000 +y_0=2000000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs"
    ,"extent":[531371.84, 967246.47, 1576674.68, 2274021.31]
  },
  {
     "projName":"EPSG:5180"
    ,"proj4Def":"+proj=tmerc +lat_0=38 +lon_0=125 +k=1 +x_0=200000 +y_0=500000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs"
    ,"extent":[-24021.26, -540417.92, 989888.48, 793557.29]
  },
  {
     "projName":"EPSG:5181"
    ,"proj4Def":"+proj=tmerc +lat_0=38 +lon_0=127 +k=1 +x_0=200000 +y_0=500000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs"
    ,"extent":[-219825.99, -535028.96, 819486.07, 777525.22]
  },
  {
     "projName":"EPSG:5182"
    ,"proj4Def":"+proj=tmerc +lat_0=38 +lon_0=127 +k=1 +x_0=200000 +y_0=550000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs"
    ,"extent":[-219825.99, -485028.96, 819486.07, 827525.22]
  },
  {
     "projName":"EPSG:5183"
    ,"proj4Def":"+proj=tmerc +lat_0=38 +lon_0=129 +k=1 +x_0=200000 +y_0=500000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs"
    ,"extent":[-415909.65, -526336.34, 649203.95, 765410.62]
  },
  {
     "projName":"EPSG:5184"
    ,"proj4Def":"+proj=tmerc +lat_0=38 +lon_0=131 +k=1 +x_0=200000 +y_0=500000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs"
    ,"extent":[-612402.10, -514301.03, 479010.89, 757176.37]
  },
  {
     "projName":"EPSG:5185"
    ,"proj4Def":"+proj=tmerc +lat_0=38 +lon_0=125 +k=1 +x_0=200000 +y_0=600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs"
    ,"extent":[-24021.26, -440417.92, 989888.48, 893557.29]
  },
  {
     "projName":"EPSG:5186"
    ,"proj4Def":"+proj=tmerc +lat_0=38 +lon_0=127 +k=1 +x_0=200000 +y_0=600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs"
    ,"extent":[-219825.99, -435028.96, 819486.07, 877525.22]
  },
  {
     "projName":"EPSG:5187"
    ,"proj4Def":"+proj=tmerc +lat_0=38 +lon_0=129 +k=1 +x_0=200000 +y_0=600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs"
    ,"extent":[-415909.65, -426336.34, 649203.95, 865410.62]
  },
  // {
  //    "projName":"EPSG:5188"
  //   ,"proj4Def":"=B20+proj=tmerc +lat_0=38 +lon_0=131 +k=1 +x_0=200000 +y_0=600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs"
  //   ,"extent":[-612402.10, -414301.03, 479010.89, 857176.37]
  // },
  {
     "projName":"EPSG:900913"
    ,"proj4Def":"+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 +wktext  +no_defs"
    ,"extent":[]
  },
  {
     "projName":"SR-ORG:6627"
    ,"proj4Def":"+proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +ellps=WGS84 +datum=WGS84 +units=m +no_def"
    ,"extent":[-898192.6797, -256153.1648, 1460355.4161, 1132644.6538]
  },
  {
     "projName":"SR-ORG:6640"
    ,"proj4Def":"+proj=tmerc +lat_0=38 +lon_0=127 +k=1 +x_0=200000 +y_0=500000 +ellps=GRS80 +units=m +no_defs"
    ,"extent":[-898192.6797, -256153.1648, 1460355.4161, 1132644.6538]
  },
  {
     "projName":"SR-ORG:6784"
    ,"proj4Def":"+proj=tmerc +lat_0=38 +lon_0=129 +k=1 +x_0=200000 +y_0=500000 +ellps=GRS80 +units=m +no_defs"
    ,"extent":[-180.0000, -76.6798, 180.0000, 76.6798]
  },
  {
     "projName":"SR-ORG:6814"
    ,"proj4Def":"+proj=tmerc +lat_0=38 +lon_0=127 +k=1 +x_0=200000 +y_0=550000 +ellps=GRS80 +units=m +no_defs"
    ,"extent":[]
  },
  {
     "projName":"SR-ORG:7067"
    ,"proj4Def":"+proj=tmerc +lat_0=38 +lon_0=127 +k=1 +x_0=200000 +y_0=600000 +ellps=GRS80 +units=m +no_defs"
    ,"extent":[]
  },
  {
     "projName":"SR-ORG:7068"
    ,"proj4Def":"+proj=tmerc +lat_0=38 +lon_0=129 +k=1 +x_0=200000 +y_0=600000 +ellps=GRS80 +units=m +no_defs"
    ,"extent":[]
  },
  {
     "projName":"SR-ORG:7076"
    ,"proj4Def":"+proj=tmerc +lat_0=38 +lon_0=125 +k=1 +x_0=200000 +y_0=600000 +ellps=GRS80 +units=m +no_defs"
    ,"extent":[]
  },
  {
     "projName":"SR-ORG:7141"
    ,"proj4Def":"+proj=tmerc +lat_0=38 +lon_0=131 +k=1 +x_0=200000 +y_0=600000 +ellps=GRS80 +units=m +no_defs"
    ,"extent":[]
  },
  {
     "projName":"SR-ORG:7142"
    ,"proj4Def":"+proj=tmerc +lat_0=38 +lon_0=131 +k=1 +x_0=200000 +y_0=600000 +ellps=GRS80 +units=m +no_defs"
    ,"extent":[]
  },
  {
     "projName":"SR-ORG:7165"
    ,"proj4Def":"+proj=tmerc +lat_0=38 +lon_0=127.5 +k=0.9996 +x_0=1000000 +y_0=2000000 +ellps=GRS80 +units=m +no_defs"
    ,"extent":[]
  }]

'개발이야기' 카테고리의 다른 글

Apache Log4j 2 보안 업데이트 쉽게하는 방법  (0) 2021.12.13
HTML5와 html2canvas 이용한 웹화면 PDF로 저장시 해상도 깨지는 문제 해결하는 방법  (0) 2021.12.09
[IDE] intellij 에서 외부 jar 추가하는 방법  (0) 2021.10.08
[http] 웹 개발시 유용한 캐시 원터치 삭제 크롬 확장프로그램  (0) 2021.10.07
[IDE] intellij 서버 재시작 없이 파일수정 내역 확실하게 적용시키는 방법  (0) 2021.10.05

관련글 더보기

티스토리툴바