企业官网建设流程全解析

1. 先把问题拆开：地图打印质量到底由哪些环节决定

做地图导出这几年，我经手过不少“屏幕上看着挺好、打出来一塌糊涂”的案例。最常见的情况是：页面里的地图矢量边界清晰、配色也舒服，导出成图片再送进打印机，边界开始发毛，分级设色的区块糊成一片，深色底图还会透出纸背的印痕。很多人第一反应是“打印机不行”或者“分辨率不够”，但真正的原因往往分散在渲染、像素换算、色彩空间、输出格式、打印设置这五个环节里，任何一个环节掉链子，最后呈现的都是同一张糟糕的纸。

这篇内容聊的是 OpenLayers 地图在打印场景下的质量优化，核心围绕两条主线：分辨率链路和色彩管理链路。前者解决“清不清楚”，后者解决“颜色准不准”。适合两类人看：一类是做 GIS 前端、需要给业务方提供“导出打印图”功能的开发者；另一类是自己出图、需要把地图放进报告或展板的制图人员。哪怕你只会改几个参数，下面这些换算关系和踩坑记录也能直接拿去用。

我先把结论摆出来：地图打印质量不是靠“把 pixelRatio 调到 4”这种单一动作解决的。它是一个从目标纸张尺寸反推输出像素，再反推地图分辨率，最后约束配色与输出格式的完整链条。链条上每一个数字都有来源，拍脑袋设定的参数，十有八九会在某一步把前功尽弃。

1.1 屏幕像素与打印像素不是一回事

屏幕上的“像素”是发光点，打印机上的“点”是墨滴，两者之间没有天然对应关系，唯一的桥梁是物理尺寸。一张 A3 纸是 297×420 毫米，这是硬约束；你要在这张纸上放多少像素，取决于你希望的输出精度。300 DPI 意味着每英寸排 300 个像素，换算下来 A3 需要 3508×4962 像素，这就是硬指标，跟你的屏幕是 1080P 还是 4K 毫无关系。

麻烦在于，浏览器里的一切尺寸都以 CSS 像素为单位，而 OpenLayers 的getSize()返回的也是 CSS 像素。当你把地图容器设为 800×600 时，它实际渲染的 canvas 可能是 1600×1200（设备像素比为 2），也可能是 800×600。很多人直接把getSize()的结果当成输出像素，导出的图在纸上一放大就露馅，根源就在这里。

我的建议是养成一个习惯：看到任何尺寸数字，先问一句它是什么单位。CSS 像素、设备像素、输出像素、毫米、英寸，这五个单位在同一段代码里混用，是打印质量事故的第一大来源。后面第 2 章我会把换算关系全部展开，这里你先记住一个原则——地图的 CSS 尺寸决定“看到多大范围”，pixelRatio 决定“这个范围被采样得多细”，二者相乘才是最终输出像素。

1.2 渲染链路里四个最容易掉质量的位置

第一个位置是瓦片层级。地图放大到某个级别后，如果瓦片服务没有对应层级的数据，OpenLayers 会把上一级瓦片拉伸显示，屏幕上可能还能接受，打印时就变成明显的马赛克。判断方法很简单：看source.getTileGrid().getMaxZoom()，再对比当前view.getZoom()，超过就是拉伸。

第二个位置是文字与线划的渲染时机。地图标注如果是栅格化的，字号在 CSS 像素下可能只有 10px 左右，乘以 pixelRatio 后虽然像素够了，但字形边缘的抗锯齿是在低分辨率下计算的，放大后依然发虚。解决办法是提高 pixelRatio 让浏览器在更高分辨率下重新排版文字，而不是把低分辨率图放大。

第三个位置是canvas 尺寸上限。浏览器的 canvas 有面积限制，不同内核差异很大，超过限制会直接返回空白或者只渲染一部分。A3 300 DPI 是 1740 万像素，乘以 4 字节是 70MB 左右，加上瓦片缓存和图层对象，很容易把内存顶到天花板。这个坑我在移动端和低配机器上都遇到过，表现是导出的图右下角一片白。

第四个位置是导出格式与压缩。PNG 无损但体积大，JPEG 体积小但会在文字和线划边缘产生振铃。地图这种“大面积纯色 + 细线条 + 小文字”的内容，对 JPEG 特别不友好，质量系数低于 0.9 时，细线会断、文字会糊。这个取舍后面单独说。

1.3 分辨率与色彩为什么要分成两条线来处理

分辨率和色彩是两套独立的系统，混在一起调会互相干扰。分辨率是几何问题，涉及像素、尺寸、比例尺，全是确定的数学关系，算对了就是对的。色彩是物理问题，涉及色域、墨量、纸张吸收，没有绝对正确，只有“在给定设备上尽可能接近”。

举个典型例子：你把 pixelRatio 从 1 提到 3，图确实清楚了，但深色区块的面积也变大了，打印时墨量集中，纸张容易起波浪，颜色反而更深更闷。这时候你需要的不是继续加分辨率，而是调整配色、降低饱和度、控制总墨量。反过来，你把颜色调得很淡以适配打印，屏幕上看着就发灰，需要给屏幕预览单独留一套配色。

我的做法是先锁分辨率，再调色彩。分辨率定下来之后，输出像素和比例尺都是固定值，这时候再去打印小样、比对颜色，变量就少了一个。顺序反了，你永远不知道颜色偏差是配色问题还是采样问题。

2. 分辨率这条线：从纸张尺寸到输出像素的完整换算

这一章全部是计算，但我保证每一步都有实际意义。你可以拿一张纸、一个计算器，跟着算一遍，算完之后你对“导出多大图”这件事就不会再犹豫了。

2.1 DPI、PPI、像素比，三个词别混着用

DPI 是打印机的墨点密度，PPI 是图像本身的像素密度，设备像素比是屏幕的物理像素与 CSS 像素之比。日常交流里大家习惯统称 DPI，但写代码时必须分清。地图导出场景下，我们真正控制的是输出图像的像素总数，DPI 只是用来把像素总数和纸张尺寸绑定的一个系数。

常用纸张的像素对照，我整理成表，直接查就行：

计算方式很简单：毫米数除以 25.4 得到英寸，再乘以 DPI。比如 A3 短边 297÷25.4≈11.69 英寸，乘 300 得 3508。这个数字建议直接记在脑子里，后面所有推导都从它出发。

至于多少 DPI 够用，我的经验是：文字为主的报告插图 200 DPI 起步，展板和大尺寸挂图 150 DPI 也能接受，需要放大看细节的规划图建议 300 DPI，超过 300 DPI 对人眼在正常阅读距离下的收益已经很小，除非是精细线划图或者要二次翻拍。盲目上 600 DPI，文件体积和渲染时间会翻四倍，收益却不成比例。

2.2 输出像素定下来之后，地图分辨率怎么反推

这是整篇内容里最关键的一段。OpenLayers 的view.getResolution()表示“一个 CSS 像素代表多少地图单位”，当地图单位是米时，它就是米/像素。打印比例尺的本质是“纸上 1 毫米代表实地多少米”，两者的桥梁还是 DPI。

推导过程如下：输出图像上 1 个像素对应纸上的 1/DPI 英寸，也就是 0.0254/DPI 米（纸上长度）。这个像素代表实地的距离，等于比例尺分母乘以纸上长度。所以：

每个输出像素对应的实地距离 = 比例尺分母 × 0.0254 ÷ DPI

而 OpenLayers 的 resolution 是每个 CSS 像素对应的实地距离，输出像素 = CSS 像素 × pixelRatio，所以：

resolution = pixelRatio × 比例尺分母 × 0.0254 ÷ DPI

拿一个具体例子验证：要出 1:10000 的图，输出 300 DPI，pixelRatio 设为 3。代入公式，resolution = 3 × 10000 × 0.0254 ÷ 300 = 2.54 米/CSS 像素。这意味着地图上每个 CSS 像素代表实地 2.54 米，输出图像每个像素代表 0.8467 米，乘以 300 再除以 0.0254，正好回到 10000。闭环成立。

反过来也常用：手里有一张已经渲染好的图，想知道它的实际比例尺。公式变成 比例尺分母 = resolution × DPI ÷ (pixelRatio × 0.0254)。比如 resolution 是 1.5，pixelRatio 是 2，输出 200 DPI，比例尺就是 1.5×200÷(2×0.0254)≈5905，约等于 1:5900。这个反推在验收别人做的图时特别好用。

需要提醒一点：这套公式只在地图单位为米时成立。如果你的数据是经纬度，必须先投影到米制坐标系，否则算出来的比例尺没有物理意义。另外，Web 墨卡托投影在高纬度地区有面积和长度变形，比例尺只在特定纬度上准确，出图时最好在图面标注“比例尺仅供参考”或者注明标准纬线。

2.3 OpenLayers 里控制像素比的正确姿势

pixelRatio是 Map 构造时的选项，默认取window.devicePixelRatio。它的作用是让 canvas 的实际像素数等于 CSS 尺寸乘以这个比值，从而在高分屏上显示更细腻。但要注意，它影响的是渲染采样密度，不改变地图范围。你把 pixelRatio 从 1 提到 3，看到的地理范围完全一样，只是同样范围内采样了更多像素。

运行时修改 pixelRatio 是不生效的，这一点坑过不少人。想改变它，只能新建一个 Map 实例。所以高保真导出的标准做法是：创建一个离屏的临时地图实例，专门用于导出，参数按目标纸张配置好，渲染完成后读取 canvas，导出结束再销毁。这样既不影响页面上正在交互的地图，也能自由设定尺寸和像素比。

临时容器的写法有讲究。用display: none会导致容器尺寸为 0，地图根本渲染不出来；用visibility: hidden配合绝对定位移出视口是可行的，但必须给它明确的宽高。我通常这么写：

.export-stage { position: fixed; left: -100000px; top: 0; visibility: hidden; pointer-events: none; }

容器留在文档流里、有真实尺寸、不可见、不响应交互，这是最稳的组合。渲染完成后再把 canvas 取出来，用完map.setTarget(null)释放资源，避免内存泄漏。

2.4 瓦片层级不够，再怎么放大也是糊的

分辨率算对了，图还是糊，八成是瓦片层级的问题。OpenLayers 在请求不到对应层级瓦片时，会拿最近可用层级的瓦片做缩放，这个过程是插值拉伸，屏幕上看可能只是“稍微软一点”，打印出来就是明显的方块感。判断方法：打印当前view.getZoom()和瓦片源的最大层级，如果当前层级超过最大层级，就是拉伸。

还有一种隐蔽情况：瓦片本身是 256 像素的，但服务端在高层级返回的其实是低层级放大后的图。这种“假高清”从 API 上看不出来，只能靠肉眼比对——在最大层级下截一小块，看看建筑轮廓边缘是不是有锯齿状的插值痕迹。

应对策略分两种。如果是自己的瓦片服务，提前把目标比例尺对应的层级切出来，别等到出图时才发现缺数据。如果用的是外部服务且无法控制层级，那就降低输出比例尺，让地图分辨率落在瓦片真实支持的范围内，宁可图面范围大一点，也不要一张糊图。这个取舍在实地项目中很常见，我的原则是清晰度优先于覆盖范围。

2.5 位图导出和矢量导出，什么时候该换路线

OpenLayers 默认渲染到 canvas，导出就是位图。位图的优点是所见即所得，样式、标注、图标全都一致；缺点是一旦定了像素就锁死了，后期想放大或者改配色都得重新渲染。

如果最终用途是印刷且需要极高精度，可以考虑矢量路线：把要素导出成 GeoJSON 或 SVG，再在专业制图软件里排版出图。这条路线的好处是线划和文字都是矢量，任意分辨率都不糊，色彩也能按印刷标准精确控制。代价是样式要重新做一遍，地图上的图标、标注避让、注记优先级这些在浏览器里由引擎自动处理的东西，得手动还原。

我的判断标准是：图面以线划和文字为主、且对精度要求高，走矢量；图面有大量影像底图、复杂符号、动态效果，走位图。大多数业务系统里的“导出打印图”，位图路线已经够用，把像素比和瓦片层级控制好，质量差距没有想象中那么大。

3. 色彩这条线：为什么屏幕鲜艳、打印发闷

分辨率解决“形”，色彩解决“神”。地图配色在屏幕上是为了辨识度，在纸上还要考虑墨量、纸张、套印精度。这一章不讲虚的理论，只讲能落地的约束。

3.1 屏幕是加色、纸张是减色，色域天生对不上

屏幕靠红绿蓝三色光叠加显色，越叠越亮；打印靠青品黄黑四色墨吸收光线，越叠越暗。两者的色域范围不一样，屏幕能显示的鲜艳青色、亮橙色，很多在 CMYK 里根本调不出来。你在地图上用一个饱和度很高的蓝色表示水系，屏幕上很跳，打印出来往往是发紫的深蓝，跟旁边的深灰色区块挤在一起，层次全没了。

这不是打印机的问题，是物理限制。应对办法不是去追求“打印出来和屏幕一模一样”，那不现实，而是在设计配色时就为打印留出余量。具体做法：主色饱和度控制在 60% 到 80% 之间，避免纯色；分级设色时优先拉开明度差，而不是只拉色相差；重要信息不要只靠颜色区分，加上纹理、线型或标注。

我做过一个对比测试，同一套五级分区配色，纯色相区分在灰度打印后几乎无法分辨，改成明度递进后，即使黑白复印也能看出层次。这个习惯一旦养成，地图的可读性会整体上一个台阶。

3.2 sRGB 是安全区，别让色彩空间在中途漂移

浏览器里的 canvas 默认按 sRGB 解释颜色，导出的 PNG 通常不带 ICC 配置文件，打印软件会按 sRGB 处理。这条链路是通的，前提是中间不要引入别的色彩空间。常见的问题是底图影像自带 Adobe RGB 配置，叠加到 canvas 上时被强制转成 sRGB，颜色会发生偏移，尤其是绿色植被区域，转完之后明显发灰。

另一个容易忽略的点是 CSS 颜色和 canvas 颜色的解释一致性。现代浏览器在高色域屏幕上会对 CSS 颜色做色彩管理，但 canvas 的fillStyle行为可能不同，同一串十六进制颜色，画在 DOM 元素上和画在 canvas 上，截屏比对会有细微差别。解决办法是地图上所有颜色统一从 canvas 绘制，不要在 HTML 层叠一层半透明遮罩来调色，那层遮罩在导出时要么丢失，要么颜色对不上。

如果你确实需要嵌入 ICC 配置，canvas 原生做不到，得靠后处理。简单的做法是在生成 PDF 时指定输出色彩空间，让 PDF 阅读器或打印驱动去做转换。这一步的收益在普通办公打印上不明显，但在专业印刷流程里是必须的。

3.3 黑色的坑：四色黑和单色黑差别很大

地图上的文字、边界线、注记，大量使用黑色。RGB 里的纯黑（0,0,0）转到 CMYK 后，不同软件的处理不一样，有的转成单色黑 K100，有的转成四色黑（比如 C60 M40 Y40 K100）。四色黑在屏幕上看着更“厚”，但打印时四块版都要套准，稍微有一点偏移，文字边缘就会出现彩边，小字号直接糊掉。

我的建议很明确：地图上的文字和小线划，一律用单色黑。在 canvas 里没法直接指定 CMYK，但可以在导出后处理，或者在设计阶段就用深灰色（比如 #1A1A1A）代替纯黑，转成 CMYK 后更接近单色黑的效果，视觉上也更柔和。大面积深色背景则相反，要控制总墨量，四色叠加的总覆盖率一般不超过 300%，否则纸张容易变形，背面还会透印。

还有一个细节：细线的最小宽度。0.1 毫米在 300 DPI 下大约是 1.2 个像素，这已经是临界值，再细打印机会直接丢掉或者断断续续。地图上的行政边界、等高线，建议不小于 0.15 毫米，也就是 300 DPI 下的 1.8 像素。在 canvas 里设置线宽时，记得把 pixelRatio 考虑进去，lineWidth的单位是 CSS 像素，实际输出像素要乘以 pixelRatio。

3.4 大面积色块和深色底图的处理经验

深色底图在屏幕上很酷，打印时是灾难。深色区域墨量集中，纸张吸水后局部膨胀，干燥后收缩，图面会起波浪；如果双面打印，背面内容会透出来。更麻烦的是，深色底上的浅色文字，打印时墨会稍微洇开，字迹变粗，笔画粘连。

如果设计上必须用深色底，我的处理顺序是：先把深色改成中深灰（明度 30% 到 40%），再检验浅色文字的可读性；文字加粗一档，字号放大 10%；重要标注加白色描边，描边宽度约字号的 8%。这样处理后，打印出来的可读性接近屏幕效果，墨量也可控。

大面积色块还有一个问题是墨量不均匀。大幅面打印机在连续大面积平网处容易出现条纹，尤其是 30% 到 60% 的中间调。规避方法是给色块加一点极轻微的纹理或噪点，破坏平网的连续性，肉眼几乎看不出来，但能显著改善打印均匀度。这个技巧在展板制作里很常用。

4. 一套可复用的高保真导出流程

前面讲的是原理，这一章是操作。我把整个流程拆成五步，每一步都有对应的代码位置和检查点，你可以照着搭一遍，也可以只取其中需要的部分。

4.1 第一步：把目标参数全部算出来，写进配置

动手写代码之前，先填一张参数表。这张表是整个导出流程的“单一事实来源”，后面所有代码都从它取值，避免散落在各处的魔法数字。

注意cssW不要取整得太狠，1754 和 1754.5 在最终输出上会差一个像素，虽然影响极小，但如果要做精确拼版，最好保留整数并让outW = cssW × pixelRatio严格成立。我一般先定 pixelRatio 和 cssW，再反算 outW，保证三者自洽。

pixelRatio 的取值需要权衡。取 1 最省内存，但文字渲染精度不够；取 2 是甜点区，大多数场景够用；取 3 适合小字号密集的图，但内存占用翻倍。A3 300 DPI 在 pixelRatio=2 时，canvas 是 3508×4962，约 70MB，加上瓦片缓存，桌面浏览器没问题，移动端就要小心了。

4.2 第二步：搭一个专用于导出的离屏地图

临时地图的图层和视图配置从主地图复制，但尺寸和像素比按参数表设定。关键点是等所有瓦片加载完成再读取 canvas，否则导出的图会缺块。rendercomplete事件可以用，但它在某些情况下触发得偏早，更稳的做法是同时监听瓦片加载计数。

大致骨架是这样：

const stage = document.createElement('div'); stage.className = 'export-stage'; stage.style.width = cssW + 'px'; stage.style.height = cssH + 'px'; document.body.appendChild(stage); const exportMap = new Map({ target: stage, layers: buildExportLayers(), view: new View({ projection: 'EPSG:3857', center: targetCenter, resolution: resolution, rotation: 0 }), pixelRatio: pixelRatio, controls: [], interactions: [] }); exportMap.once('rendercomplete', () => { const canvas = stage.querySelector('canvas'); const dataUrl = canvas.toDataURL('image/png'); handleExport(dataUrl); exportMap.setTarget(null); stage.remove(); });

controls和interactions置空很重要，否则缩放按钮、比例尺控件会被一起画进图里。视图的rotation设为 0，避免带着旋转角度出图导致边缘出现空白三角。

如果图层里有动画、闪烁、时间轴，导出前要全部停掉。我遇到过一个问题：某个图层的样式里用了Math.random()做轻微抖动，每次渲染位置都不同，导出结果和预览对不上。这类非确定性样式在导出场景下必须固定种子或者直接关闭。

4.3 第三步：处理跨域和瓦片污染

canvas.toDataURL()抛出安全错误，是导出功能最常见的报错。原因是 canvas 被“污染”了——DrawImage 了跨域图片且没有正确的 CORS 头。瓦片服务如果没返回Access-Control-Allow-Origin，这张 canvas 就只能看不能读。

处理方式分几种情况。瓦片服务可控，加上 CORS 头，前端在 source 里设置crossOrigin: 'anonymous'，这是最干净的做法。服务不可控，可以考虑在服务端做同源转发，把瓦片缓存到自己的域名下，前端从同源地址取图，污染问题自然消失。还有一种情况是图标、字体等静态资源跨域，同样需要处理，不能只盯着瓦片。

排查的时候有个技巧：在控制台里逐个图层开关，看关掉哪个图层后toDataURL不再报错，就能定位到具体的污染源。比盲猜快得多。

4.4 第四步：选格式、定质量、控体积

地图内容以线划和文字为主，PNG 是首选。无损压缩不会在边缘产生伪影，纯色区域压缩率很高，实际体积往往比预想的小。A3 300 DPI 的地图 PNG，如果色块规整，通常能压到 3MB 到 8MB，完全可以接受。

如果图面有影像底图，PNG 体积会迅速膨胀，这时候可以考虑 JPEG，质量系数给到 0.92 以上。低于这个值，细线开始出现断续，文字边缘出现彩色噪点。更好的方案是分层导出：底图影像用 JPEG，线划和标注用 PNG 透明层，最后合成。这样兼顾体积和清晰度，代价是多一步合成操作。

还有一个小技巧：导出前把 canvas 的背景色显式填充为白色。OpenLayers 的 canvas 默认是透明的，PNG 保留透明通道，打印时透明区域会被当成白色还是黑色，取决于软件，有的会直接印成黑底。显式填白能避免这个不确定性。

4.5 第五步：打印端的设置同样决定成败

图导出来了，打印设置没对，照样白搭。最常见的两个坑：一是打印机驱动里的“适合页面”选项，会把图自动缩放，比例尺全乱；二是色彩管理选项，有的驱动默认开了“鲜艳模式”，颜色被二次加工。

我的固定操作是：纸张尺寸手动指定，缩放选“实际大小”或 100%，色彩管理选“由应用程序管理”或者关闭驱动的自动增强，图像类型选“照片”或“高质量”，不要选“文本”模式。如果支持，先打一张小样，量一下图上的比例尺线段，确认 1 厘米就是 1 厘米，再去打正式的。

浏览器直接打印网页里的地图，可靠性很差。canvas 在打印时可能重绘、可能分页截断、可能因为 DPI 不匹配而模糊。我的建议是永远走“导出图片再打印”这条路，把浏览器打印只当成预览手段。真要控制分页，用打印样式表把地图容器设为不可分割：

@media print { @page { size: A3 portrait; margin: 0; } .map-print-area { width: 297mm; height: 420mm; break-inside: avoid; page-break-inside: avoid; print-color-adjust: exact; -webkit-print-color-adjust: exact; } }

print-color-adjust: exact这一句很关键，否则浏览器为了省墨会把背景色和深色区块直接去掉，打印出来是一片白。

5. 常见问题与排查清单

这一章是我这些年遇到的问题汇总，按现象分类，每条都给出定位顺序。遇到问题时从上往下排查，比漫无目的地试参数快得多。

5.1 导出图模糊的三类原因

第一类，像素不够。表现是整体发软，文字边缘有渐变的灰边。检查输出像素是否达到目标 DPI 要求，检查 pixelRatio 是否被意外设成了 1。这类问题最好判断，量一下图像的实际像素数就知道。

第二类，瓦片层级不够。表现是局部模糊，尤其是放大后的区域，能看出方块状的插值痕迹。检查当前 zoom 和瓦片源最大层级的关系，超过就是拉伸。这类问题的迷惑性在于整体像素数是够的，但内容本身没有那么多细节。

第三类，CSS 缩放。表现是图整体清晰但比例不对，或者边缘有半个像素的偏移。检查临时容器的尺寸是否被 CSS 的transform: scale()或者zoom影响，导出容器必须保持 1:1 的物理尺寸，任何缩放都会导致采样错位。

排查顺序建议：先量像素，再看瓦片层级，最后查 CSS。因为前两个是数据问题，第三个是样式问题，改样式的影响面更大，放在最后确认。

5.2 颜色偏差的定位顺序

颜色不对，先分清是整体偏还是局部偏。整体偏色，比如整张图偏黄或偏蓝，问题多半在打印驱动或纸张，换一台打印机或者换一种纸对比一下就能确认。局部偏色，比如只有水系偏紫、只有绿地发灰，问题在配色或色彩空间转换。

定位局部偏色，我常用的方法是做一张色卡：把地图上用到的所有颜色做成小色块，排成一行，一起导出打印。打印出来后逐个比对，偏得厉害的颜色就换掉。这个方法很笨，但极其有效，而且一次做完可以复用很久。

还有一种情况是深浅不对但色相没错。这通常是墨量或者纸张吸收的问题，同一套颜色在不同纸上表现差异很大。涂布纸色彩饱和度高，胶版纸偏暗，新闻纸更灰。正式出图前，一定要用最终纸张打小样。

5.3 空白、缺块、只渲染一半

导出图出现大面积空白，尤其是右侧或下侧，基本可以锁定 canvas 尺寸超限。浏览器的 canvas 面积上限不是一个统一数字，桌面端和移动端差别很大，超过之后不一定报错，可能只是静默地渲染失败。

验证方法：把输出尺寸减半再导一次，如果空白消失，就是尺寸问题。解决办法有两个，一是降低 pixelRatio 或 DPI，二是分块渲染再拼接。分块渲染的思路是把大图切成若干块，每块单独渲染，最后用drawImage拼到一张总图上。实现起来麻烦一些，但可以突破单张 canvas 的上限，大幅面出图必备。

缺块还有可能是瓦片没加载完。表现是随机位置的方块状空白，重导一次位置可能变化。这就是渲染时机问题，确保rendercomplete之后再读取，并且给瓦片加载留足够的超时兜底。

5.4 常见问题速查表

这张表建议打印出来贴在工位上，遇到问题先扫一眼，能省掉大量试错时间。

6. 几个踩坑之后才明白的道理

参数调到最后，我发现真正影响出图质量的，往往不是某个神奇的数值，而是几个很朴素的习惯。

第一个习惯是先打小样。再精确的计算，也抵不过一张 A4 小样的直观反馈。我现在的流程固定是：目标 A1 的图，先按比例缩到 A4 打一张，看线划粗细、文字大小、颜色层次，确认没问题再出大图。小样的成本几乎为零，返工大图的成本很高，这笔账怎么算都划算。

第二个习惯是给参数留文档。每张正式出图的旁边，我都会记一行：纸张、DPI、比例尺、pixelRatio、配色版本。过几个月再来改同一张图，没有这行记录，等于从头再来一遍。团队协作时更是如此，参数不写清楚，别人接手就是一场灾难。

第三个习惯是别迷信高分辨率。我见过太多人把 DPI 拉到 600，结果文件几百兆，打开卡半天，打印出来和 300 DPI 肉眼无差别。分辨率够用就好，把省下来的精力放在配色和排版上，收益高得多。地图传达信息，清晰可读比像素数量重要。

最后一个体会是关于灰度兼容。很多地图最终会被黑白复印或者传真，如果配色只靠色相区分，转灰度后就是一团糊。我现在的习惯是每张图做完，先转成灰度看一眼，如果层次还在，这张图的配色基本就过关了。这个方法简单粗暴，但比任何色彩理论都管用。