如何使用D3将Web Mercator瓦片重投影至任意投影？

Jason Davies的重投影瓦片当年确实让人眼前一亮，虽然现在原站点没法用了，但复刻这个效果其实核心逻辑没那么复杂——就是把标准墨卡托瓦片的坐标映射到你想要的目标投影坐标系里，再通过D3的工具来渲染变形后的瓦片。下面是具体的实现步骤，用现代版的d3-geo-projection和d3-tile就能搞定：

1. 初始化基础投影与瓦片生成器 #

先定义目标投影（比如Mollweide或Interrupted Goode），同时保留d3-tile默认的Mercator瓦片生成逻辑——毕竟我们要处理的就是标准Mercator瓦片集：

// 定义目标投影，这里以Mollweide为例，适配SVG画布尺寸
const width = 800;
const height = 600;
const targetProjection = d3.geoMollweide().fitSize([width, height], {type: "Sphere"});

// 初始化瓦片生成器，匹配Web墨卡托的缩放规则
const tileGenerator = d3.tile()
    .size([width, height])
    .scale(d3.geoMercator().scale() * Math.PI * 2);

2. 获取瓦片并转换坐标映射 #

拿到当前视图下的瓦片集合后，需要把每个瓦片的Mercator像素坐标转换成地理坐标，再映射到目标投影的屏幕坐标：

// 基于当前缩放变换获取瓦片（这里先以初始变换为例）
const initialTransform = d3.zoomTransform(d3.select("svg").node());
const tiles = tileGenerator(initialTransform);

// 遍历瓦片，计算每个瓦片在目标投影下的位置范围
tiles.forEach(tile => {
    // 瓦片在Mercator像素坐标系的四个角点
    const mercatorPixelCorners = [
        [tile.x * 256, tile.y * 256],
        [(tile.x + 1) * 256, tile.y * 256],
        [(tile.x + 1) * 256, (tile.y + 1) * 256],
        [tile.x * 256, (tile.y + 1) * 256]
    ];
    // 把像素点转成地理坐标，再映射到目标投影的屏幕坐标
    const targetScreenCorners = mercatorPixelCorners.map(px => {
        const geoCoord = d3.geoMercator().invert(px);
        return targetProjection(geoCoord);
    });
});

3. 渲染变形后的瓦片（SVG示例） #

用SVG的裁剪路径配合坐标变换，就能把瓦片渲染成目标投影的形状：

const svg = d3.select("svg").attr("width", width).attr("height", height);

// 创建裁剪路径，用目标投影的球体范围限制瓦片显示区域
const clipPath = svg.append("clipPath")
    .attr("id", "projection-clip")
    .append("path")
    .attr("d", d3.geoPath().projection(targetProjection)({type: "Sphere"}));

// 创建瓦片容器，应用裁剪路径
const tileGroup = svg.append("g").attr("clip-path", "url(#projection-clip)");

// 批量渲染瓦片
tiles.forEach(tile => {
    // 计算瓦片在目标投影下的左上角位置和宽高
    const [x0, y0] = targetProjection(d3.geoMercator().invert([tile.x * 256, tile.y * 256]));
    const [x1, y1] = targetProjection(d3.geoMercator().invert([(tile.x + 1) * 256, (tile.y + 1) * 256]));

    tileGroup.append("image")
        .attr("xlink:href", `https://your-tile-server/${tiles.z}/${tile.x}/${tile.y}.png`)
        .attr("x", x0)
        .attr("y", y0)
        .attr("width", x1 - x0)
        .attr("height", y1 - y0);
});

4. 适配缩放交互 #

如果需要支持缩放平移，只需要在zoom事件里重新计算瓦片并更新渲染：

svg.call(d3.zoom()
    .scaleExtent([1, 8])
    .on("zoom", (event) => {
        const newTiles = tileGenerator(event.transform);
        // 清空旧瓦片，重新渲染新集合
        tileGroup.selectAll("image").remove();
        // 重复上面的瓦片渲染逻辑...
    }));

关键注意点 #

• 瓦片服务器CORS：如果使用第三方瓦片服务器（比如OpenStreetMap），需要确保服务器允许跨域访问，否则图片会加载失败。
• 曲面投影的近似性：这种方法是通过坐标点映射实现的近似重投影，完美的逐像素重投影性能开销极大，这个方案是平衡效果和性能的常用选择。
• 扩展投影兼容性：如果用d3-geo-projection里的特殊投影（比如Interrupted Goode），只需要替换targetProjection为对应的投影函数即可，核心逻辑完全通用。

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