💭 TMI

우리의 목표는 휠체어 사용자의 경로. 이를 위해 도보 길찾기 API가 필요하다.

• 카카오맵 : 도보 길찾기 지원 X
• 네이버맵 : 도보 길찾기 지원 X
• 구글맵 : 한국지도 지원 X (이건 진짜 황당)

이런 상황에서 아이디어를 돌려야하나 자동차 길찾기로 해야하나 했는데 TMAP에서 유일하게 도보 길찾기 API를 제공하고 있었다 !!!!!!!!!!!!!!!!

기쁨도 잠시...TMAP API는 래퍼런스가 거의 없어서 공식문서만을 의지해야한다...
하지만 해냈죠? 래퍼런스 하나 추가요 ~

🗺️ 지도 생성

  const CURRENT_MAP = new window.Tmapv2.Map('map_div', {
    center: new window.Tmapv2.LatLng(37.5, 126.9), // 지도 초기 좌표
    width: SCREEN_SIZE.WIDTH,
    height: '566px',
    zoom: 8
  });

scroll, zoom 관련 여러 옵션들을 추가로 줄 수 있다.

📌 마커 생성

const newMarker = new window.Tmapv2.Marker({
      position: new window.Tmapv2.LatLng(data.latitude, data.longitude),
      icon: `/images/${data.type}.svg`,
      iconSize: new window.Tmapv2.Size(24, 38),
      map: CURRENT_MAP
});

지도에 마커를 찍을 수 있다. 마커로 사용할 icon과 iconSize를 지정할 수 있고, animation 또는 title 등을 옵션으로 줄 수 있다.

🔎 마커에 맞게 zoom 설정

const latlngBounds = new window.Tmapv2.LatLngBounds(
    new window.Tmapv2.LatLng(latitude, longitude)
);

markerData.map((data, idx) => {
    latlngBounds.extend(new window.Tmapv2.LatLng(data.latitude, data.longitude));
});

const margin = {
    left: 20,
    top: 20,
    right: 20,
    bottom: 20
};
CURRENT_MAP.fitBounds(latlngBounds, margin);

Tmapv2.LatLngBounds 로 마커를 포함하는 bound를 구하고, bound와 margin을 함께 넣어주며 이에 맞게 지도의 zoom level이 조정된다.

🚶 도보 길찾기

앞에서 지도 설정하고 찍은 마커들을 기준으로 길찾기를 진행한다.
출발지와 도착지, 경유지로 이뤄지며 경유지는 최대 5개이고 초과하면 응답이 오지 않는다.

🚶 API SPEC

const requestData = {
    startX: departure.longitude,
    startY: departure.latitude,
    endX: arrival.longitude,
    endY: arrival.latitude,
    passList: '경도,위도_경도,위도_경도,위도',
    reqCoordType: 'WGS84GEO',
    resCoordType: 'EPSG3857',
    startName: '출발지',
    endName: '도착지'
  };

const headers = {
    appKey: APP_KEY
};

도보 길찾기 API를 요청할건데 body에 requestData를 넣어줄거고 headers에 발급받았던 TMAP API KEY를 넣어줄 것이다.
처음에 위도와 경도를 반대로 넣어서 값이 엄청 이상하게 나왔었다ㅋㅋㅋㅋㅋㅋ그래서 아 망했다 생각했는데 알고보니 경도, 위도 순서.......당연히 위도, 경도 순서인줄^^

🚶 API 요청

await axios.post('https://apis.openapi.sk.com/tmap/routes/pedestrian? \
version=1&format=json&callback=result',
                 requestData,
                 { headers: headers }
).then((response) => {
  const resultData = response.data.features;
  
  const drawInfoArr = [];

    for (let i in resultData) {
      const geometry = resultData[i].geometry;
      if (geometry.type == 'LineString') {
        for (let j in geometry.coordinates) {
              const latlng = new window.Tmapv2.Point(
                    geometry.coordinates[j][0],
                    geometry.coordinates[j][1]
              );
            const convertPoint = new window.Tmapv2.Projection.convertEPSG3857ToWGS84GEO(latlng);
            const convertChange = new window.Tmapv2.LatLng(convertPoint._lat, convertPoint._lng);
            drawInfoArr.push(convertChange);
          }
        }
      }

      //for문 종료
      drawLine(drawInfoArr);

      function drawLine(arrPoint: any[]) {
        new window.Tmapv2.Polyline({
          path: arrPoint,
          strokeColor: COLOR.BLUE1,
          strokeWeight: 6,
          map: CURRENT_MAP
        });
}

응답값으로 받은 좌표값을 포인트 객체로 변환한다.
이를 지도상에 그릴 때 사용하는 좌표계로 변환하여 저장한다.
Tmapv2.Polyline 함수를 이용하여 원하는 도보 길찾기 경로를 찾을 수 있다.
이렇게 하면 지도 상에 원하는 대로 라인이 그려진다.

🧭 네비게이션

나는 여기서 추가적으로 네비게이션을 구현해야 했다 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
솔직히 막막했다 네비게이션은 API도 없고 그냥 답이 없었다

그래서 혹시 몰라서 response를 뒤져봤는데 description이랑 turn point? 같은 게 있었다. 근데 완벽한 문장은 아니여서 그럴듯하게 파싱한다음 geolocation API를 활용하여 내 위치와 경로 사이의 좌표거리를 계산해서 네비게이션을 구현하였다.

지금 말로하면 쉬워보이지만 진짜 막막했는데 나름대로 잘 구현이 된 것 같아서 기분이 좋았다. 이걸로 도보 길찾기를 이용하는 FE개발자 화이팅했으면 좋겠습니당🔥

TMAP API 공식문서