Leaflet.js 在两点之间沿河流画线

Question

我想沿着 Leaflet.js 沿着几条河流划一条线（它们会合并，因此河流名称在技术上会发生变化）。我目前正在使用 Mapbox 自定义地图样式来显示地图，但我不知道如何 "draw" 沿着这些河流，从一个标记到另一个标记。

编辑 感谢@ghybs 为我指明了正确的方向（如下）。

我现在有了这段代码，非常适合获取数据。然而。问题是节点不是 "in order"。我希望关于河流的节点是有序的，这样我就可以画线了。目前，因为它们不是连续的，所以到处都是线。

代码正在利用 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 studio 使用它来让您自定义底图样式）。

在 OpenStreetMap 主网站上，顶部有一个大 "Export" 按钮。您可以使用它来提取给定边界框中包含的所有数据，包括河流路径的坐标。

然后您可以使用其他工具转换为 GeoJSON 并仅保留与您的河流相关的数据（例如 http://geojson.io/）。

一旦你有了 GeoJSON 格式的数据，你就可以使用 L.geoJson(myGeoJSONdata).addTo(map)

轻松地在 Leaflet 上显示它