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)