d3.js - 为什么投影与平铺的比例值不同？

Question

使用 d3.geo.tile plugin, examples 在 map 投影的比例和传递给 tile() 函数的比例之间都有差异。特别是 tile_scale = projection_scale * 2 * Math.PI。查看示例 here和 here .

这个 2 * PI 乘法是什么意思？

Answer 1

要理解为什么在使用 d3.geo.tile 插件时有一个附加因子 2π 应用于比例尺，了解 d3.geoMercator() 使用的投影之间的区别很重要以及绘制栅格图 block 时使用的那个。

D3

D3 使用公式实现标准 Mercator projection:

此投影使用以格林威治子午线为中心的单位圆半径 R = 1。到目前为止，没有缩放，也没有应用任何翻译。投影将从以下时间间隔产生输出值:

在 D3 v4 中这是 implemented 作为

export function mercatorRaw(lambda, phi) {
  return [lambda, log(tan((halfPi + phi) / 2))];
}

D3 v3 使用略有不同的符号，它更类似于上述公式，当然，等同于较新的实现:

function d3_geo_mercator(λ, φ) {
  return [λ, Math.log(Math.tan(π / 4 + φ / 2))];
}

d3.geo.mercator() 使用 translation 和 scaling 的默认值这一事实常常掩盖了区间的值。您必须明确地将它们设置为 .translate([0,0]).scale(1) 才能获得上述间隔。

瓷砖

另一方面，图 block 使用墨卡托投影的略微修改版本，称为 Web Mercator 。相关公式为

该投影的核心是使用与标准墨卡托投影相同的计算。从上述等式右侧的黑色项可以很容易地看出这一点，这些项与墨卡托投影使用的项完全相同。只是通过应用一些缩放和平移来调整输出间隔以更好地适应屏幕显示的需要。

首先，对于南北纬度都超过的情况，投影被截断

从而将整个 map 投影到一个正方形上。之后，进行了三个调整(根据上面等式中的颜色进行匹配):

1. 将原点移动到左上角 (0, 0) — 调整蓝色 π。
2. 将间隔归一化为 [0, 1] — 除以绿色的 2π
3. 放大以适应 256 × 256 的区域 — 乘以红色的 256。

这将从间隔中产生输出值

---

这是所涉及的投影比例的差异，这就是您需要乘以/除以 2π 的原因。如果要在同一张 map 中同时使用 d3.geo.mercator() 和瓦片，则需要修改比例以相互匹配。

对标准墨卡托投影施加与 Web 墨卡托投影相同的纬度限制，您最终得到以下间隔:

标准墨卡托投影

项目到区间

长度 = 2π。

网页墨卡托投影

项目到区间

长度 = 256。

这在设置投影比例时已得到纠正

var projection = d3.geoMercator()
    .scale((1 << 12) / 2 / Math.PI );

使用简单的求幂数学，比例因子可以重写为

(1 << 4) * (1 << 8) / 2 / Math.PI

进一步

(1 << 4) * 256 / ( 2 * Math.PI )

第一项 (1 << 4) 等于 2⁴，这是要使用的实际缩放因子:16。这将获得 zoom level 4 的图 block 。下学期

是调整尺度的校正因子，其中包括您的问题所涉及的 2π。