Leaflet.jsは2つのポイント間の河川に沿って線を描く

Question

Leaflet.jsを使用して、いくつかの河川に沿って線を描くことを望んでいます（川の名前が技術的に変更されるようにマージします）。私は現在地図を表示するためにマップボックスのカスタムマップスタイルを使用していますが、私はマーカーからこれらの河川に沿って線を「描く」方法を失っています。

EDIT @ghybsが正しい方向（以下）で私を指摘してくれてありがとうございます。

これで、データを取得するために完全に機能するこのコードを作成しました。しかしながら。問題は、ノードが「順番に」ないことです。私はノードを川に関して整然と並べるようにしたいので、私はその線を描くことができます。現在、それらは連続していないので、ラインはどこにでもあります。

コードはRequestを使用してデータを取得しているため、呼び出しは非同期です。私はこれが発注問題につながっていると思います。

var request = require("request"); 
var parseString = require("xml2js").parseString; 
var fs = require("fs"); 

var results = []; 

request("https://www.openstreetmap.org/api/0.6/relation/5806846", function(error, response, body){ 
    // var body = fs.readFileSync("relation.xml"); 
    var total_requests = 0; 
    var completed_requests = 0; 
    parseString(body, function(err, result){ 
     var ways = result.osm.relation[0].member; 
     console.log("Initial requests: " + ways.length); 
     total_requests += ways.length; 
     for (var i = 0; i < ways.length; i++) { 
      var way = ways[i].$.ref; 
      (function(way, i){ 
       setTimeout(function(){ 
        request("https://www.openstreetmap.org/api/0.6/way/"+way, function(error, response, body){ 
         completed_requests++; 
         if (error) { 
          console.log(error); 
          console.log("https://www.openstreetmap.org/api/0.6/way/" + way + " failed"); 
         } 
         else { 
          parseString(body, function(err, result){ 
           var nodes = result.osm.way[0].nd; 
           console.log("Total requests " + + nodes.length); 
           total_requests += nodes.length; 
           for (var i2 = 0; i2 < nodes.length; i2++){ 
            var node = nodes[i2].$.ref; 
            (function(node, i){ 
             setTimeout(function(){ 
              request("https://www.openstreetmap.org/api/0.6/node/"+node, function(error, response, body){ 
               completed_requests++; 
               if (error) { 
                console.log(error); 
                console.log("https://www.openstreetmap.org/api/0.6/node/" + node + " failed"); 
               } 
               else { 
                parseString(body, function(err, result){ 
                 var lat = result.osm.node[0].$.lat; 
                 var long = result.osm.node[0].$.lon; 
                 results.push([lat, long]); 
                }); 
                console.log(total_requests + "/" + completed_requests); 
                if (completed_requests == total_requests){ 
                 console.log("Done"); 
                 console.log("Got " + results.length + " results"); 
                 fs.writeFile("little_ouse.json", JSON.stringify(results), function(err) { 
                  if (err) { 
                   return console.log(err); 
                  } 
                  console.log("The file was saved"); 
                 }); 
                } 
               } 
              }); 
             }, i * 1000); 
            })(node, i2); 
           } 
          }); 
         } 
        }); 
       }, i * 1000); 
      })(way, i) 
     } 
    }); 
}); 

Answer 1

あなたは（Mapboxスタジオはあなたのベースマップのスタイルをカスタマイズするために使用するものである）OSMデータベースからにエキスあなたの川のパスをご希望のように聞こえます。

OpenStreetMapメインウェブサイトでは、上部に大きな「エクスポート」ボタンがあります。指定したバウンディングボックスに含まれるすべてのデータ（川のパスの座標を含む）を抽出するために使用することができます。

他のツールを使用してGeoJSONに変換し、川に関連するデータのみを保持することができます（例：http://geojson.io/）。

あなたがにGeoJSONとして、あなたのデータを持っていたら、あなたは簡単に、正確にあなたが達成しようとしている何L.geoJson(myGeoJSONdata).addTo(map)