d3.js - 计算墨卡托 d3 缩放以匹配 Leaflet 缩放级别

Question

给定 Leaflet 缩放级别 (0..22)，我将如何计算 geoMercator 投影的 D3 缩放值？在 zoom=0 时，整个世界都在一个图 block (256x256) 中。在瓦片中，世界大小是 2^zoom x 2^zoom 瓦片。

Answer 1

与墨卡托 map 的 d3 比例进行比较:

墨卡托 map 使用以下公式:

var point =  [x, Math.log(Math.tan(Math.PI / 4 + y / 2))];  

d3 map 中的比例因子基本上应用以下变换:

   point[0] =  point[0] * k;
   point[1] =  -point[1] * k;

d3 墨卡托投影的默认 map 比例为 961/2π，即 961 像素 x 360 度。

墨卡托公式的一个怪癖是，“整个”世界的正方形 View 实际上将以南北 ±85.05113 度为上限。 Web Mercators 可以插入这一点，因为它们不是等角投影。 Leaflet 将“整个”世界的范围推至南北 ±89.15 度左右。

因此，d3 使用适当的墨卡托，Leaflet 使用网络墨卡托，这意味着比例值可能无法很好地啮合。 GIS.stackexchange 上的这个答案将提供有关两者之间差异的更多信息。

但是，您仍然可以将两者对齐(大多数情况下)。

---

如 Yurik 在下面的 comments 中所述，一种方法是使用缩放级别和图 block 大小来获取比例因子:

Web map 服务使用分 block 网格，其中增加缩放级别会使显示的分 block 数量增加四倍。在缩放级别 1 中，世界适合一个图 block ，在缩放级别 2 中，世界适合四个方形图 block 。瓷砖数量的一般公式是:

图 block 数 = 4^zoomLevel

最重要的是，每次我们放大时，穿过 map (一行)所需的图 block 数量都会翻倍。

以此为出发点，我们可以弄清楚如何匹配两者。

d3 geoMercator 使用 961/(2*Math.PI) 作为默认比例 - 这将赤道的 360 度(或 2 弧度)扩展到 961 像素。要将其设置为适用于基于图 block 的图层，我们只需要知道图 block 大小和缩放级别。

我们需要知道赤道分布了多少像素，我们使用:

tileSize * Math.pow(2,zoomLevel)

这为我们提供了环绕赤道的所有方 block 的宽度。然后我们可以将其除以 2Pi 得到我们的 d3 比例:

projection.scale(tileSize * Math.pow(2,zoomLevel)/(2 * Math.PI))

由于 d3 墨卡托和 web 墨卡托之间的差异，可能会出现失真问题，具体取决于您所在的位置和缩放的距离，但这在大多数情况下应该可以提供良好的对齐效果。

---

或者，我们可以使用传单 map 的实际角来确定合适的比例:

D3 的特点是允许投影将地理范围适合 svg 范围:projection.fitExtent()。此方法采用 geojson 或几何图形。在这个答案中，我使用的是 geojson。

.getBounds() 将返回传单 map 范围，因此您可以相当轻松地创建一个 geojson 边界框:

var bbox = {
    "type": "Polygon",
    "coordinates": [
        [
            [mymap.getBounds()._northEast.lng, mymap.getBounds()._northEast.lat], 
            [mymap.getBounds()._northEast.lng, mymap.getBounds()._southWest.lat], 
            [mymap.getBounds()._southWest.lng, mymap.getBounds()._southWest.lat], 
            [mymap.getBounds()._southWest.lng, mymap.getBounds()._northEast.lat],
            [mymap.getBounds()._northEast.lng, mymap.getBounds()._northEast.lat]
        ]
    ]
}

请注意，绕组顺序在 d3 中实际上很重要 - 外圈是逆时针

然后您所要做的就是将投影设置为适合该范围:

var projection = d3.geoMercator()
   .fitSize([600, 400], bbox);

使用稍微修改过的 leaflet example(更改中心点和缩放)，整个事情看起来像这样:

	var features = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -0.17565250396728513,
              51.510118018740904
            ],
            [
              -0.17586708068847653,
              51.509744084227556
            ],
            [
              -0.17584562301635742,
              51.50871574849058
            ],
            [
              -0.17359256744384766,
              51.50613812964363
            ],
            [
              -0.17204761505126953,
              51.50552375337273
            ],
            [
              -0.16966581344604492,
              51.50481587478995
            ],
            [
              -0.16599655151367188,
              51.50454874793857
            ],
            [
              -0.1624774932861328,
              51.504001132997686
            ],
            [
              -0.16058921813964844,
              51.5039744199054
            ],
            [
              -0.16033172607421875,
              51.50426826305929
            ],
            [
              -0.16013860702514648,
              51.5043884710761
            ],
            [
              -0.16016006469726562,
              51.50465559886706
            ],
            [
              -0.15996694564819336,
              51.50510971251776
            ],
            [
              -0.16282081604003906,
              51.505737450406535
            ],
            [
              -0.16466617584228516,
              51.5058710105437
            ],
            [
              -0.16835689544677734,
              51.50588436653591
            ],
            [
              -0.1705455780029297,
              51.506098061878475
            ],
            [
              -0.17273426055908203,
              51.506672363145654
            ],
            [
              -0.17282009124755857,
              51.50681927626061
            ],
            [
              -0.17468690872192383,
              51.508729103648925
            ],
            [
              -0.17511606216430664,
              51.50999782583918
            ],
            [
              -0.17526626586914062,
              51.510144728231545
            ],
            [
              -0.17565250396728513,
              51.510118018740904
            ]
          ]
        ]
      }
    }
  ]
};



	var mymap = L.map('mapid').setView([51.5, -0.171], 14);

	L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
		maxZoom: 18,
		attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
			'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
			'Imagery © <a href="http://mapbox.com">Mapbox</a>',
		id: 'mapbox.streets'
	}).addTo(mymap);
	

	var svg = d3.select('#mapid')
	  .append('svg')
	  .attr('width',600)
	  .attr('height',400);

	
	
	
	// Create a geojson bounding box:
	var bbox = {
		"type": "Polygon",
		"coordinates": [
			[
				[mymap.getBounds()._northEast.lng, mymap.getBounds()._northEast.lat], 
				[mymap.getBounds()._northEast.lng, mymap.getBounds()._southWest.lat], 
				[mymap.getBounds()._southWest.lng, mymap.getBounds()._southWest.lat], 
				[mymap.getBounds()._southWest.lng, mymap.getBounds()._northEast.lat],
			    [mymap.getBounds()._northEast.lng, mymap.getBounds()._northEast.lat]
			]
		]
    }
	
	
	var projection = d3.geoMercator()
	   .fitSize([600, 400], bbox);
	
	var path = d3.geoPath().projection(projection);
	
	svg.append("path")
	  .datum(features)
	  .attr('d',path);
	

		svg {
			z-index: 10000;
			position: relative;
		}
	

<div id="mapid" style="width: 600px; height: 400px;"></div>

	
	<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js" integrity="sha512-A7vV8IFfih/D732iSSKi20u/ooOfj/AGehOKq0f4vLT1Zr2Y+RX7C+w8A1gaSasGtRUZpF/NZgzSAu4/Gc41Lg==" crossorigin=""></script>
	
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.js"></script>

我没有添加 map 更改时更新投影的代码，但这只是重新计算边界框并重新应用 fitSize 方法。