[OpenLayer] 좌표계 변환하기

 

 

OpenLayer, 좌표계 변환하기

 

좌표 변환하기

좌표가 들어있다.

바둑과 체스 그리고 그래프에는 좌표가 있다.

지도 또한 마찬가지로 부르는 명칭마다 다르지만, 위도하고 경도가 대표적이다.

문제는 어디서 사용하고 표시하느냐에 따라서 좌표 표기법이 달라진다.
우리나라 사람이 위도에 대해서 잘 모르지만, 남북 경계선인 38선은 알고 있다.

위도 38도 쯤에 위치한다고 해서 불러진 명칭이다.

이를 토대로 지도를 조금 관심 있다면 우리나라 위치는 위도 약 33 ~ 38 쯤에 위치한 것을 알 수 있다.
그러나 위의 사진에서는 어디에도 33 ~ 38에 대한 숫자는 없다.

이 이유는 좌표계가 다르기 때문이다.

좌표계 변환하는 방법

map.zip

1.00MB

필요한 파일은 3가지다.

좌표 변환을 하기 위해서는 필요한 파일은 3가지다.
ol에 대한 정보와, 좌표계정보를 담고 있는 js 파일이다.

이것만 있으면 좌표계 변환준비는 끝났다.

  

    
    
    
    
  
let test = ol.proj.transform([coord[j][0], coord[j][1]], 'EPSG:5186', 'EPSG:4326');

좌표계의 변환은 다음과 같다.

transform 함수(변경대상 경도, 변경 대상 위도, 변경 전 좌표계, 변경 후 좌표계)이다.

좌표 변경 성공 모습.

  

    
    
    
    
  
console.log('coord : '+coord[j]);
			
			
let test = ol.proj.transform([coord[j][0], coord[j][1]], 'EPSG:5186', 'EPSG:4326');
console.log('12345');
console.log(test);

위 코드는 해당 console창에 표시된 곳의 위치된 코드 모습이다.
필자가 사용한 것은 5186 좌표계에서 카카오 지도 API가 사용하는 4326 좌표계로 변경하는 모습이다.


※ 좌표 변경 시, 위도하고 경도 삽입 부분의 좌표 위치는 반드시 맞출 필요는 없다.
※ 좌표 변환할 때 매개변수 넣는 순서는 OpenLayer 기준으로 경도가 먼저 사용되고, 카카오지도 API 기준으로는 위도가 먼저 들어간다.

변경할 좌표 아는 방법?

사실 필자 또한 모른다.
필자는 변경하기 전 힌트를 얻었기 때문에 변경할 수 있었지만 변경 전 좌표가 어떤 좌표계를 사용하는지를 알기란 쉽지가 않다.


카카오지도 API에서 좌표변환 시 딜레이가 생각보다 오래 걸린다.
왜 그런지는 모르겠지만, 이를 사용하면 금방 변경되는 것을 알 수 있다.

행정구역 좌표계 변환하기 코드

  

    
    
    
    
  
/** 서울 전체 행정구역 JSON에 담기 **/
function SeoulAreaAllView() {
    console.log(SEOULDATA.features);


    let seoulArea = SEOULDATA.features;
    for(var i=0; i < seoulArea.length; i++) {
        console.log(seoulArea[i]);
        let seoul = seoulArea[i];
        let name = seoul.properties.SIG_KOR_NM;	//자치구 이름 빼기
        console.log(name);	

        let coord = seoul.geometry.coordinates[0][0];	//자치구 좌표
        for(var j=0; j < coord.length; j++) {
            let test = ol.proj.transform([coord[j][0], coord[j][1]], 'EPSG:5179', 'EPSG:4326');
            console.log(test);
        }

    }

    console.log('=== SeoulAreaAllView END 0355');
}

행정지도 좌표계 변환 코드이다.
아래를 참고해서, 대한민국 행정지역 자치구 코드를 불러왔다.



2023.01.11 - [Computer/기타] - [기타] SHP파일을 불러오는 방법

[기타] SHP파일을 불러오는 방법