D3.js zeichnet GeoJSON falsch: Das Problem der Windungsreihenfolge

Beim Versuch, russische Regionen mithilfe von GeoJSON-Daten zu visualisieren, sind Programmierer auf ein Problem gestoßen Dabei zeichnet D3.js ein einzelnes schwarzes Rechteck anstelle der gewünschten Kartenumrisse. Diese Diskrepanz ergibt sich aus einem Problem mit der Wickelreihenfolge der Koordinaten in der GeoJSON-Datei.

Wicklungsreihenfolge verstehen

GeoJSON-Koordinaten können entweder im Uhrzeigersinn oder gegen den Uhrzeigersinn angeordnet werden , das die Innenseite oder Außenseite einer Form darstellt. Die meisten Tools und Validatoren ignorieren diese Reihenfolge, aber D3.js verwendet ellipsoide Mathematik, die eine korrekte Wicklung erfordert, um die Erstellung invertierter Polygone zu vermeiden, die den gesamten Globus abdecken.

Identifizierung des Problems

Bei der Betrachtung der SVG-Pfade wird deutlich, dass einige Pfade genau gezeichnet sind, während andere den gesamten Planeten bis auf den vorgesehenen Raum abdecken. Dies liegt daran, dass die Daten eine Kombination aus Drehungen im Uhrzeigersinn und gegen den Uhrzeigersinn enthalten, was dazu führt, dass D3.js das invertierte Polygon als alles auf dem Planeten behandelt, was nicht die Zielregion ist.

Lösung des Problems

Um dieses Problem zu beheben, müssen die Koordinaten neu angeordnet werden. Eine praktische Lösung ist die Verwendung der turf.js-Bibliothek:

var fixed = features.map(function(feature) {
    return turf.rewind(feature,{reverse:true});
});

Dadurch wird jedes Polygon zurückgespult, um der richtigen Wickelreihenfolge zu folgen, wie in der GeoJSON-Spezifikation angegeben. Allerdings verwendet D3.js die umgekehrte Wickelreihenfolge, daher ist der Reverse-Parameter auf true gesetzt.

Anpassen der Kartenansicht

Nach dem Festlegen der Wickelreihenfolge folgen weitere Anpassungen können vorgenommen werden, um das Erscheinungsbild der Karte zu verbessern. Durch Hinzufügen einer fitSize-Methode zur Projektion kann die Karte skaliert und übersetzt werden, um eine passendere Ansicht zu erhalten.