Ich suche eine Linie entlang ein paar Flüsse zu zeichnen (sie verschmelzen so den Fluss Namen technisch ändert) mit Leaflet.js. Zurzeit verwende ich einen Mapbox-Kartenstil, um die Karte anzuzeigen, aber ich weiß nicht, wie man eine Linie entlang dieser Flüsse "zeichnet", von einem Marker zum anderen.Leaflet.js zeichnen Linie entlang der Flüsse zwischen zwei Punkten
BEARBEITEN Dank @ghybs, die mich in die richtige Richtung (unten) zeigte.
Ich habe jetzt diesen Code, der perfekt funktioniert, um die Daten zu bekommen. Jedoch. Das Problem ist, dass die Knoten nicht "in Ordnung" sind. Ich möchte, dass die Knoten in Bezug auf den Fluss in Ordnung sind, damit ich die Grenze ziehen kann. Derzeit, da sie nicht sequenziell sind, ist die Linie überall.
Der Code verwendet Request, um die Daten zu erhalten, daher sind die Aufrufe asynchron. Ich denke, das führt zum Bestellproblem.
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)
}
});
});
Was genau Sie erreichen wollen? Haben Sie die Koordinaten der Flusspfade und was werden sie oben auf der Grundkarte angezeigt? Möchten Sie die Flüsse manuell neu zeichnen? Müssen Sie die Flüsse Pfade von woanders abrufen? – ghybs
@ghybs Ich weiß, wohin die Flüsse gehen und ich möchte sie nicht manuell neu zeichnen. Mapbox _wisst_, wo die Flüsse sind, weil ich die Farbe für Wasserstraßen ändern konnte, es ist nur, wie man diese Information extrahiert, damit ich eine Linie entlang ihnen "zeichnen" kann. – developius
Versuchen Sie, mehr Inhalt (zusätzliche Zeile) in Ihre benutzerdefinierte Mapbox-Map aufzunehmen? Oder möchten Sie eine interaktive Linie hinzufügen, sobald die Karte über Leaflet angezeigt wird? – ghybs