OSRM json 파싱

필요한 데이터는 legs 전체 point보다 waypoint, 꺾이는 좌표다.

waypoint만 네이버 api로 전달하여 지도 위에서 선을 긋을 것이기 때문

 

 

크게 보면 key값이 code, routes, waypoints 세 개다.

 

여기서 필요한 건

1. routes > distance, duratiion

2. waypoints > distance(애매), location(좌표)

 

정도인 것 같다.

 

· 단위

distance: m(미터)

duration: second(초)

 

 

그런데 routes의 distance와 waypoints의 distance는 같은 것일까?

Documetation을 보자...

 

 

---

OSRM API Documentation

 

waypoint는 원지점으로부터 절단된 지점의 거리(papago). 여기서 말하는 원지점은 출발점 또는 도착점을 뜻하는 듯 하다.

나는 의도적으로 직선거리를 골라서 waypoint가 두 개 밖에 나오지 않았다. waypoint 2개가 출발점 근처, 직선의 시작점과 도착점 근처, 직선의 끝지점이라고 봐도 무방할 듯 하다

 

+) 수정

waypoint가 출발점 또는 도착점이 맞다.

그러나 찾고자 하는 것은 꺾이는 좌표(=중간좌표들)이다. 이는 steps 파라미터이다.

 

---

 

다시 돌아와서

아래와 같은 json 파일이 있다고 했을 때, distance의 522.1을 꺼내고 싶다면,

{
  "code": "Ok",
  "routes": [{
  	"distance": 522.1,
    	"duration": 375.9
    ]}
}

routes[0].distance 로 꺼내오면 된다.

 

 

 

json 데이터 가지고 와서 파싱하고 html에 뿌리는 코드

let osrm_json = JSON.parse(JSON.stringify(json));  // 원본 응답 data

// routes parsing
document.getElementById('totalDistance').innerHTML = '총 거리: ' + osrm_json.routes[0].distance + 'm';
document.getElementById('totalDuration').innerHTML = '총 소요시간: ' + osrm_json.routes[0].duration + '초';

// waypoint parsing
// waypoint 개수만큼 반복문 돌려야 함
let location = "";
let index;

for (index = 1; index <= osrm_json.waypoints.length; index++) {
    location += "<tr>"
    location += "    <td>" + index + "</td>"
    location += "    <td>" + osrm_json.waypoints[index-1].location + "</td>"
    location += "</tr>"

    $('.waypoints').append(location);
    location = ""

javascript 반복문, html에 json 소스 뿌리기 등..

to be continue...

 

 

 

 

 

 

참고 글

https://velog.io/@lzhxxn/JSON-Parsing%ED%8C%8C%EC%8B%B1%EC%9D%B4%EB%9E%80