팀 프로젝트

problems

두 지점의 평균이 지구 반대편이다

<상황 파악>

천신만고 끝에 구글 지도를 리액트 컴포넌트로 만들고 원하는 지점에 핀을 찍고 두 핀을 Polyline으로 연결하는것 까지 성공했다.

문제가 발생한 부분은 지도의 초기 center 설정. 처음에 출발지인 한국을 center로 해두었던 것을 두 pin사이의 평균 지점으로 설정하는 것이 더 보기 좋을것 같아서 아래와 같은 코드를 작성했다.

const averageLatLng = {
        lat: (departure.lat + destLatLng.lat) / 2,
        lng: (departure.lng + destLatLng.lng) / 2,
    };

간단하게 두 지점의 위도와 경도를 각각 평균을 내서 새로운 위도 경도를 얻는 방식이다.

하지만 도착지가 미국일때 전혀 예상하지 못한 문제가 발생했다.

바로 위 와 같이 지도 center 지점이 설정되는것.

산술적으로 계산한 평균 경도와 polyline이 대변하는 비행경로(실제 비행경로가 어떤지는 모른다)의 중간 지점이 반대로 찍히고 있는 것이다.

어떤 일이 생기고 있는건지 살펴보니 한국의 경도는 대략 127, 마이애미의 경도는 대략 -80이라서 그 평균값인 경도 23 언저리가 구글맵의 center로 설정되고 있었다.

구글 맵 api에서는 본초 자오선을 기준으로 동쪽은 0~+180, 서쪽은 0~-180 으로 경도가 설정되고 한국과 마이애미를 잇는 polyline이 본초자오선의 반대편에 존재하는 날짜 변경선을 지나면서 발생하는 문제라고 의심 되는 상황.

<문제 해결>

내가 원하는 것은 마이애미(를 비롯한 아메리카 대륙)가 도착지일때 구글 맵의 center 기준을 태평양 언저리로 옮겨놓는것. 즉, center 기준 경도롤 지구 반대편으로 옮기는 것이다.

현재 이 문제는 날짜 변경선을 지날때만 관찰되므로 아메리카 대륙을 제외한 아프리카, 유라시아, 오세아니아 지역에선 문제가 없다.

따라서 아메리카대륙을 지날때 평균 경도로 찍히는 범위를 관찰하고 averageLatLng 에서 경도가 해당 범위에 들어갔을 경우에만 경도에 +180을 해서 지구 반대편을 찍도록 한다.

    const averageLatLng = {
        lat: (departure.lat + destLatLng.lat) / 2,
        lng: (departure.lng + destLatLng.lng) / 2,
    };
    if (averageLatLng.lng > -10 && averageLatLng.lng < 40) {
        averageLatLng.lng += 180;
    }

코드를 위와 같이 수정 한 이후 center가 의도대로 설정된 모습.