Rev. 2.73

불러오고 있습니다...

불러오고 있습니다...

출발지: 도착지:
KML:

이번엔 구글어스 API와 한국지도 길찾기를 연동해 보았습니다. 위 화면이 보이지 않는 분은 플러그인을 별도로 설치해야 합니다. KML을 다루는 것과 시점 조작, 그리고 마커 생성 등에 대한 기초적인 사용방법을 익힐수 있었습니다. 맵과, 어스의 인스턴스를 개별적으로 생성한 후 두 인스턴스를 의동기화 시키는 방법으로 구현하였는데, 어스의 마커 이동과 카메라의 이동에서 싱크가 맞지 않는 문제가 발생하더군요. 결국 "google.earth.addEventListener"를 사용해서 프레임 단위로 모션을 처리하여 해결하습니다. 시스템 사양에 따라 처리하는 프레임 수가 다르며, 비효율적으로 작성된 함수를 대입한 경우 프레임 수는 더욱 떨어집니다. 따라서 프레임 수를 근거로 한 주행 속도와 남은 시간 및 거리 그리고 변속 위치 등을 산출해야 했습니다.(스스로 계산했다는 것이 믿기지 않음 ㅡ.ㅡ) 아래는 어스의 리스너에 의해 지속적으로 호출이 일어나는 함수에 포함된 계산식입니다.

var animate = function() {
  // 속도가 변경된 경우 현재 위치 계산
  if (curSpeed != newSpeed) {
    var distIdx = Math.round((curSpeed*i - newSpeed*i) / (curSpeed = newSpeed)); // 오차값
    balance = (balance / i) * (i += distIdx); // 인덱스 및 스택 값 재설정
  }

  // polyline으로부터 주행방향 좌표계산(GLatLng)
  var newLoc = Route.getPointAtDistance(curSpeed * i, polyline);

  // 모의주행 종료
  if (status == 'stop' || !newLoc) {
    status = 'idle';
    stopDrive();
    return statusEl.update('모의주행이 종료 되었습니다.');
  }

  // 초당 프레임 수 계산
  var now = new Date().getTime();
  balance += now - lastMillis; // 평균 프레임 산출을 위한 스택
  var fps = 1000 / (balance / i);

  // 화면 및 마커 이동
  drive(curLoc, geh.getHeading(curLoc, newLoc));
  marker.setPoint(curLoc);

  // 1초에 한번씩 진입(프레임 저하 방지)
  if (i % parseInt(fps) == 0) {
    map.panTo(newLoc); // 지도 패닝(프레임 저하 요소)
    var distRange = totalRange - curSpeed * i; // 남은 거리
    var speedPerHour = curSpeed * fps * 60 * 60; // 시속
    var timesLeft = new Date((distRange / speedPerHour) * 60 * 60 * 1000); // 남은 시간
    var houres = parseInt(timesLeft.getTime() / 60 / 60 /1000);
    // 메시지 업데이트
    statusEl.update([
      fps.toFixed(1) + ' FPS',
      '현재 시속 ' + Route.toKm(speedPerHour) + '로 주행 중이며',
      '도착지까지 남은 거리와 시간은 ' + Route.toKm(distRange),
      (houres > 0 ? houres + '시간 ' : '') +
      timesLeft.getMinutes() + '분 ' +
      timesLeft.getSeconds() + '초 입니다.'
    ].join(', '));
  }

  lastMillis = now;
  curLoc = newLoc;
  i++;
};

지역변수로 선언되어있지 않은 것은 상위 지역변수이거나 전역변수로 볼 수 있습니다.

길을 찾는 순서는 종전의 방식과 비슷하며, 맵에서 설정한 마커를 클릭하거나 이동하여 어스의 시점을 옮길 수 있고, 모의주행이 시작되면 어스의 화면이 3D 주행모드로 전환됩니다. 추가적으로 KML경로를 입력하면 실시간 반영됩니다. 예를 들어 aero님의 작업물인 "Daum Map On Google Earth" KML을 로드하려면 "http://aero.dnip.net/dmoge/daum_on_google2.kml"을 입력하세요. 다음의 고화질 위성사진이 오버레이 되는 것을 볼수 있습니다. 그리고 주행속도를 실시간으로 변경할 수 있게 하였으며, 한국지역 뿐만아니라 외국지역의 길찾기도 가능하게 하였습니다.(필라델피아, 뉴욕 등으로 검색해 보세요.) 이 작업을 끝으로, 지도 API로 해보고 싶었던 것들은 모두 해 보았네요. ㅎㅎ

Deprecated

* 다음의 길찾기 정보가 새롭게 갱신되어 위 데모는 더이상 작동하지 않습니다. 참고로 iRoute에서는 새롭게 변경된 다음의 길찾기 정보를 사용하고 있습니다.

Comments