본문 바로가기
C++ 200제/코딩 IT 정보

MAVEO 포터블을 이용한 GPS 3d 지도 프로토타입

by vicddory 2017. 2. 7.

원문 - CodeProject : Animating Google Earth(3D) & Map(2D) for Live GPS via Ajax and RestFul Web Service [클릭]


프로젝트 다운GoogleMaps2d3d.zip


GPS를 이용해 웹 브라우저에서 구글맵, 구글어스, 카메라에서의 현재 위치를 실시간으로 동기화 시켜주는 프로그램이라고 하네요.


MAVEO Portable GPS 3D Map 프로토타입MAVEO Portable GPS 3D Map 프로토타입


여기에 쓰인건, Ajax, jQuery, Rest Service, Google Map & Earth, Java 등이라고 합니다. 한가지 기능을 살펴보자면, 2D Map과 3D 빌딩 기능의 활성화 / 비활성화입니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function toggle2d() {
   if (show2d.value == "Show 2-D Map") {
        $("#td2dmap").animate({ width: "50%" }, 500);
        $("#td3dmap").animate({ width: "50%" }, 500);
        show2d.value = "Hide 2-D Map";
   }
   else {
        $("#td2dmap").animate({ width: "0%" }, 500);
        $("#td3dmap").animate({ width: "100%" }, 500);
        show2d.value = "Show 2-D Map";
    }
}
 
function onresize() {
    var clientHeight = document.documentElement.clientHeight;
    $('#holder').each(function() {
         $(this).css({
             height: (clientHeight -
            $(this).position().top-50).toString() + 'px'
         });
    });
}
 
$(window).resize(onresize);
onresize();
 
function enbalebuildings() {
if(buildings.checked)
    ge.getLayerRoot().enableLayerById(ge.LAYER_BUILDINGS, true);
else
    ge.getLayerRoot().enableLayerById(ge.LAYER_BUILDINGS, false);
}
cs


onresize에서 브라우저의 크기에 맞춰 지도들을 확대/축소 시킵니다. 그리고, 단순히 체크 박스를 선택하느니, 하지 않느니로 기능의 활성화 상태를 결정할 수도 있습니다.


구글어스와 맵을 사용할 때, 맨처음 해야할 일은 등록키를 발급 받는 것입니다. (여기 - Sign Up for the Google Maps API[클릭])


ps1. 처음 실행하면 구글어스 로딩이 실패합니다. 그때, 빌드 중단하고 재시도하면 잘 돌아갑니다.

ps2. 제작하신 분이 데모판을 올려주셔서, 실제로 GPS 연동 등은 빠져있습니다... 아쉽게도...

ps3. 제작하신 분이 참조한 사이트

- Google Earth API [클릭]

- Atmosphere and Sun, 그냥 구글어스에서 태양 효과 [클릭]

- GoogleMaps Camera [클릭]

- Google SketchUP, 설치 프로그램(이 분은 맵상의 건물을 직접 만드심) : 로그인 필요 [클릭]

- Google 3D warehouse, : 로그인 필요 [클릭]

- Google Earth 3D Models [클릭]

- Google Maps Javascript API V3 Basics [클릭]

댓글