d3.js
Projekcje D3

Prognozy Mercator

Projekcja Mercator to jedna z najbardziej rozpoznawalnych projekcji wykorzystywanych w mapach. Podobnie jak wszystkie odwzorowania mapy ma zniekształcenie, a w przypadku Mercatora jest to najbardziej zauważalne w regionach polarnych. Jest to projekcja cylindryczna, południki biegną pionowo, a szerokości geograficzne biegną poziomo.

Skala zależy od rozmiaru pliku svg, w tym przykładzie wszystkie używane skale są z svg o szerokości 960 pikseli i wysokości 450 pikseli.

Poniższa mapa pokazuje wskaźnik Tissota dla rzutu Mercatora, każde koło jest w rzeczywistości tego samego rozmiaru, ale rzut oczywiście pokazuje niektóre jako większe niż inne:

To zniekształcenie jest spowodowane tym, że rzut próbuje uniknąć jednowymiarowego rozciągnięcia mapy. Gdy południki zaczynają się łączyć na biegunach północnym i południowym, odległość między nimi zaczyna zbliżać się do zera, ale powierzchnia rzutu jest prostokątna (nie mapa, choć również prostokątna) i nie pozwala na zmianę odległości między południkami w rzucie. Spowodowałoby to rozciągnięcie elementów wzdłuż osi x w pobliżu biegunów, zniekształcając ich kształt. Aby temu przeciwdziałać, Mercator rozciąga oś y, a także zbliża się do biegunów, co powoduje, że wskaźniki są okrągłe.

Projekcja powyższej mapy jest zasadniczo domyślną projekcją Mercatora nieco przesuniętą w górę:

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

Aby wyśrodkować projekcję na danym punkcie ze znaną szerokością geograficzną i znaną długością geograficzną, możesz łatwo przesuwać do tego punktu, określając środek:

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

Spowoduje to przesuwanie do tej funkcji (ale nie powiększanie) na rzutowanej powierzchni (która wygląda jak mapa powyżej).

Wagi będą musiały być dostosowane do obszaru zainteresowania, większe liczby oznaczają większe cechy (większy stopień powiększenia), mniejsze liczby przeciwnie. Oddalanie może być dobrym sposobem na uzyskanie orientacji w stosunku do punktu, w którym skupiłeś się - jeśli masz problemy z ich znalezieniem.

Ze względu na charakter projekcji Mercatora obszary w pobliżu równika lub na małych szerokościach geograficznych najlepiej sprawdzą się w tego rodzaju projekcji, podczas gdy obszary polarne mogą być bardzo zniekształcone. Zniekształcenie występuje nawet wzdłuż dowolnej linii poziomej, więc obszary, które są szerokie, ale nie wysokie, mogą być również dobre, podczas gdy obszary, które mają dużą różnicę między swoimi północnymi i południowymi skrajami, mają większe zniekształcenie wizualne.

Na przykład w przypadku Indii moglibyśmy użyć:

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

Co daje nam (ponownie ze wskaźnikiem Tissot, aby pokazać zniekształcenie):

Ma niski poziom zniekształceń, ale koła są w większości tego samego rozmiaru (widać większe zachodzenie między górnymi dwoma rzędami niż dolnymi dwoma rzędami, więc zniekształcenie jest widoczne). Ogólnie jednak mapa pokazuje znajomy kształt Indii.

Zniekształcenie w obszarze nie jest liniowe, jest znacznie przesadzone w kierunku biegunów, więc Kanada z dość daleko oddalonymi skrajami północnymi i południowymi oraz pozycją dość blisko biegunów oznacza, że zniekształcenie może być nie do utrzymania:

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

Ta projekcja sprawia, że Grenlandia wygląda tak duża jak Kanada, podczas gdy w rzeczywistości Kanada jest prawie pięć razy większa niż Grenlandia. Jest tak po prostu dlatego, że Grenlandia jest bardziej na północ niż większość Kanady (przepraszam, Ontario, wydaje się, że odcięłam część twojego południowego krańca).

Ponieważ oś y jest znacznie rozciągnięta w pobliżu biegunów w Mercator, w tym rzucie wykorzystuje się punkt na północ od geograficznego środka Kanady. W przypadku obszarów o dużej szerokości geograficznej konieczne może być dostosowanie punktu centrowania w celu uwzględnienia tego rozciągnięcia.

Jeśli potrzebujesz projekcji Mercator dla obszarów polarnych, możesz zminimalizować zniekształcenia i nadal korzystać z projekcji Mercator. Możesz to osiągnąć, obracając kulę ziemską. Jeśli obrócisz oś x na domyślnym Mercatorze, zobaczysz, że przesuwasz ją w lewo lub w prawo (po prostu obracasz globus w cylindrze, na który rzutujesz), jeśli jednak zmienisz oś y domyślnego Mercatora, możesz obróć ziemię na boki lub pod dowolnym innym kątem. Oto Mercator z obrotem wynoszącym -90 stopni:

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

Punkty wskaźnika znajdują się w tych samych lokalizacjach, co pierwsza mapa powyżej. Zniekształcenia wciąż rosną, gdy sięgają do górnej lub dolnej części mapy. Tak wyglądałaby domyślna mapa Mercator, gdyby Ziemia obracała się wokół Bieguna Północnego w [0,0] i Bieguna Południowego w [180,0], obrót obrócił cylinder, na który rzutujemy, o 90 stopni w stosunku do słupy. Zwróć uwagę, że bieguny nie mają już nie do utrzymania zniekształcenia, stanowi to alternatywną metodę rzutowania obszarów w pobliżu biegunów bez nadmiernego zniekształcania obszaru.

Korzystając z Kanady jeszcze raz jako przykładu, możemy obrócić mapę do współrzędnej środkowej, co zminimalizuje zniekształcenie obszaru. Aby to zrobić, możemy ponownie obrócić do punktu centrowania, ale wymaga to dodatkowego kroku. Przy centrowaniu przesuwamy się do obiektu, obracając poruszamy ziemią pod nami, dlatego potrzebujemy ujemnego współrzędnego centrowania:

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

Zauważ, że wskaźnik Tissota wykazuje teraz niskie zniekształcenie w obszarze. Współczynnik skali jest również znacznie większy niż poprzednio, ponieważ ta Kanada jest teraz u początku projekcji, a na środku mapy elementy są mniejsze niż na górze lub na dole (patrz pierwsza wskazówka powyżej). Nie musimy centrować, ponieważ punkt środkowy lub początek tego rzutu znajduje się w [-96,64.15] , centrowanie [-96,64.15] nas od tego punktu.

Prognozy Albersa

Projekcja Albersa, a ściślej projekcja stożkowa równego obszaru Albersa, to wspólna projekcja stożkowa i oficjalna projekcja wielu jurysdykcji i organizacji, takich jak amerykańskie biuro spisowe i prowincja Kolumbii Brytyjskiej w Kanadzie. Zachowuje obszar kosztem innych aspektów mapy, takich jak kształt, kąt i odległość.

Ogólne właściwości

Ogólna transformacja została przechwycona w następującym gifie:

(Na podstawie bloku Mike'a Bostocka)

Projekcja Albersa minimalizuje zniekształcenia wokół dwóch standardowych równoległości. Te podobieństwa przedstawiają miejsca, w których stożkowy występ przecina powierzchnię ziemi.

W tym przykładzie używane są wszystkie skale o wymiarach svg szerokości 960 pikseli i wysokości 450 pikseli, skala zmieni się wraz z tymi wymiarami

Poniższa mapa pokazuje wskaźnik Tissota dla projekcji Albersa ze standardowymi równoległymi 10 i 20 stopniami na północ. Każde koło ma w rzeczywistości ten sam rozmiar i kształt, ale rzut mapy zniekształci je w kształcie (nie w obszarze). Zauważ, że przy około 10 do 20 stopniach na północ wskaźniki są bardziej okrągłe niż gdzie indziej:

Zostało to utworzone przy użyciu następującej projekcji:

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

Jeśli użyjemy paraleli, które na wyższych wysokościach zwiększają stopień wyładowania łukowego w projekcji. Poniższe obrazy przedstawiają podobieństwa 50 i 60 stopni na północ:

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]);

Gdybyśmy mieli podobieństwa (południowe), mapa byłaby wklęsła w dół zamiast w górę. Jeśli jedna równoleżnik znajduje się na północ, a druga na południe, mapa będzie wklęsła w kierunku wyższej / bardziej ekstremalnej równoległości, jeśli są one w tej samej odległości od równika, mapa nie będzie wklęsła w żadnym kierunku.

Wybór Parallels

Ponieważ podobieństwa oznaczają obszary o najmniejszym zniekształceniu, należy je wybierać na podstawie obszaru zainteresowania. Jeśli obszar zainteresowania rozciąga się od 10 stopni na północ do 20 stopni na północ, wówczas wybranie paraleli 13 i 17 zminimalizuje zniekształcenie na twojej mapie (ponieważ zniekształcenie jest minimalizowane po obu stronach tych równoległości).

Paralele nie powinny być skrajnymi północnymi i południowymi granicami twojego obszaru zainteresowania. Równoległości mogą mieć tę samą wartość, jeśli rzut ma przecinać powierzchnię ziemi tylko raz.

Odnośniki do definicji i definicje obejmują dane równoległe, których można użyć do odtworzenia standardowych projekcji.

Centrowanie i obracanie

Po wybraniu paraleli mapa musi zostać ustawiona w taki sposób, aby obszar zainteresowania był odpowiednio wyrównany. Jeśli używasz tylko projection.center([x,y]) , mapa zostanie po prostu panoramowana do wybranego punktu i nie nastąpi żadna inna transformacja. Jeśli obszar docelowy to Rosja, panoramowanie może nie być idealne:

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]);

Centralny południk projekcji Albersa jest pionowy i musimy obrócić ziemię pod projekcją, aby zmienić środkowy południk. Obrót dla rzutu Albera to metoda centrowania rzutu na osi x (lub według długości geograficznej). A gdy ziemia wiruje pod projekcją, używamy ujemnej długości geograficznej, którą chcemy wyśrodkować. Dla Rosji może to być około 100 stopni na wschód, więc obrócimy glob o 100 stopni w drugą stronę.

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

Teraz możemy przesuwać w górę iw dół, a elementy wzdłuż i w pobliżu środkowego południka będą wyprostowane. Jeśli .center() na osi x, centrowanie będzie względne względem środkowego południka ustawionego przez obrót . W przypadku Rosji możemy nieco przesunąć północ i nieco powiększyć:

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

W przypadku obiektu takiego jak Rosja łuk mapy oznacza, że dalekie krawędzie kraju będą rozciągać się wokół bieguna, co oznacza, że punkt centralny może nie być środkiem ciężkości twojego obiektu, ponieważ może być konieczne przesuwanie go bardziej do północ lub południe niż zwykle.

Z Tissots Indicatrix możemy zobaczyć spłaszczenie w pobliżu samego bieguna, ale ten kształt jest dość prawdziwy w całym obszarze zainteresowania (Pamiętaj, że dla wielkości Rosji zniekształcenie jest dość minimalne, byłoby mniejsze w przypadku mniejszych obiektów):

Parametry domyślne

W przeciwieństwie do większości innych projekcji, projekcja d3.geoAlbers ma domyślne parametry, które nie są .rotate ([0,0]) i .center ([0,0]), domyślna projekcja jest wyśrodkowana i obrócona dla Stanów Zjednoczonych. Dotyczy to również .parallels() . Więc jeśli którykolwiek z nich nie zostanie ustawiony, domyślnie przyjmą wartości niezerowe.

streszczenie

Projekcja Albersa jest zwykle ustawiana przy użyciu następujących parametrów:

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

Gdzie aib równe są dwóm równoległym.

Azymutalne równoodległe projekcje

Ogólne właściwości:

Odwzorowanie azymutalne równoodległe jest najlepiej rozpoznawane, gdy jest używane w obszarach polarnych. Jest używany w godle ONZ . Od punktu środkowego zachowany jest kąt i odległość. Jednak rzutowanie zniekształci kształt i obszar, aby to osiągnąć, zwłaszcza gdy osoba porusza się dalej od centrum. Podobnie odległość i kąt nie są prawdziwe w lokalizacjach innych niż środek. Projekcja mieści się w kategorii azymutalnej (a nie cylindrycznej (Mercator) lub stożkowej (Albers). Projekcja ta rzutuje ziemię jako dysk:

(Na podstawie bloku Mike'a Bostocka. Wyśrodkowany na biegunie północnym, zignoruj trójkątny artefakt na górze obrazu po rozłożeniu )

Skala zależy od rozmiaru pliku SVG, w tym przykładzie wszystkie użyte skale mieszczą się w zakresie od 960 pikseli szerokości do 450 pikseli SVG (i ekran przycięty w razie potrzeby do kwadratu) - o ile nie określono inaczej.

Poniższa mapa pokazuje wskaźnik Tissota dla projekcji Azimuthal Equidistant:

Zostało to utworzone przy użyciu następującej projekcji:

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

Centrowanie i obracanie:

Centrowanie po prostu przesunie mapę, ale nie zmieni jej ogólnego składu. Wyśrodkowanie azymutu w jednakowej odległości na biegunie północnym, pozostawiając inne parametry bez zmian lub na zero, spowoduje przesunięcie bieguna północnego na środek ekranu - ale w przeciwnym razie nie zmieni powyższej mapy.

Aby prawidłowo wyśrodkować obszar, musisz go obrócić. Podobnie jak w przypadku każdego obrotu w d3, najlepiej myśleć o nim jako o przesuwaniu ziemi pod rzutem, więc obrócenie ziemi o -90 stopni pod mapą na osi y faktycznie umieści biegun północny w środku:

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

Podobnie obrót na osi x zachowuje się podobnie. Na przykład, aby obrócić mapę w taki sposób, że kanadyjska arktyka jest wyprostowana, a jednocześnie koncentrując się na biegunie północnym, możemy użyć takiej projekcji:

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

W tej mapie użyto pliku SVG o wymiarach 600 x 600

Ogólnie rzecz biorąc, ta prostota sprawia, że azymut w równej odległości jest łatwiejszy do ustawienia, wystarczy użyć obrotu. Typowa projekcja będzie wyglądać następująco:

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