解释d3js投影基本原理 [英] Explain d3js projection fundamentals

问题描述

我想了解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] 
  

大于b，因此a会在svg画布上低于b。

[update＃1]

我一直在调查测试套件。在其中我看到这些值：

（在albers-test.js中）

 San Francisco，CA：[[-122.42000000，37.78000000]，[107.44485839，214.04820561]] 
  

$ b b

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

  [[-46.16620803，77.04946507]，[448.09318291，57.65281089]] 
  

这告诉我困惑。

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

在杂草。

解决方案

<啊，现在我看着它，我可以看到你坐标正确的方式为D3。我已设置此 bl.ock ，为您绘制这些点。

我很抱歉，如果你已经在这上面，但我会提供一些背景开始。投影的目的是将3D位置转换为2D平面（或屏幕）。存在许多不同的投影，将3D坐标拉伸和弯曲到2D平面中，并且精确地如何做到反映投影设计者的期望的结果。一些预测将更适合美国，阿尔伯斯美国是一个很好的例子，因为它移动阿拉斯加和夏威夷到加利福尼亚州西南部。这真的是一个长时间的方式说，对于一组给定的地球坐标，不同的投影将获得不同的屏幕坐标。要了解这一点，请查看Jason Davies 页面或此 bl.ock 。

现在你在正确的路径上投影，你只需要设置D3如何将这些坐标转换到屏幕。有很多方法可以做到这一点，但我在这里概述是我找到最容易理解的。有许多参数，你可以设置使用投影时，这些包括缩放，中心，平移，旋转等等。他们做的是漂亮的海峡前方。缩放以较大的数字设置缩放，导致更多地图放大，中心设置地图在坐标中的中心点，平移将地图的中心发送到屏幕位置，并旋转旋转地图。

在bl.ock中我设置了我刚刚使用的缩放和中心参数，如：

  projection 
 .scale（1000）
 .center（[ -  106，37.5]）
  

b $ b

要查看这些工作的确切方式，请改变这些参数，尝试增加缩放比例，以便您可以将点放在哪里，并记住将中心设置为其中一个点，以确保您可以看到它们。 p>

I'm trying to understand the basics of geo projections in d3 so that I can rotate, scale, and translate coordinates effectively.

Are the results of a projection in the default svg coordinate system, with the origin at the top left, and positive y values moving down the grid? Or are the results in Cartesian coordinates, with the positive y values moving up the grid?

I ran this test. Point a is in the north west part of SF. Point b is in the south east part of SF. I expected x value of the projection of point a to be smaller (to the left) of point b's projection. Likewise I expected the y value of the projection of point a to be smaller (above) point b's projection.

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]

Instead, point a's projection x value is larger than b's, so a would end up below b on the svg canvas.

[update #1]

I've been investigating the test suite. In it I see these values:

(in albers-test.js)

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

(in azimuthal-equal-area-test.js and several others)

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

This tells me that I am very confused.

Why are there 2 different longitude/latitude values for SF in the tests?

I'm clearly off in the weeds. Please help me get back on track.

-Kelly

解决方案

Ah now I've looked into it I can see you had the coordinates the correct way round for D3. I've set up this bl.ock that plots those points for you.

I apologise if you're already on top of this but I'll provide some background to start with. The aim of projections is to translate 3D positions into 2D plane (or the screen). There are numerous different projections out there that stretch and bend 3D coordinates into the 2D plane and exactly how this is done reflects the desired outcomes of the projection designers. Some projections will be better suited to the USA, the Albers USA is a good example of this as it moves Alaska and Hawaii to the south west of California. This is really a long winded way to say that for a given set of earth coordinates different projections will get different screen coordinates. To get an understanding of this have a look at Jason Davies page or this bl.ock by Mike Bostock.

Now you're on the right path with projection you just need to set-up how D3 will translate those coordinates to the screen. There are a number of ways to do that but I outline here is the one I find easiest to understand. There are a number of parameters you can set when using projection, these include scale, centre, translate, rotate, etc. What they do is pretty strait forward. The scale sets the zoom with a larger number resulting in more zoomed in map, centre sets the centre point of the map in coordinates, translate sends the centre of a map to screen location and rotate rotates the map.

In the bl.ock I set up I've just used the scale and centre parameters as in:

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

To see exactly how this works change these parameters around, try increasing the scale so you can where the points are and remember to set the center to one of the points to make sure that you can see them.

这篇关于解释d3js投影基本原理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！