给定 Leaflet 缩放级别 (0..22)，我将如何计算 geoMercator 投影的 D3 缩放值？在 zoom=0 时，整个世界都适合单个图块 (256x256)。在瓦片中，世界大小为 2^zoom x 2^zoom 瓦片。
1127 次
1 回答
5
为了与墨卡托地图的 d3 比例尺进行比较：
墨卡托地图使用以下公式：
var point = [x, Math.log(Math.tan(Math.PI / 4 + y / 2))];
d3 地图中的比例因子本质上应用了以下变换：
point[0] = point[0] * k;
point[1] = -point[1] * k;
d3 墨卡托投影的默认地图比例为 961/2π，或 360 度 961 像素。
墨卡托公式的一个怪癖是“整个”世界的正方形视图实际上将在南北 ±85.05113 度处结束。Web Mercators 可以推动这一点，因为它们不是保形投影。Leaflet 将“整个”世界的范围推向北/南±89.15 度左右。
因此，使用适当墨卡托的 d3 和使用网络墨卡托的 Leaflet 意味着比例值可能无法很好地网格化。GIS.stackexchange上的这个答案将提供有关两者之间差异的更多信息。
但是，您仍然可以将两者对齐（大多数情况下）。
正如 Yurik 在下面的评论中所指出的，一种方法是使用缩放级别和平铺大小来获得比例因子：
Web 地图服务使用平铺网格，其中增加缩放级别会使显示的平铺数量增加四倍。在缩放级别为 1 时，世界适合在一个图块中，在缩放级别为 2 时，世界适合在四个正方形图块中。瓷砖数量的一般公式是：
平铺数量 = 4^zoomLevel
最重要的是，每次我们放大时，穿过地图（一行）所需的图块数量翻倍。
以此为起点，我们可以弄清楚如何匹配两者。
d3 geoMercator961/(2*Math.PI)用作默认比例 - 这会将赤道的 360 度（或 2 弧度）扩展到 961 像素。要将其设置为适用于基于切片的图层，我们只需要知道切片大小和缩放级别。
我们需要知道赤道分布在多少像素上，才能使用：
tileSize * Math.pow(2,zoomLevel)
这为我们提供了环绕赤道的所有瓷砖的宽度。然后我们可以将它除以 2Pi 并得到我们的 d3 比例：
projection.scale(tileSize * Math.pow(2,zoomLevel) / (2 * Math.PI))
由于 d3 墨卡托和 web 墨卡托之间的差异，可能会出现失真问题，具体取决于您所在的位置和缩放距离，但这在大多数情况下应该提供良好的对齐。
或者，我们可以使用传单地图的实际角落来确定合适的比例：
D3 具有一种方法，该方法允许投影将地理范围拟合到 svg 范围：projection.fitExtent(). 此方法采用 geojson 或几何图形。在这个答案中，我使用的是 geojson。
.getBounds()将返回传单地图范围，因此您可以相当轻松地创建一个 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);
使用稍微修改的传单示例（更改中心点和缩放），整个事情看起来像这样：
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 © <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>我没有添加代码以在地图更改时更新投影，但这只是重新计算边界框并重新应用 fitSize 方法。
于 2017-06-19T01:33:45.840 回答