解释 d3js 投影基础知识答案

【问题标题】：Explain d3js projection fundamentals解释 d3js 投影基础知识
【发布时间】：2013-12-15 00:36:40
【问题描述】：

我正在尝试了解 d3 中地理投影的基础知识，以便我可以有效地旋转、缩放和平移坐标。

投影的结果是否在默认 svg 坐标系中，原点在左上角，正 y 值沿网格向下移动？或者是笛卡尔坐标中的结果，正 y 值在网格中向上移动？

我运行了这个测试。 a点位于SF的西北部。 b点位于SF的东南部。我期望点 a 的投影的 x 值小于点 b 的投影（向左）。同样，我希望点 a 的投影的 y 值更小（高于）点 b 的投影。

p = d3.geo.transverseMercator()
a = [-122.490402, 37.786453]
b = [-122.389809, 37.72728]
ap = p(a) // [359.30926341688723, -76.50496169565764]
bp = p(b) // [358.9636503828066, -76.46080714063936]

相反，点 a 的投影 x 值大于 b，因此在 svg 画布上 a 最终会低于 b。

[更新#1]

我一直在研究测试套件。在其中我看到了这些值：

（在 albers-test.js 中）

"San Francisco, CA": [[-122.42000000,   37.78000000], [ 107.44485839,  214.04820561]]

（在 azimuthal-equal-area-test.js 和其他几个文件中）

"San Francisco, CA": [[ -46.16620803,   77.04946507], [ 448.09318291,   57.65281089]]

这告诉我我很困惑。

为什么在测试中 SF 有 2 个不同的经度/纬度值？

我显然已经摆脱了困境。请帮助我重回正轨。

-凯莉

【问题讨论】：

需要考虑的一点是，lat long 需要反转为 long lat，希望这会消除混乱。另外，看看这个Question
我很欣赏关于纬度/经度需要颠倒的观点——这在过去让我很生气。但是，在我的示例中它们是相反的。

标签： d3.js

【解决方案1】：

啊，现在我已经调查过了，我可以看到您的 D3 坐标正确。我已经设置了这个bl.ock，它会为你绘制这些点。

如果您已经掌握了这一点，我深表歉意，但我会提供一些背景知识。投影的目的是将 3D 位置转换为 2D 平面（或屏幕）。有许多不同的投影可以将 3D 坐标拉伸和弯曲到 2D 平面中，而这正是如何完成的，这反映了投影设计者的期望结果。一些预测将更适合美国，美国阿尔伯斯就是一个很好的例子，因为它将阿拉斯加和夏威夷移动到加利福尼亚的西南部。这确实是一种冗长的说法，对于给定的一组地球坐标，不同的投影将得到不同的屏幕坐标。要了解这一点，请查看 Jason Davies page 或 Mike Bostock 的 bl.ock。

现在您的投影走在了正确的道路上，您只需设置 D3 如何将这些坐标转换到屏幕上。有很多方法可以做到这一点，但我在这里概述的是我觉得最容易理解的一种。使用投影时，您可以设置许多参数，包括缩放、中心、平移、旋转等。它们所做的非常简单。 scale 将缩放设置为更大的数字，从而使地图放大更多， center 将地图的中心点设置为坐标， translate 将地图的中心发送到屏幕位置，并且 rotate 旋转地图。

在我设置的 bl.ock 中，我刚刚使用了 scale 和 center 参数，如下所示：

projection
  .scale(1000)
  .center([-106, 37.5])

要确切了解其工作原理如何更改这些参数，请尝试增加比例，以便您可以看到点所在的位置，并记住将中心设置为其中一个点以确保您可以看到它们。

【讨论】：