PS_ImagesExifView 플러그인에 GPS정보 추가 + 맵 링크

CuuB GPS로거를 사용하면서 사진에 GPS정보를 담을 수 있게 되었고....
주로 쓰는 Picasa + photoWorks 에서 Exif정보를 보존하기 때문에
업로드 한 사진파일에도 그대로 정보가 살아있는데도,

GPS정보는 볼 수 없음에... 현재 사용중인 PS_ImagesExifView플러그인에 GPS정보 출력 추가를 해봤다.


먼저, 플러그인의 설정파일인 index.xml 파일의 27라인부터 있는 관리자화면의 옵션선택에서 출력 선택 박스 추가..

index.xml (Language : javascript)

1. <field title=" " name="exifSelect" type="checkbox" titledirection="bk" >
2.     <op name="ex1"  value="1" checked="checked">제조사</op>
3. [.........]
4.     <op name="ex14" value="1" checked="checked">촬영시각</op>
5.     <op name="ex15" value="1" checked="checked">GPS</op>
6.     <op name="ex16" value="1" checked="checked">네이버 맵</op>
7.     <op name="ex17" value="1" checked="checked">Google Maps</op>
8.  
9. [.........]
10. </field>
11.  

그리고 exif정보를 처리해주는 부분 index.php의 getExifImage()함수에 GPS출력을 추가.

index.php (getExifImage함수) (Language : html4strict)

1.  
2. //GPS exif 데이터 수집 by Hy054nz(http://hyosang.pe.kr September 21, 2008
3. $gps = "";
4. if($data['ex15']) {
5.     if($exif_info['Latitude']) {
6.         $tmp1 = split('[^0-9]',$exif_info['Latitude']);
7.         $latiR = substr($exif_info['LatitudeReference'], 0, 1);
8.         $lati = $latiR.$tmp1[0]."˚".$tmp1[1]."´".$tmp1[2].".".$tmp1[3]."˝";
9.         $gps .= "Latitude : ";
10.         $gps .= $lati;
11.         $gps .= " | ";
12.  
13.         $tmp2 = split('[^0-9]',$exif_info['Longitude']);
14.         $longiR = substr($exif_info['LongitudeReference'], 0, 1);
15.         $longi = $longiR.$tmp2[0]."˚".$tmp2[1]."´".$tmp2[2].".".$tmp2[3]."˝";
16.         $gps .= "Longitude : ";
17.         $gps .= $longi;
18.         $gps .= " | ";
19.  
20.         $gps .= "Altitude : ";
21.         $gps .= $exif_info['Altitude']."m";
22.  
23.         if($data['ex16']) {  //네이버 맵 링크 enable.
24.             $gps .= " | <a href=\"javascript:openMap('naver', '".implode($tmp1, ";")."', '".implode($tmp2, ";")."');\">Naver Map</a>";
25.         }
26.  
27.         if($data['ex17']) {  //구글 맵 링크 enable.
28.             $gps .= " | <a href=\"javascript:openMap('google', '".implode($tmp1, ";")."', '".implode($tmp2, ";")."');\">Google Map</a>";
29.         }
30.     }
31. }
32.  
33. $exifData = ($exifValue)?"  <span>" . implode("</span>{$spacer}<span>", $exifValue) . "</span>":NULL;
34.  
35. if($exifData != NULL && $gps != "") {
36.     $exifData .= "<br />".$gps;
37.  
38. }
39.  
40. return $exifData;
41.  

맵 오픈을 해줄 스크립트 추가...

index.php (style부분 다음) (Language : javascript)

1. <script>
2. function openMap(site, lati, longi) {
3.     var la, lo;
4.     var url = "";
5.  
6.     if(site == "naver") {
7.         la = transPosition(lati);
8.         lo = transPosition(longi);
9.         url = "http://map.naver.com/?x="+lo+"&y="+la+"&level=0";
10.     } else if(site == "google") {
11.         la = lati.split(";");
12.         lo = longi.split(";");
13.  
14.         la = la[0]+" "+la[1]+" "+la[2]+"."+la[3];
15.         lo = lo[0]+" "+lo[1]+" "+lo[2]+"."+lo[3];
16.         url = "http://maps.google.com/maps?q="+la+","+lo+"&z=16";
17.     }
18.  
19.     window.open(url, site+"map", "width=1000, height=800, top=0, left=0");
20. }
21.  
22. function transPosition(str) {
23.     //도,분,초로 ; 구분된 각도를 10진 소수점 형태로 변환. by Hy054nz
24.     str = new String(str);
25.     var arr = str.split(";");
26.     var rtn = 0;
27.  
28.     rtn += parseInt(arr[0], 10);
29.     rtn += parseFloat(1/60 * parseInt(arr[1], 10));
30.     rtn += parseFloat(1/3600 * parseFloat(arr[2]+"."+arr[3], 10), 10);
31.  
32.     return rtn;
33. }
34. </script>
35.  

여기서 한가지.
구글은 위/경도 좌표계(WGS84)를 사용하고,
네이버의 좌표계는 TM좌표계라 원래는 두 좌표계간 변환을 해 주어야 하지만

얼마전 네이버 맵의 업데이트로 위/경도를 바로 파라메터로 넣어 표시가 가능해졌다.

기본적인 수학식을 빼먹어서 얼마나 삽질했는지...-_- (분명 북한산을 찍었는데 왜 부산앞바다가...)

위/경도 좌표계와 카텍좌표계 변환하는 js는 일단 만들어놨으니 포스팅은 하겠습니다만... -ㅅ-;



Exif정보가 표시되는 예제를 보시려면 제 블로그 포스팅 중 북한산 포스팅이나 강원도 고성 포스팅을 참고하시면 되겠습니다.