深入 MapPoster Online 渲染引擎：tiny-skia 双通道道路绘制与超采样抗锯齿原理

MapPoster Online 是一款运行在浏览器中的免费地图海报生成器：选择城市、调整配色，即可导出 300 DPI 的复古风城市地图海报。它无需安装任何软件，核心是一套用 Rust 编写的 WebAssembly 渲染引擎，底层基于 tiny-skia 2D 光栅化库，配合双通道道路绘制与 2× 超采样抗锯齿，让细密的城市路网在高分辨率海报上依然边缘平滑、层次分明。

本文带你拆解这套渲染引擎的关键原理，即使你没有 Rust 背景也能读懂。

一、渲染管线全景：从经纬度到 PNG 像素

一次海报生成，在 wasm/src/lib.rs 中按下面顺序完成：

1. 投影：把经纬度通过 Web Mercator（EPSG:3857）投影成平面米制坐标，实现见 wasm/src/projection.rs
2. 构建路径：将每条道路坐标换算成画布像素坐标，并按 Douglas-Peucker 算法简化折线
3. 分层绘制：背景 → 公园 → 水体 → 道路（Casing + Fill 双通道）→ POI 标记 → 渐晕 → 文字
4. 导出：超采样下采样 → 编码 PNG → 写入 300 DPI 元数据

整个管线跑在 Web Worker 中（src/worker.ts），编译产物是 src/pkg/wasm_bg.wasm，浏览器里无需 GPU 也能高速渲染。

二、tiny-skia 双通道道路绘制：为什么描边必须画两遍

道路渲染的核心在 wasm/src/renderer.rs 的draw_road_paths_on_pixmap中。引擎把道路分成"两个通道"，各走一遍完整的绘制循环：

为什么必须"所有 Casing 先画完，再画所有 Fill"？如果按单条道路"先描边再填充"交替进行，后画的高等级道路 Fill 会被先画的低等级道路 Casing 压住，主干道反而显得"陷"在支路描边下面。两遍分离后，Z 序完全可控。

两遍循环都遵循同一个 Z 序常量：

const DRAW_ORDER: [usize; 6] = [5, 4, 3, 2, 1, 0];

即从最低等级（Default）画到最高等级（Motorway），保证主干道永远压在路网最上层。六种道路类型与 OSM highway 标签一一对应的等级、基础线宽与折线简化阈值定义在 wasm/src/types.rs：

几个值得注意的细节：

• 线宽随导出尺寸自适应：线宽 = 基础宽度 × 缩放因子，缩放因子由海报高度 / 4800计算（见 calculate_road_width_scale），A4 与手机壁纸上道路的视觉粗细一致
• 圆头圆角：所有描边使用LineCap::Round与LineJoin::Round，消除道路末端与拐角处的尖刺
• 小道路跳过 Casing：Residential 与 Default 宽度仅 0.4 px，描边几乎不可见，直接跳过以提升性能
• SVG 导出走独立的 wasm/src/svg_renderer.rs 路径，但复用了同一套 Casing 配色与双通道逻辑

三、地形掩码：让道路不会"长"进江河里

真实路网数据里，桥梁道路会横跨水域。如果直接把道路画在背景上，会出现"水面上浮起一条桥"的违和感。MapPoster Online 用一张独立的路网图层解决它（draw_road_shards_masked_by_terrain_scaled）：

1. 创建与主画布同样大小的透明 Pixmap，把全部道路画进去
2. 用BlendMode::Clear混合模式，以水体和公园的轮廓路径"擦除"路网图层
3. 把擦干净的路网图层合成回主画布

一次擦除，所有跨水道路自然断裂，无需逐条判断道路是否过桥。

四、超采样抗锯齿：2× 渲染 + Box Filter 下采样

锯齿的本质：一条 45° 斜线落在离散像素网格上，边缘必然呈"锯齿状"。tiny-skia 自带像素级抗锯齿，但在 300 DPI 的打印级画布上仍然不够细腻。

MapPoster Online 的做法是经典的超采样（Supersampling）：

1. 放大画布：内部 Pixmap 尺寸 = 逻辑尺寸 ×render_scale（默认 2×，见 lib.rs 中的倍率决策）。2480×3508 的海报实际在 4960×7016 的画布上绘制，坐标换算函数 world_to_screen 直接输出 2× 空间坐标
2. 正常绘制：所有图层在高分辨率画布上光栅化，亚像素边缘获得 4 倍采样密度
3. Box Filter 下采样：导出时对每 2×2 的源像素块取算术平均，把高频锯齿当噪声"抹平"（encode_png）
4. 回到逻辑尺寸：平均后的像素写入 PNG，并插入pHYschunk 标注 300 DPI 物理分辨率

下采样还有个容易踩坑的细节：tiny-skia 的像素是预乘 Alpha的（R = 真实R × A/255），直接平均半透明边缘会偏色。代码预建了一张 256 项的 alpha 倒数查找表（LUT），在平均前先解预乘，保证半透明道路边缘的颜色准确。

💡 2× 超采样的代价是 4 倍的像素内存（约 139 MB 的 RGBA 缓冲区），这也是引擎为每个绘制阶段打[Timing]日志持续监控内存的原因。

五、三个值得学习的性能优化

• Douglas-Peucker 折线简化：道路坐标先简化再绘制，阈值按等级分级（高等级道路保留更多细节）。实现位于 simplify_screen_coords，全程使用距离平方避免开方运算
• 固定数组替代 HashMap：道路类型只有 6 种，分组用[Vec<&Road>; 6]而非哈希表，省去哈希开销（draw_roads_scaled）
• POI 空间网格碰撞检测：判断 POI 标签是否重叠时用空间网格把 O(n²) 扫描降为平均 O(1)（draw_pois_scaled）

六、相关模块速查

理解这套管线后你会发现：一张"简单"的城市地图海报背后，是投影、分层、Z 序、掩码与超采样五大图形学技巧的叠加。而这些全部由一段 WASM 在你的浏览器里毫秒级完成，无需任何安装——这正是 MapPoster Online 作为免费开源项目最迷人的地方。