距离Jason Davies以Reprojected Raster Tiles惊艳了我们已经过去了几年——由于Mapbox阻止了他的网站，该地图已经无法使用，但Mollweide Watercolour和Interrupted Goode Raster仍然是很棒的演示。
现在在Observable HQ上，我看到了最新的d3-geo-projection和d3-tile的文档，但是没有现代的示例来展示如何做到像Jason那样重新投影标准Mercator瓦片集。
我该如何让d3-tile在新的投影下变形？
本答案基于以下资源：
这三个资源也相互关联。理解这三个示例将有助于理解下面我的示例中发生的情况。
此答案还以我正在缓慢进行的构建瓦片库为基础。
本答案的目标不是呈现一个最终的资源，而是展示如何组合相关信息的粗略演示。随着我的思考进一步深入，答案也会不断发展。
重新投影网络服务瓦片的最大挑战是时间，不仅是了解投影并阅读像这样的答案所花费的时间。
投影函数是复杂的、耗时的操作，必须对呈现的每个像素进行处理。我看到的所有d3示例都使用了 此处 所见的过程（或类似变体）来进行实际的重投影和重采样。只有使用Plate Carree投影的原始图像才能使用此示例。该过程如下：
如果原始图像使用平面柱面投影，则不需要使用d3-geoProjection，投影坐标和未投影坐标之间的关系是线性的。例如：如果图像高度为180像素，则每个像素代表1度的纬度。这意味着步骤3与步骤2和projection.invert()相比并不需要很长时间。以下是Mike的第3步函数：
var q = ((90 - φ) / 180 * dy | 0) * dx + ((180 + λ) / 360 * dx | 0) << 2;
第二步所需的时间与重新投影图像所使用的投影方式有关。我看到的所有示例都在上述列表中的第二步中使用了d3.geoProjection.invert()——它可以将新图像中的像素位置转换为其纬度和经度。并非所有投影方式都是相同的。圆柱形投影通常比圆锥形投影效果更好，而圆锥形投影则通常优于方位投影。我还发现，在投影.invert()的计算时间方面，d3v4和d3v5之间存在一些奇怪的速度差异：
这种方法可能会遇到这里描述的问题，这些问题可以通过那里的答案来解决 - 但不同的解决方案将需要额外的处理时间。
这种方法使用最近邻居方法 - 这可能会导致质量问题。更高级的采样，如双线性或立方，将增加处理时间，但可能会产生更理想的图像。
如果基础图像有文本，则文本可能会被旋转或以其他方式操作，使其难以阅读。
Mike的示例是针对单个图像的，而对于瓷砖，则程度上会有所改变，我们现在正在创建多个图像，这需要知道每个原始瓷砖的边界以及每个重新投影的瓷砖的边界（以度为单位）以及前者的瓷砖单位和后者的像素 - 细节问题。
Math.atan(Math.exp(-y * Math.PI / 180)) * 360 / Math.PI - 90;
d3.geoMercator()来制作更清晰的比例因子，使用投影包括一个额外的操作来转换x坐标。geoTile.tileDepth = function(z) {
// rough starting value, needs improvement:
var a = [w/2-1,h/2]; // points in pixels
var b = [w/2+1,h/2];
var dx = d3.geoDistance(p.invert(a), p.invert(b)) ; // distance between in radians
var scale = 2/dx*tk;
var z = Math.max(Math.log(scale) / Math.LN2 - 8, 2);
z = Math.min(z,15) | 0;
// Refine:
var maxTiles = w*h/256/128;
var e = p.clipExtent();
p.clipExtent([[0,0],[w,h]])
while(d3.quadTiles(p, z).length > maxTiles) {
z--;
}
p.clipExtent(e);
return z;
}
geoTile.tiles = function() {
// Use Jason Davies' quad tree method to find out what tiles intercept the viewport:
var z = geoTile.tileDepth();
var e = p.clipExtent(); // store and put back after.
p.clipExtent([[-1,-1],[w+1,h+1]]) // screen + 1 pixel margin on outside.
var set = d3.quadTiles(p, Math.max(z0,Math.min(z,z1))); // Get array detailing tiles
p.clipExtent(e);
return set;
}
geoTile.tiles()生成上面的瓦片集，并使用瓦片坐标（在瓦片坐标、行、列、缩放深度中）作为键值，将image元素附加到父g或svg中，通过输入/更新/退出循环运行。加载图像时，一旦图像加载完成，我们调用一个onload函数来进行实际的重投影。这与Jason和Alan的代码基本相同，我解决了以下挑战：
function onload(d, that) { // d is datum, that is image element.
// Create and fill a canvas to work with.
var mercatorCanvas = d3.create("canvas")
.attr("width",tileWidth)
.attr("height",tileHeight);
var mercatorContext = mercatorCanvas.node().getContext("2d");
mercatorContext.drawImage(d.image, 0, 0, tileWidth, tileHeight); // move the source tile to a canvas.
//
var k = d.key; // the tile address.
var tilesAcross = 1 << k[2]; // how many tiles is the map across at a given tile's zoom depth?
// Reference projection:
var webMercator = d3.geoMercator()
.scale(tilesAcross/Math.PI/2) // reference projection fill square tilesAcross units wide/high.
.translate([0,0])
.center([0,0])
// Reprojected tile boundaries in pixels.
var reprojectedTileBounds = path.bounds(d),
x0 = reprojectedTileBounds[0][0] | 0,
y0 = reprojectedTileBounds[0][1] | 0,
x1 = (reprojectedTileBounds[1][0] + 1) | 0,
y1 = (reprojectedTileBounds[1][1] + 1) | 0;
// Get the tile bounds:
// Tile bounds in latitude/longitude:
var λ0 = k[0] / tilesAcross * 360 - 180, // left
λ1 = (k[0] + 1) / tilesAcross * 360 - 180, // right
φ1 = webMercator.invert([0,(k[1] - tilesAcross/2) ])[1], // top
φ0 = webMercator.invert([0,(k[1] + 1 - tilesAcross/2) ])[1]; // bottom.
// Create a new canvas to hold the what will become the reprojected tile.
var newCanvas = d3.create("canvas").node();
newCanvas.width = x1 - x0, // pixel width of reprojected tile.
newCanvas.height = y1 - y0; // pixel height of reprojected tile.
var newContext = newCanvas.getContext("2d");
if (newCanvas.width && newCanvas.height) {
var sourceData = mercatorContext.getImageData(0, 0, tileWidth, tileHeight).data,
target = newContext.createImageData(newCanvas.width, newCanvas.height),
targetData = target.data;
// For every pixel in the reprojected tile's bounding box:
for (var y = y0, i = -1; y < y1; ++y) {
for (var x = x0; x < x1; ++x) {
// Invert a pixel in the new tile to find out it's lat long
var pt = p.invert([x, y]), λ = pt[0], φ = pt[1];
// Make sure it falls in the bounds:
if (λ > λ1 || λ < λ0 || φ > φ1 || φ < φ0) { i += 4; targetData[i] = 0; continue; }
// Find out what pixel in the source tile matches the destination tile:
var top = (((tilesAcross + webMercator([0,φ])[1]) * tileHeight | 0) % 256 | 0) * tileWidth;
var q = (((λ - λ0) / (λ1 - λ0) * tileWidth | 0) + (top)) * 4;
// Take the data from a pixel in the source tile and assign it to a pixel in the new tile.
targetData[++i] = sourceData[q];
targetData[++i] = sourceData[++q];
targetData[++i] = sourceData[++q];
targetData[++i] = 255;
}
}
// Draw the image.
if(target) newContext.putImageData(target, 0, 0);
}
// Add the data to the image in the SVG:
d3.select(that)
.attr("xlink:href", newCanvas.toDataURL()) // convert to a dataURL so that we can embed within the SVG.
.attr("x", x0)
.attr("width", newCanvas.width)
.attr("height",newCanvas.height)
.attr("y", y0);
}
具有覆盖功能的常规瓷砖地图具有几个坐标系：
任何滑动地图的目标都是在可用的系统中统一这些坐标。
当我们重新投影瓷砖时，我们需要添加一个坐标空间：
也许有优化将像素转换为纬度的计算的空间，但这可能会很困难。
不幸的是，代码太长了，无法在片段中展示，因此我制作了一些示例来演示。
这些内容只经过了最少的测试，如果我能完成基础瓦片库，我会为此目的派生它，同时它可以作为一个示例。代码的核心在于d3-reprojectSlippy.js文件中的geoTile.tile()，其中包含进入/更新/退出循环（相当基本）和上述的onload函数。由于我会在一边处理瓦片，所以我会保持这个答案的更新。