咨询D3地图projection.scale与谷歌地图缩放级别的对应关系

当然有对应的取值啦！因为谷歌地图采用的是Web墨卡托投影，而D3的d3.geoMercator()默认也是基于这个投影标准的，所以我们可以通过明确的公式计算出完全匹配谷歌各缩放级别的projection.scale()值。

核心逻辑 #

谷歌地图的每个缩放级别z（范围是0到19，共20级）对应的世界地图整体宽度是256 * 2^z像素——这是因为谷歌的地图瓦片是256x256规格，缩放级别z下横向会有2^z个瓦片拼接。而在D3的墨卡托投影体系里，当scale = 1时，整个世界的投影宽度是2π像素（这是投影的标准数学范围）。

对应计算公式 #

要匹配谷歌地图的缩放级别z，D3的projection.scale()取值可以用下面的公式算出：

const matchingScale = (128 * Math.pow(2, z)) / Math.PI;

或者换一种等价的写法（更直观对应宽度关系）：

const matchingScale = (256 * Math.pow(2, z)) / (2 * Math.PI);

实际示例 #

给你几个常见缩放级别的对应值（保留两位小数，方便参考）：

• 谷歌缩放级别0：matchingScale ≈ 40.74
• 谷歌缩放级别5：matchingScale ≈ 1293.73
• 谷歌缩放级别10：matchingScale ≈ 41399.30
• 谷歌缩放级别19：matchingScale ≈ 2649547.78

额外注意点 #

1. 别忘了设置translate：光设置scale还不够，得配合projection.translate()让地图居中显示在你的SVG画布上。比如画布宽800、高600的话，通常这么写：

   const width = 800;
   const height = 600;
   const projection = d3.geoMercator()
     .scale(matchingScale) // 用上面计算出的对应值
     .translate([width / 2, height / 2]);
   

2. 匹配地图中心：如果需要和谷歌地图的某个特定经纬度中心对齐，还要额外设置projection.center()，传入对应的经纬度数组就行。

内容的提问来源于stack exchange，提问作者Swaroop