d3.js
D3-Projektionen

Mercator-Projektionen

Eine Mercator-Projektion ist eine der am häufigsten erkennbaren Projektionen, die in Karten verwendet werden. Wie alle Kartenprojektionen hat es eine Verzerrung, und für einen Mercator ist die Projektion in den Polarregionen am deutlichsten. Es ist eine zylindrische Projektion, Meridiane verlaufen vertikal und Breiten verlaufen horizontal.

Die Skalierung hängt von der Größe Ihrer svg-Datei ab. In diesem Beispiel werden alle Skalen mit einer Breite von 960 Pixel und einer Breite von 450 Pixel verwendet.

Die folgende Karte zeigt eine Tissotsche Indikatrix für eine Mercator-Projektion. Jeder Kreis ist in Wirklichkeit gleich groß, aber die Projektion zeigt offensichtlich einige größer als andere:

Diese Verzerrung ist darauf zurückzuführen, dass die Projektion versucht, eine eindimensionale Dehnung der Karte zu vermeiden. Wenn Meridiane an den Nord- und Südpolen zu verschmelzen beginnen, nähert sich der Abstand zwischen ihnen null, aber die Oberfläche der Projektion ist rechteckig (nicht die Karte, obwohl sie auch rechteckig ist) und erlaubt keine Änderung der Entfernung zwischen Meridianen in der Projektion. Dies würde Merkmale entlang der x-Achse in der Nähe der Pole strecken und ihre Form verzerren. Um dem entgegenzuwirken, streckt ein Mercator sowohl die y-Achse als auch eine Annäherung an die Pole, wodurch die Indikatoren kreisförmig werden.

Die Projektion für die Karte oben ist im Wesentlichen die Standardprojektion von Mercator, die etwas nach oben verschoben wurde:

var projection = d3.geoMercator()
    .scale(155)
    .center([0,40]) // Pan north 40 degrees
    .translate([width/2,height/2]);

Um die Projektion auf einen bestimmten Punkt mit einem bekannten Breitengrad und einem bekannten Längengrad zu zentrieren, können Sie diesen Punkt leicht verschieben, indem Sie den Mittelpunkt angeben:

var projection = d3.geoMercator()
    .center([longitude,latitude])

Dadurch wird auf der projizierten Fläche (die der obigen Karte ähnelt) zu dieser Funktion geschwenkt (aber nicht gezoomt).

Maßstäbe müssen auf das interessierende Gebiet zugeschnitten sein, größere Zahlen entsprechen größeren Merkmalen (größeres Maß an Vergrößerung), kleinere Zahlen das Gegenteil. Das Herauszoomen kann eine gute Möglichkeit sein, um sich zu orientieren, wo sich Ihre Features relativ zu dem Punkt befinden, auf den Sie zentriert sind - falls Sie Probleme haben, sie zu finden.

Aufgrund der Natur einer Mercator-Projektion eignen sich Bereiche in Äquatornähe oder in niedrigen Breiten mit dieser Art von Projektion am besten, während polare Bereiche stark verzerrt sein können. Die Verzerrung verläuft entlang jeder horizontalen Linie, sodass Bereiche, die breit, aber nicht groß sind, ebenfalls gut sein können, während Bereiche, die einen großen Unterschied zwischen den nördlichen und südlichen Extremen aufweisen, eine stärkere visuelle Verzerrung aufweisen.

Für Indien könnten wir beispielsweise Folgendes verwenden:

var projection = d3.geoMercator()
    .scale(800)
    .center([77,21])
    .translate([width/2,height/2]);

Das gibt uns (wieder mit einer Tissot-Indikatrix, um Verzerrung zu zeigen):

Dies hat eine geringe Verzerrung, aber die Kreise haben im Wesentlichen die gleiche Größe (Sie können eine größere Überlappung zwischen den beiden oberen Reihen als den beiden unteren Reihen sehen, sodass Verzerrungen sichtbar sind). Insgesamt zeigt die Karte eine für Indien bekannte Form.

Die Verzerrung im Bereich ist nicht linear, sie ist in Richtung der Pole stark übertrieben, so dass Kanada mit ziemlich weit auseinander liegenden nördlichen und südlichen Extremen und einer Position nahe an den Polen bedeutet, dass Verzerrung unhaltbar sein kann:

var projection = d3.geoMercator()
    .scale(225)
    .center([-95,69.75])
    .translate([width/2,height/2]);

Diese Projektion lässt Grönland so groß aussehen wie Kanada, obwohl Kanada in Wirklichkeit fast fünfmal so groß ist wie Grönland. Dies liegt einfach daran, dass Grönland weiter nördlich als der Großteil Kanadas liegt (Sorry Ontario, ich scheine einige Ihrer südlichen Extremitäten abgeschnitten zu haben).

Da die y-Achse in einem Mercator in der Nähe der Pole stark gestreckt ist, wird für diese Projektion ein Punkt nördlich des geographischen Zentrums von Kanada verwendet. Wenn Sie mit großen Breiten arbeiten, müssen Sie möglicherweise Ihren Zentrierpunkt anpassen, um diese Dehnung zu berücksichtigen.

Wenn Sie eine Mercator-Projektion für polare Bereiche benötigen, können Sie die Verzerrung minimieren und trotzdem eine Mercator-Projektion verwenden. Sie können dies erreichen, indem Sie den Globus drehen. Wenn Sie die x-Achse am Standard-Mercator drehen, scheinen Sie nach links oder rechts zu schwenken (Sie drehen einfach den Globus in dem Zylinder, auf den Sie projizieren). Wenn Sie jedoch die y-Achse des Standard-Mercators ändern, können Sie dies drehen Sie die Erde seitwärts oder in einen anderen Winkel. Hier ist ein Mercator mit einer Rotation von -90 Grad:

var projection = d3.geoMercator()
.scale(155)
.rotate([0,-90]);
.translate([width/2,height/2]);

Die Indikatrixpunkte befinden sich an den gleichen Stellen wie die erste Karte oben. Die Verzerrung nimmt immer mehr zu, je höher der obere oder untere Rand der Karte ist. Auf diese Weise würde eine Mercator-Standardkarte erscheinen, wenn sich die Erde bei [0,0] um einen Nordpol und bei [180,0] um einen Südpol drehen würde. Durch die Rotation wurde der Zylinder, auf den wir projizieren, um 90 Grad gegenüber gedreht die Pole. Beachten Sie, dass die Pole keine unhaltbaren Verzerrungen mehr aufweisen. Dies ist eine Alternative für das Projizieren von Bereichen in Polnähe ohne zu starke Verzerrung der Fläche.

Wenn wir wieder Kanada als Beispiel verwenden, können wir die Karte auf eine Mittelpunktskoordinate drehen, wodurch Verzerrungen im Bereich minimiert werden. Dazu können wir wieder zu einem Zentrierpunkt drehen, dies erfordert jedoch einen zusätzlichen Schritt. Mit der Zentrierung schwenken wir zu einem Merkmal, mit der Drehung bewegen wir die Erde unter uns, also brauchen wir das Negativ unserer Zentrierkoordinate:

var projection = d3.geoMercator()
    .scale(500)
    .rotate([96,-64.15])
    .translate([width/2,height/2]);    

Beachten Sie, dass die Tissot-Indikatrix jetzt eine geringe Verzerrung im Bereich aufweist. Der Skalierungsfaktor ist auch viel größer als zuvor, da sich dieses Kanada jetzt am Ursprung der Projektion befindet und entlang der Kartenmitte kleiner sind als oben oder unten (siehe erste Indikatrix oben). Wir müssen nicht zentrieren, da der Mittelpunkt oder Ursprung dieser Projektion bei [-96,64.15] liegt. Die Zentrierung würde uns von diesem Punkt entfernen.

Albers-Projektionen

Eine Albers-Projektion oder besser eine konische Albers-Fläche mit gleichem Flächeninhalt ist eine übliche konische Projektion und eine offizielle Projektion einer Reihe von Ländern und Organisationen wie dem US-amerikanischen Volkszählungsbüro und der Provinz British Columbia in Kanada. Die Fläche bleibt auf Kosten anderer Aspekte der Karte wie Form, Winkel und Entfernung erhalten.

Allgemeine Eigenschaften

Die allgemeine Transformation wird in folgendem GIF erfasst:

(Basierend auf Mike Bostocks Block )

Die Albers-Projektion minimiert Verzerrungen um zwei Standardparallelen. Diese Parallelen stellen dar, wo die konische Projektion die Erdoberfläche schneidet.

In diesem Beispiel werden alle Maßstäbe mit einer Breite von 960 Pixeln und einer Breite von 450 Pixeln verwendet, wobei sich der Maßstab mit diesen Abmessungen ändert

Die folgende Karte zeigt eine Tissotsche Indikatrix für eine Albers-Projektion mit Standardparallelen von 10 und 20 Grad Nord. Jeder Kreis hat in Wirklichkeit die gleiche Größe und Form, aber die Kartenprojektion verzerrt diese in der Form (nicht in der Fläche). Beachten Sie, dass bei ungefähr 10 bis 20 Grad Nord die Indikatoren runder sind als anderswo:

Dies wurde mit der folgenden Projektion erstellt:

var projection = d3.geoAlbers()
    .scale(120)
    .center([0,0])
    .rotate([0,0])
    .parallels([10,20])
    .translate([width/2,height/2]);

Wenn wir Parallelen verwenden, die in höheren Lagen zunehmen, nimmt der Bogengrad in der Projektion zu. Die folgenden Bilder verwenden die Parallelen von 50 und 60 Grad Nord:

var projection = d3.geoAlbers()
    .scale(120)
    .center([0,70]) // shifted up so that the projection is more visible
    .rotate([0,0])
    .parallels([40,50])
    .translate([width/2,height/2]);

Wenn wir negative (südliche) Parallelen hatten, sollte die Karte nach unten konkav sein anstatt nach oben. Wenn eine Parallele nördlich und eine südlich ist, ist die Karte in Richtung der höheren / extremeren Parallele konkav. Wenn sie vom Äquator gleich weit entfernt sind, ist die Karte in keiner Richtung konkav.

Auswahl von Parallelen

Da Parallelen die Bereiche mit der geringsten Verzerrung markieren, sollten sie auf der Grundlage Ihres Interessengebiets ausgewählt werden. Wenn sich der Interessenbereich von 10 Grad nach Norden bis 20 Grad nach Norden erstreckt, werden durch die Auswahl von Parallelen von 13 und 17 Verzerrungen auf der gesamten Karte minimiert (da die Verzerrung auf beiden Seiten dieser Parallelen minimiert wird).

Parallelen sollten nicht die extremen nördlichen und südlichen Grenzen Ihres Interessengebiets sein. Parallelen können beide den gleichen Wert haben, wenn die Projektion nur einmal die Erdoberfläche schneiden soll.

Projektionsreferenzen und Definitionen enthalten parallele Daten, mit denen Sie standardisierte Projektionen erstellen können.

Zentrieren und Drehen

Nach der Auswahl von Parallelen muss die Karte so positioniert werden, dass der interessierende Bereich korrekt ausgerichtet ist. Wenn Sie nur projection.center([x,y]) , wird die Karte einfach zum ausgewählten Punkt verschoben, und es erfolgt keine weitere Transformation. Wenn das Zielgebiet Russland ist, ist das Verschieben möglicherweise nicht ideal:

var projection = d3.geoAlbers()
    .scale(120)
    .center([0,50]) // Shifted up so the projection is more visible
    .rotate([0,0])
    .parallels([50,60])
    .translate([width/2,height/2]);

Der zentrale Meridian einer Albers-Projektion ist vertikal und wir müssen die Erde unter der Projektion drehen, um den zentralen Meridian zu ändern. Rotation für eine Alber-Projektion ist die Methode zum Zentrieren einer Projektion auf der x-Achse (oder nach Längengrad). Und da sich die Erde unter der Projektion dreht, verwenden wir das Negativ der Länge, die wir zentrieren wollen. Für Russland könnte dies etwa 100 Grad Ost sein, also drehen wir den Globus um 100 Grad in die andere Richtung.

var projection = d3.geoAlbers()
    .scale(120)
    .center([0,60])
    .rotate([-100,0])
    .parallels([50,60])

Jetzt können wir nach oben und unten schwenken, und die Merkmale entlang und in der Nähe des Mittelmeridians werden gerade sein. Wenn Sie .center() auf der x-Achse liegen, ist Ihre Zentrierung relativ zum mittleren Meridian, der durch die Rotation festgelegt wird . Für Russland möchten wir vielleicht ein gutes Stück nach Norden schwenken und ein wenig vergrößern:

var projection = d3.geoAlbers()
    .scale(500)
    .center([0,65])
    .rotate([-100,0])
    .parallels([50,60])

Bei einem Feature wie Russland bedeutet der Bogen der Karte, dass sich die weiten Ränder des Landes um den Pol herum erstrecken, was bedeutet, dass der Zentrierpunkt möglicherweise nicht der Schwerpunkt Ihres Features ist, da Sie möglicherweise mehr zum Panorama schwenken müssen Norden oder Süden als üblich.

Mit der Tissots Indicatrix können wir eine Abflachung in der Nähe der Stange selbst feststellen, aber diese Form ist im gesamten Interessengebiet ziemlich zutreffend.

Standardparameter

Im Gegensatz zu den meisten anderen Projektionen verfügt die Projektion d3.geoAlbers über Standardparameter, die nicht .rotate ([0,0]) und .center ([0,0]) sind. Die Standardprojektion wird für die Vereinigten Staaten zentriert und gedreht. Dies gilt auch für .parallels() . Wenn einer dieser Werte nicht gesetzt ist, werden die Werte standardmäßig nicht Null.

Zusammenfassung

Eine Albers-Projektion wird im Allgemeinen mit den folgenden Parametern festgelegt:

var projection = d3.geoAlbers()
    .rotate([-x,0])
    .center([0,y])
    .parallels([a,b]);

Wo a und b die beiden Parallelen sind.

Azimutale äquidistante Projektionen

Allgemeine Eigenschaften:

Eine azimutale äquidistante Projektion wird am besten bei Verwendung in Polargebieten erkannt. Es wird im Emblem der UNO verwendet . Vom Mittelpunkt aus bleiben Winkel und Abstand erhalten. Um dies zu erreichen, verzerrt die Projektion die Form und den Bereich, insbesondere wenn man sich weiter vom Zentrum entfernt. Ebenso sind Abstand und Winkel an anderen Stellen als der Mitte nicht wahr. Die Projektion fällt in die azimutale Kategorie (anstatt zylindrisch (Mercator) oder konisch (Albers). Diese Projektion projiziert die Erde als Scheibe:

(Basierend auf Mike Bostocks Block . Ignoriere das dreieckige Artefakt oben auf dem Bild, sobald es ausgeklappt ist, zentriert am Nordpol. )

Die Skalierung hängt von der Größe Ihrer SVG-Datei ab. In diesem Beispiel sind alle verwendeten Skalen 960 Pixel breit und 450 Pixel hoch (und der Bildschirm wird bei Bedarf für ein Quadrat abgeschnitten), sofern nichts anderes angegeben ist.

Die folgende Karte zeigt eine Tissotsche Indikatrix für eine azimutale äquidistante Projektion:

Dies wurde mit der folgenden Projektion erstellt:

var projection = d3.geoAzimuthalEquidistant()
   .scale(70)
   .center([0,0])
   .rotate([0,0])
   .translate([width/2,height/2]);

Zentrieren und Drehen:

Durch das Zentrieren wird eine Karte verschoben, die Gesamtzusammensetzung jedoch nicht geändert. Wenn ein azimutaler Äquidistant auf dem Nordpol zentriert wird, während andere Parameter unverändert bleiben oder auf Null stehen, wird der Nordpol in die Mitte des Bildschirms verschoben. Andernfalls wird die Karte oben nicht geändert.

Um einen Bereich richtig zu zentrieren, müssen Sie ihn drehen. Wie bei jeder Drehung in d3 ist es am besten, die Erde unter der Projektion zu bewegen. Wenn Sie also die Erde um -90 Grad unter der Karte auf der y-Achse drehen, wird der Nordpol tatsächlich in der Mitte platziert:

var projection = d3.geoAzimuthalEquidistant()
   .scale(70)
   .center([0,0])
   .rotate([0,-90])
   .translate([width/2,height/2]);

Ebenso verhält sich die Drehung auf der x-Achse ähnlich. Wenn Sie zum Beispiel die Karte so drehen möchten, dass die kanadische Arktis aufrecht steht und sich auf den Nordpol zentriert, können Sie eine Projektion wie die folgende verwenden:

var projection = d3.geoAzimuthalEquidistant()
    .scale(400)
    .center([0,0])
    .rotate([100,-90])
    .translate([width/2,height/2]);

Diese Karte verwendete ein 600x600-SVG

Insgesamt macht diese Einfachheit einen Azimut-Äquidistanten zu einer einfacheren Projektion, verwenden Sie einfach die Rotation. Eine typische Projektion sieht folgendermaßen aus:

var projection = d3.geoProjection()
   .center([0,0])
   .rotate([-x,-y])
   .scale(k)
   .translate([width/2,height/2]);