Leaflet.js在兩點之間繪製沿河的線

Question

我正在用Leaflet.js繪製沿着幾條河流的線（它們合併，所以河名在技術上發生變化）。我目前正在使用Mapbox自定義地圖樣式來顯示地圖，但我不知道如何沿着這些河流「劃」一條線，從一個標記到另一個標記。

編輯 感謝@gyybs指出我在正確的方向（下）。

我現在有這個代碼可以完美地獲取數據。然而。問題是節點不是「按順序」。我希望節點按照河流方向排列，以便我可以劃清界限。目前，因爲它們不是連續的，所以這條線全是這個地方。

該代碼正在利用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

這聽起來像你想從OSM數據庫（這是什麼Mapbox工作室使用，讓您可以自定義底圖風格），以提取您河流的路徑。

在OpenStreetMap主網站，你有一個大的「導出」按鈕在頂部。您可以使用它來提取給定邊界框中包含的所有數據，包括河流路徑的座標。

然後，您可以使用其他工具轉換爲GeoJSON並僅保留與河流相關的數據（例如http://geojson.io/）。

一旦你有你的數據作爲GeoJSON的，你可以很容易地在單張顯示用它L.geoJson(myGeoJSONdata).addTo(map)