Question

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

修改感谢@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

听起来你想从OSM数据库中提取你的河流路径（这是Mapbox工作室用来定制你的底图样式的。）

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

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

将数据作为GeoJSON后，您可以使用$sb = { [ADSI]$Admin = "WinNT://$env:COMPUTERNAME/$env:USERNAME" $Admin.SetPassword("Users new password") }

在Leaflet上轻松显示数据

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

1 个答案: