4

Overpass 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,
    ....
    ....
    ....
    ]

Google Maps APIのようなマッピングアプリケーションでポリライン（ウェイ）を印刷するには、ノード配列の番号によってウェイ（type：way）に割り当てられた座標（JSONのlat、lon）を取得する必要があります-これらの番号は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);
});

そして、これがGoogle Maps APIで表示される実際の例へのリンクです： http ： //www.ralf-wessels.de/test/apiv3/json/04map_osm_viele_polylines_structured.html#これが最も賢い方法かどうかはわかりません特にビッグデータを扱う場合は、問題を解決します。誰かがもっと良い方法を知っているなら、私はこれに興味があります。

4

1 に答える 1

2

データ操作のニーズについては、Lodashのような関数型ライブラリを調べることをお勧めします。またはさらに良いことに、Ramda . Lodashの方がポピュラーで、Ramdaの方がカリー化や関数合成に重きを置いて便利です。どちらも、物事を小さくて管理しやすい部分に分解するという利点を共有しています。

少し学習曲線がありますが、そのようなツールを学習した後は、for ループを使用したデータ操作がどれほど苦痛であったかがわかります。

たとえば、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)
    }
})();
于 2015-06-17T13:17:25.930 に答える