SVG를 이용하여 jVectorMap을 구성하였을 경우 위/경도 좌표 표시하기.

jVectorMap은 친절히 맵의 Projection을 지원한다. 

국제 표준에 해당하는 Shape 파일을 jVectorMap Converter를 이용할 경우 map projection이 동일하게 변환되지만
한국 지도 행정동 2단계 지도를 변환해 보니 지도 군데 군데 구멍이 뚫리게 되어 이를 사용할 수 없게 되었다. 

관련 글 : http://www.yeory.com/270

 
이 때문에 완벽한 지도를 보여주어야 하기 때문에 QGIS를 이용하여 SVG로 변환하여 지도를 표시하였다.
이 경우 지도는 모두 나오는데 지도 타입(Projection)이 위/경도를 사용할 수 없기 때문에 위/경도로 좌표를 표시할 수 없다.

필요한 것은.... 

• 지도의 가로 세로 -> 지도 자체의 가로, 세로 사이즈
  (div 등 jVectorMap을 이용하여 그려주는 태그의 사이즈가 아니다.)
  
  
• 지도의 상하좌우 한계점의 위/경도 총 4개
  이 한계점 정보가 정확하지 않으면 X, Y 변환 값이 모두 틀어진다.
  
  

이 모든 정보들은 SHP -> SVG로 추출할 때 사용하는 QGIS SVG 플러그인에서 설정이 가능한 정보들이다.

작업 순서는 아래 그림처럼...

< 지도의 가로-세로 사이즈 설정 >

< 가로-세로 설정에 의해 틀어진 지도를 중앙에 위치하도록 설정 >

< 중앙에 맞춰진 지도의 각 상하좌우 위/경도를 설정해 주어야 한다>

마지막 이미지에서 보여지는 정보들이 스크립트에 설정해주어야 하는 정보이다.... 

maxY -> northLat
minY -> southLat
maxX -> eastLong
minY -> westLong

필요한 것이 나왔다면 아래 함수를 이용해 X, Y 변환이 가능하다.

	function convert(latitude, longitude) {
		// lat : 위도, long : 경도
		
		// QGIS > SVG 플러그인 속성에 적은 가로-세로
		var width = 792;
		var height = 611;

		// QGIS > SVG 플러그인 속성에서 SET 된 각 한계선
		var eastLong = 131.754044;		// 우측 한계선
		var westLong = 124.268181;		// 좌측 한계선
		var northLat = 38.749657;		// 상측 한계선
		var southLat = 32.974579;		// 하측 한계선
		
		// 경도 -> x
		var longDiff = eastLong - westLong;
		var lon = (longitude - westLong) * (width / longDiff);
		
		// 위도 -> y
		var latDiff = northLat - southLat;
		var lat = (northLat - latitude) * (height / latDiff);
		
		return [ lon, lat];
	}

경도 1도에 해당하는 픽셀을 구하고... (지도 넓이 / (좌-우)) 표시하고자 하는 경도를 좌측 값으로부터 뺀 후 곱하면 된다. 

모서리에 있는 점은 지도 가로-세로를 표시한 것이고, 위/경도는 이 안쪽을 기준으로 변환이 되어야만 한다.



하루 삽질했으나 원하는 결과가 나왔으니 만족...