d3.js
D3 투영법

메르카토르 투영기

메르카토르 투영법은지도에서 가장 잘 알려진 투영법 중 하나입니다. 모든지도 투영과 마찬가지로 왜곡이 있고 메르카토르 투영의 경우 투영이 극 지역에서 가장 두드러집니다. 원통형 투영이며, 경선은 수직으로, 위도는 수평으로 실행됩니다.

크기 조정은 svg의 크기에 따라 다르며,이 예에서 사용되는 모든 비율은 960 픽셀 x 450 픽셀의 높은 svg입니다.

아래의지도는 Mercator 투영에 대한 Tissot의 지표 를 보여줍니다. 각 원은 실제로 같은 크기이지만 투영법은 다른 투영보다 더 큰 투영을 분명히 보여줍니다.

이 왜곡은 투영이지도의 1 차원 확장을 피하려고하기 때문입니다. 자오선이 북극과 남극에서 합쳐지기 시작할 때, 그들 사이의 거리는 0에 가까워 지지만, 투영면은 직사각형입니다 (지도는 아니지만 사각형이기는하지만). 거리의 변화는 허용하지 않습니다. 투사에서 경락 사이. 이렇게하면 극 근처의 x 축을 따라 형상이 늘어나고 모양이 왜곡됩니다. 이것을 막기 위해 메르카토르는 y 축을 잡아 당기고 폴에 접근하여 지표를 원형으로 만듭니다.

위지도의 투영법은 본질적으로 약간 위로 이동 한 기본 Mercator 투영법입니다.

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

알려진 위도와 알려진 경도로 투영 중심을 지정하려면 중심을 지정하여 해당 점으로 쉽게 이동할 수 있습니다.

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

이렇게하면 투사 된 표면 (위의지도처럼 보임)에서 해당 피쳐 (줌이 아닌)로 이동합니다.

비늘은 관심 영역에 맞게 조정해야합니다. 큰 숫자는 큰 특징 (확대 정도가 더 큼)과 같고 작은 숫자는 반대입니다. 축소 기능을 사용하면 위치를 파악하는 데 어려움이있는 경우 중심점을 기준으로 한 상대적인 위치를 볼 수있는 좋은 방법이 될 수 있습니다.

메르카토르 투영법의 특성상, 적도 부근 또는 저위도 지역은 극한 지역이 매우 왜곡 될 수있는 반면, 이러한 유형의 투영으로 가장 잘됩니다. 왜곡은 수평선을 따라조차 있으므로 폭이 크지 만 높이가 아닌 영역은 좋을 수도 있지만 북극과 북극 사이에 큰 차이가있는 영역은 시각적 왜곡이 더 큽니다.

예를 들어 인도의 경우 다음을 사용할 수 있습니다.

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

우리에게 (왜 Tissot의 표식과 함께 왜곡을 보여줍니다) :

이것은 왜곡 수준이 낮지 만 원은 대체로 같은 크기입니다 (아래 두 행보다 맨 위 두 행 사이에 더 큰 겹침이 있으므로 왜곡이 보입니다). 전반적으로지도는 인도에 친숙한 모양을 보여줍니다.

지역의 왜곡은 직선이 아니므로 기둥쪽으로 크게 과장되어 있으므로 상당히 멀리 떨어진 북쪽과 남쪽의 극단과 극에 상당히 가까운 위치의 캐나다는 왜곡이 유지 될 수 없음을 의미합니다.

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

이 예측은 그린 랜드를 캐나다만큼 크게 보이게합니다. 실제로 캐나다는 그린란드보다 거의 5 배 더 큽니다. 이것은 Greenland가 캐나다의 대부분보다 더 북쪽이기 때문에 간단합니다 (미안 한 온타리오, 나는 당신의 남쪽 끝단의 일부를 차단 한 것처럼 보입니다).

메르카토르에서는 y 축이 극 근처에서 상당히 뻗어 있기 때문에이 투영법은 캐나다의 지리적 중심에서 상당히 북쪽 지점을 사용합니다. 고위도 지역을 다루는 경우이 스트레칭을 고려하여 센터링 포인트를 조정해야 할 수도 있습니다.

극지방에 대한 Mercator Projection이 필요한 경우 왜곡을 최소화하고 Mercator Projection을 계속 사용할 수있는 방법이 있습니다. 여러분은 지구를 회전시킴으로써 이것을 얻을 수 있습니다. 기본 Mercator의 x 축을 회전하면 왼쪽 또는 오른쪽으로 이동합니다 (투영중인 원통에 지구본을 돌리기 만하면됩니다). 그러나 기본 Mercator의 y 축을 변경하면 다음과 같이 할 수 있습니다. 지구를 옆으로 또는 다른 각도로 돌리십시오. 다음은 -90도 회전하는 메르카토르입니다.

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

indicatrix 포인트는 위의 첫 번째 맵과 동일한 위치에 있습니다. 지도의 상단 또는 하단에 도달하면 왜곡이 계속 증가합니다. 이것은 지구가 북극점 [0,0]과 남극점 [180,0] 주위를 돌면 기본 메르카토르지도가 나타나는 방식입니다. 회전하면 우리가 투영하는 원통이 90 °로 회전합니다. 기둥. 폴이 더 이상 견딜 수없는 디스토션을 가지고 있지 않음에 주목하십시오. 이것은 영역에서 너무 많은 왜곡없이 폴 근처의 영역을 투사하는 대체 방법을 제시합니다.

예를 들어 캐나다를 다시 사용하면지도를 중심 좌표로 회전 할 수 있으므로 면적 왜곡을 최소화 할 수 있습니다. 이렇게하려면 다시 센터링 포인트로 회전 할 수 있지만 추가 단계가 하나 더 필요합니다. 센터링을 할 때 우리는 회전과 더불어 지구를 우리 밑으로 움직이기 때문에 우리는 중심 좌표의 음의 값을 필요로합니다 :

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

Tissot의 표시는 현재 지역의 왜곡이 적음을 보여줍니다. 이 캐나다는 이제 투영의 원점에 있고,지도 피처의 꼭대기 나 꼭대기가 더 작기 때문에 축척 계수는 이전보다 훨씬 커졌습니다 (위의 첫 번째 표시 참조). 이 투영의 중심점 또는 원점이 [-96,64.15] 있기 때문에 센터링 할 필요가 없습니다. 센터링을 사용하면이 지점에서 벗어날 수 있습니다.

Albers 투영법

Albers 투영, 또는 더 적절하게 Albers 평등 원추형 투영법은 미국의 인구 조사국 및 캐나다의 브리티시 컬럼비아 주와 같은 여러 관할지 및 기관의 일반적인 원추형 영사 및 공식 프로젝트입니다. 모양, 각도 및 거리와 같은 맵의 다른 측면을 희생하여 영역을 보존합니다.

일반 속성

일반적인 변환은 다음 gif에 캡처됩니다.

(Mike Bostock의 블록을 기반으로 함)

Albers 프로젝션은 두 개의 표준 평행선 주위의 왜곡을 최소화합니다. 이 평행선은 원추형 투영이 지구의 표면과 교차하는 지점을 나타냅니다.

이 예에서는 모든 눈금이 960 픽셀 x 450 픽셀 높이의 svg 차원과 함께 사용되며 눈금은이 차원과 함께 변경됩니다

아래의지도는 표준 평행선이 북쪽으로 10도와 20 도인 Albers 투영법에 대한 Tissot 's Indicatrix를 보여줍니다. 각 원은 실제로 크기와 모양이 같지만지도 투영에서는 모양이 왜곡됩니다 (영역이 아님). 약 10에서 20도 북쪽의 지표가 다른 곳보다 더 둥글다는 점에 주목하십시오.

이것은 다음과 같은 투사로 만들어졌습니다 :

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

더 높은 고도에서 평행선을 사용하면 투영에서 아크의 정도가 증가합니다. 다음 이미지는 북쪽으로 50도와 60 도의 평행선을 사용합니다.

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

네거티브 (남부) 평행선이있는 경우지도가 위로 오목하게 아래로 오게됩니다. 하나의 평행선이 북쪽과 남쪽의 경우,지도는 더 높은 / 더 극단적 인 평행선쪽으로 오목하게 될 것입니다. 적도에서 같은 거리에 있으면지도가 어떤 방향으로 오목하게되지는 않습니다.

Parallels 선택

평행선은 가장 왜곡이 적은 부분을 표시하므로 관심 영역을 기준으로 선택해야합니다. 관심 지역이 북쪽으로 10도에서 북쪽으로 20도 뻗어 있다면 13 및 17의 평행선을 선택하면지도 전체에 왜곡이 최소화됩니다 (왜곡은이 평행선의 양쪽 측면에서 최소화 됨).

Parallels는 관심 분야의 극단적 인 북부 및 남부 경계가되어서는 안됩니다. 투영이 지구의 표면과 한 번 만 교차하도록하려면 Parallels는 둘 다 같은 값일 수 있습니다.

프로젝션 참조 및 정의에는 표준화 된 프로젝션을 재현하는 데 사용할 수있는 병렬 데이터가 포함됩니다.

센터링 및 회전

평행선이 선택되면 관심 영역이 올바르게 정렬되도록지도를 배치해야합니다. projection.center([x,y]) 만 사용하면지도가 선택한 점으로 단순하게 이동하고 다른 변형은 일어나지 않습니다. 대상 지역이 러시아 인 경우 패닝이 이상적이지 않을 수 있습니다.

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

Albers 투영의 중앙 자오선은 수직이며, 중앙 자오선을 변경하기 위해 투영 아래에서 지구를 회전시켜야합니다. Alber의 투영에 대한 회전은 x 축 (또는 경도)에 투영을 센터링하는 방법입니다. 그리고 지구가 투사 아래에서 회전 할 때, 우리는 중심에 놓기를 원하는 경도의 부정을 사용합니다. 러시아의 경우, 이것은 동쪽으로 약 100 도가 될 수 있으므로, 우리는 지구를 100도 회전시킬 것입니다.

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

이제 우리는 상하로 팬 할 수 있으며 중앙 자오선을 따라 또는 그 주변에있는 기능은 똑바로됩니다. x 축에서 .center() 를 사용하면 회전에 의해 설정된 중앙 자오선에 상대적으로 센터링됩니다 . 러시아의 경우 우리는 북한을 공평하게 바라보며 약간 확대 할 수 있습니다.

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

러시아와 같은 기능의 경우지도의 아치는 국가의 먼 가장자리가 장대를 중심으로 펼쳐지는 것을 의미합니다. 즉, 중심점이 기능의 중심이 아닐 수도 있습니다. 북쪽 또는 남쪽으로 평소보다.

Tissots Indicatrix를 사용하면 극 자체가 평평 해지는 것을 볼 수 있지만 관심있는 영역 전체에서 그 모양이 사실입니다 (러시아 크기의 경우 왜곡이 매우 작으며 작은 기능의 경우 훨씬 적음).

기본 매개 변수

대부분의 다른 투영과 달리 d3.geoAlbers 투영은 .rotate ([0,0]) 및 .center ([0,0])가 아닌 기본 매개 변수와 함께 제공되며, 기본 투영은 미국의 경우 중앙에 배치되고 회전됩니다. 이것은 .parallels() 에도 해당됩니다. 따라서 이들 중 하나라도 설정되지 않으면 기본값이 0이 아닙니다.

개요

Albers 프로젝션은 일반적으로 다음 매개 변수로 설정됩니다.

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

여기서 a와 b는 두 개의 평행과 같습니다.

방위각 등거리 투영법

일반 등록 정보 :

Azimuthal Equidistant 투영법은 극지방에서 사용될 때 가장 잘 인식됩니다. 이것은 유엔의 상징으로 사용 됩니다. 중심점에서 각도와 거리가 유지됩니다. 그러나 투영법은이를 달성하기 위해 모양과 면적을 왜곡시킬 것입니다. 특히 중심에서 멀어 질수록 더욱 그렇습니다. 마찬가지로, 거리와 각도는 중심이 아닌 다른 위치에서도 마찬가지입니다. 투영법은 방위각 범주 (원통형 (Mercator) 또는 원추형 (Albers)가 아닌)에 있습니다.이 투영법은 지구를 디스크로 투영합니다.

(마이크 폴 스톡 (Mike Bostock)의 블록을 기반으로 , 북극을 중심으로 한 번 폴드 한 이미지 위에 삼각형의 인공물을 무시함 )

크기 조정은 svg의 크기에 따라 다르며,이 예제에서 사용 된 모든 비율은 별도로 지정하지 않는 한 960 픽셀 x 450 픽셀의 높은 svg (필요한 경우 사각형의 경우 화면이 잘립니다) 내에 있습니다.

아래지도는 Azimuthal Equidistant 투영을위한 Tissot 's Indicatrix를 보여줍니다 :

이것은 다음과 같은 투사로 만들어졌습니다 :

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

센터링 및 회전 :

센터링은 단순히지도를 이동하지만 전체적인 구성을 변경하지는 않습니다. 다른 매개 변수를 변경하지 않거나 0으로 유지하면서 방위각 등거리를 북극에 집중시키는 것은 북극을 화면 중앙으로 이동 시키지만 위의지도는 변경하지 않습니다.

영역을 올바르게 맞추려면 회전해야합니다. d3의 모든 회전과 마찬가지로, 투영 아래에서 지구를 움직이는 것으로 생각하는 것이 가장 좋습니다. 따라서 y 축의지도 아래에서 지구 -90 도로 회전하면 실제로 북극이 중간에 배치됩니다.

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

마찬가지로 x 축의 회전도 비슷하게 작동합니다. 예를 들어 북극을 중심으로 캐나다 북극이 수직으로되도록지도를 회전하려면 다음과 같은 투영법을 사용할 수 있습니다.

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

이지도는 600x600 svg를 사용했습니다.

전반적으로이 단순성은 방위각을 등거리로 설정하고 회전을 사용하기 쉽도록 설정합니다. 일반적인 투영 방법은 다음과 같습니다.

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