읽고 OSM 육교 API에서 JSON을 분석 - 얻을 폴리 라인 육교 API와

Question

I 얻을 OSM에서 JSON 파일로이 (폴리 라인) 데이터 : 구글과 같은 매핑 응용 프로그램에서 폴리 라인 (방법을)로 인쇄 할

{ 
    "version": 0.6, 
    "generator": "Overpass API", 
    "elements": [ 
{ 
    "type": "node", 
    "id": 308240514, 
    "lat": 52.7074546, 
    "lon": 7.1369361 
}, 
{ 
    "type": "node", 
    "id": 308729130, 
    "lat": 52.6934662, 
    "lon": 7.1353250 
}, 
...... 
....... 
....... 
{ 
    "type": "way", 
    "id": 99421713, 
    "nodes": [ 
    1149813380, 
    2103522316, 
    2103522207, 
    2103522202, 
    2103522201, 
    ..... 
    .... 
    ], 
     "tags": { 
    "admin_level": "2", 
    ...... 
    } 
}, 
{ 
    "type": "way", 
    "id": 99421718, 
    "nodes": [ 
    647317213, 
    2103495916, 
    2103495906, 
    2103495902, 
    2103495901, 
    .... 
    .... 
    .... 
    ] 

Maps API 노드 배열의 숫자로 웨이 (유형 : 방식)에 지정된 좌표 (JSON의 lat, lon)를 가져와야합니다.이 숫자는 좌표의 ID입니다. 그 결과 나는 이런 식으로 뭔가가 필요합니다 내가 데이터를 통해 JSON 파일 다음 루프를 얻기 위해 jQuery를 사용

"coords":{ 
"way1" : [(37.772323, -122.214897), (21.291982, -157.821856),(-18.142599, 178.431),(-27.46758, 153.027892)], 
"way2" : [(37.772323, -122.214897),...........] 

를, 그래서 오른쪽되지도 좌표를 얻을 수 있지만, 방법에 할당되지 않은 및 수 노드 배열과 같은 순서.

$.getJSON(url, function(data) { 
    $.each(data.elements, function(i,data){ 
     var coords = (data.lat,data.lon); 
     ......... 

누구든지 내 문제를 해결하는 방법을 알고 있습니까? 이에 대한 jquery 솔루션이 있거나 기본 자바 스크립트를 사용하는 것이 더 낫습니다. 나중에

... 이일 :

시험의 몇 시간 후

및 적어도 노력은 내 문제에 대한 해결책을 발견했다. 가 여기에 자바 스크립트 코드입니다 :

$.getJSON('test.js', function(data) { 

var ways = []; 
var way_nodes = []; 
var inhalt = []; 

for (var x in data.elements) { 
    if (data.elements[x].type == "way") { 
     var way_tmp = data.elements[x].nodes; 
     ways.push(way_tmp); 
    } 
    if (data.elements[x].type == "node") { 
     inhalt = data.elements; 
    } 
} 

for (var h in ways) { 
    var mypath = []; 
    way_nodes = ways[h]; 
    for (var k in way_nodes) { 
     for (var x in inhalt) { 
      if (way_nodes[k] == inhalt[x].id) { 
       var coords = new google.maps.LatLng(inhalt[x].lat,inhalt[x].lon); 
       mypath.push(coords); 
      } 
     } 
    } 

    var polyline = new google.maps.Polyline({ 
     path: mypath, 
     strokeColor: "#FF0000", 
     strokeOpacity: 0.6, 
     strokeWeight: 5 
    }); 

    var poly_points = polyline.getPath(); 
    for (var i = 0; i < poly_points.length; i++) { 
     bounds.extend(poly_points.getAt(i)); 
    } 
    polyline.setMap(map); 
} 
    map.fitBounds(bounds); 
}); 

그리고 여기에 Google지도 API를 표시하는 작업 예제에 대한 링크입니다 :이 문제를 해결하는 가장 현명한 방법입니다 경우 http://www.ralf-wessels.de/test/apiv3/json/04map_osm_viele_polylines_structured.html# 는 나도 몰라, 특별히 빅 데이터로 작업하는 경우 누군가가 더 좋은 방법을 알고 있다면, 저는 이것에 흥미가 있습니다.

Answer 1

데이터 조작이 필요하면 Lodash과 같은 기능 라이브러리를 살펴 보는 것이 좋습니다. 또는 더 나은 아직, Ramda. Lodash가 더 인기가 있으며, Ramada는 커링 및 기능 구성에 중점을두고 더욱 편리합니다. 두 가지 모두 작고 쉽게 관리 할 수있는 부분으로 문제를 해결할 수있는 장점이 있습니다.

약간의 학습 곡선이 있지만, 그런 도구를 배우고 나면 for-loops로 얼마나 많은 고통 데이터 조작이 있었는지 확인할 수 있습니다.

Ramda는 함께 예를 들어, 동일한 기능은 다음과 같이 달성 될 수있다 :

var parseWaysFromResponse = (function() { 
    // function [{id:1, key1:val1 ...}, {id:2, key2:val2}] 
    // -> {1:{key1:val1 ...}, 2:{key2:val2 ...}} 
    var generateIdToNodeMap = R.compose(
     R.mapObj(R.head), 
     R.groupBy(R.prop('id')) 
    ); 

    // Filter array of objects based on key "type" 
    var elementTypeIs = function(typeVal) { 
     return R.propEq('type', typeVal); 
    } 

    // Create {id:{values}} from the apiResponse elements 
    var getNodes = R.compose(
     generateIdToNodeMap, 
     R.filter(elementTypeIs('node')) 
    ); 

    // Api elements -> [[way1 node-id1, id2, ...], [way 2 node-id1, ...]] 
    var getWayNodes = R.compose(
     R.pluck('nodes'), 
     R.filter(elementTypeIs('way')) 
    ); 

    // Map generated by getNodes, node id -> [lat, lon] of given node id 
    var linkNodeIdToCoords = R.curry(function (nodes, id) { 
     return R.props(['lat', 'lon'], nodes[id]) 
    }); 

    return function (apiResponse) { 
     var nodes = getNodes(apiResponse.elements); 
     var getAllWays = R.compose(
      R.map(R.map(linkNodeIdToCoords(nodes))), 
      getWayNodes 
     ); 
     return getAllWays(apiResponse.elements) 
    } 
})();