讀取和OSM立交橋API分析JSON - 獲得折線

Question

與立交橋API我得到這個（折線）數據來自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我需要通過節點數組中的數字來獲取分配給路徑（類型：way）的座標（lat，lon以JSON） - 這些數字是座標的id。 作爲結果，我需要的是這樣的：

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

我用jQuery來打通數據的JSON文件，然後循環，所以我能得到的座標，而不是分配給該方式，也沒有在正確的像節點數組一樣。

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

任何人都有一個想法如何解決我的問題？ 是jQuery的解決方案，或者它更好地使用本地JavaScript？

... 2天后：

測試的幾個小時後，並至少嘗試，我發現我的問題的解決方案。 這裏是JavaScript代碼：

$.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); 
}); 

這裏是一個鏈接與谷歌地圖API顯示工作示例： http://www.ralf-wessels.de/test/apiv3/json/04map_osm_viele_polylines_structured.html# 我不知道這是否是解決問題的最聰明的方式，特別是如果我使用大數據。 如果有人知道更好的方法，我對此感興趣。

Answer 1

對於您的數據操作需求，我建議尋找功能庫，如Lodash。或者更好的是，拉姆達。 Lodash更受歡迎，Ramda更注重咖啡和功能組合。兩者都具有將事情分解成小而易於管理的部分的優勢。

有一點學習曲線，但學習了這樣一個工具之後，您會發現使用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) 
    } 
})();