[openLayers_proj] 좌표계 변환

 

 

좌표계 변환

 

해당 게시글에서는 ol.proj.transform()을 활용하여 구글좌표(EPSG:4326)를 Open Layer좌표(EPSG:3857)로, Open Layer좌표(EPSG:3857)를 구글좌표(EPSG:4326)로 변환하는 예제를 통해, 필요한 좌표계로 변환하는 예제를 확인할 수 있다.

 

목차는 아래와 같다.

1. 라이브러리 추가
2. transform()

 

 

open layer(이하 ol)의 라이브러리나, proj4의 라이브러리가 외부파일 형식으로 필요하다면 아래 압축 파일을 사용할 수 있다.

ol, proj4.zip

1.29MB

 

 

---

 

 

1. 라이브러리 추가

우선 html에서 아래와 같이 스크립트를 추가하고,

<script src="${contextPath}/marine/js/proj4/proj4.js"></script>
<script src="${contextPath}/marine/js/ol/ol.js"></script>

 

js에서 사용할 좌표계를 정의해주어야한다.

// ol에서 proj4를 사용하기 위한 좌표계 정의
proj4.defs('EPSG:980201', '+proj=lcc +lat_1=30 +lat_2=60 +lat_0=0 +lon_0=126 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs');
proj4.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');
ol.proj.proj4.register(proj4);

 

 

 

---

 

2. transform()

위 목차의 작업 단계를 통해 proj4에서 제공하는 다양한 좌표 변환과 관련된 함수들을 사용할 수 있는데, 해당 게시글에서는 transform()함수 사용 방법에 대해 정리해보았다.

var coordinate=ol.proj.transform(변환하고자 하는 좌표배열, 변환 전 좌표계 코드, 변환 희망하는 좌표계 코드)

 

예시를 통해 확인해보면 다음과 같다.

map03.on('click', function(evt) {
	var map=map03
	var coordinateOL = evt.coordinate; //ol좌표계(EPSG:3857)를
	var coordinate=ol.proj.transform(coordinateOL, 'EPSG:3857', 'EPSG:4326')//구글좌표계(EPSG:4326)로 변환
	
	var feature = map.forEachFeatureAtPixel(evt.pixel,
		function(feature) {
			return feature;
		});
	if (feature) {
    	console.log(coordinateOL)
        console.log(coordinate)
    }
});

 

 

순서대로 coordinateOL, coordinate의 출력 내용이다.

좌표계 변환

 

 

설명과 같이 변환하고자 하는 좌표계 코드를 변경해주면, 원하는 좌표계를 얻을 수 있다.

추가로, 다양한 EPSG코드를 확인하고자 한다면 아래의 링크를 통해 확인할 수 있다.

https://wooble52.tistory.com/32

[QGIS] 국내 주요 좌표계 EPSG 코드 정리

 

 

 

---