3.3 瓦片技术 (Tiling Scheme)

3.3 瓦片技术 (Tiling Scheme)

本节摘要：地图瓦片让大规模地图加载又快又流畅。本节讲瓦片金字塔、层级行列索引、矢量瓦片——地图服务加速的核心技术。

读前必看

阅读完本节，你应当能够：

1. 理解瓦片金字塔
2. 知道 z/x/y 瓦片索引
3. 区分栅格瓦片和矢量瓦片

概念脉络

一、为什么需要瓦片

整张地图太大，一次加载慢且浪费。瓦片把地图按层级切成小方块（如 256x256），前端只加载视野内的瓦片，按需加载，快且省流量。

二、瓦片金字塔

图 3-3 瓦片金字塔

地图按缩放层级分层，每级瓦片数 2^z × 2^z：

• z=0：1 块（全球）
• z=1：4 块
• z=2：16 块
• z 越大越细节，瓦片越多

三、z/x/y 索引

每块瓦片用 z/x/y 索引，URL 形如 `「相关地址请参见官方文档」 x/y 范围，只加载这些瓦片。

四、栅格瓦片 vs 矢量瓦片

栅格瓦片（如 WMTS、XYZ 瓦片）是图片，快但样式固定。矢量瓦片（MVT）传数据，前端渲染，样式动态可控，是现代趋势。

五、瓦片生成与缓存

• 预渲染：提前把所有层级瓦片渲染好存磁盘/CDN，访问快但生成慢、占空间
• 按需渲染：首次请求时渲染并缓存，省空间但首次慢
• GeoWebCache：GeoServer 内置瓦片缓存引擎

六、瓦片方案

常见瓦片方案：

• Google/OSM 方案：z/x/y，原点左上，y 向下增
• TMS 方案：z/x/y，原点左下，y 向上增
• WMTS：标准 OGC，层/样式/格式矩阵

前端库通常支持多种方案，注意 y 方向差异。

⚠️ 常见坑：栅格瓦片样式想动态改——栅格瓦片是图片样式固定，要动态样式用矢量瓦片。

💡 关键直觉：瓦片按 z/x/y 索引，前端按视野加载。栅格瓦片是图片快但样式固定，矢量瓦片传数据样式前端控。预渲染快占空间，按需渲染省空间首次慢。

七、经纬度与瓦片坐标的换算

前端要"按视野加载瓦片"，就得把屏幕范围换算成 z/x/y 瓦片号。以 Web 墨卡托（3857）的 XYZ 方案为例，核心是两次投影：经纬度转墨卡托平面坐标，再按 2 的 z 次方分块取整：

function lonLatToTile(lon, lat, z) {
  const n = Math.pow(2, z);
  const x = Math.floor((lon + 180) / 360 * n);
  const latRad = lat * Math.PI / 180;
  const y = Math.floor((1 - Math.log(Math.tan(latRad) + 1 / Math.cos(latRad)) / Math.PI) / 2 * n);
  return { x, y, z };
}
console.log(lonLatToTile(116.4, 39.9, 12)); // 输出该点在 12 级下的瓦片号
​

反过来，给定瓦片号可以算出它覆盖的经纬度范围。理解这个换算，才能处理"瓦片偏移""白边"这类问题——通常是 y 轴方向（XYZ 向下、TMS 向上）或原点（左上 vs 左下）搞反了。

八、瓦片服务与缓存方案对比

实践中：前端直接用 XYZ 最省事（OpenLayers、Leaflet 都原生支持）；对第三方系统开放用 WMTS 更规范；自己搭渲染管线追求灵活用 MVT。

九、瓦片生成工具链

预渲染瓦片常用这些工具，选型看数据量和更新频率：

# GDAL 生成金字塔和瓦片（栅格）
gdal2tiles.py -z 0-12 -p raster input.tif tiles/

# 矢量瓦片：用 tippecanoe 把 GeoJSON 切 MVT
tippecanoe -zg -o roads.mbtiles roads.geojson

# 从 mbtiles 发布瓦片服务（工具很多，原理一致）
​

增量更新场景别整库重渲：只对变化区域重新生成对应层级瓦片，再覆盖到瓦片目录，配合 CDN 刷新缓存，成本低很多。

十、前端瓦片加载优化

• 并发控制：同时请求瓦片数控制在合理范围（如 6-8 个），避免浏览器连接排队。
• 缩放抖动：两级之间用 fade 过渡，体验更顺。
• 瓦片失效重试：个别瓦片 404 不要整屏重载，按号重试或跳过。
• 本地缓存：前端缓存命中率高（同视野重复访问），给瓦片请求加合适的缓存头。

十一、瓦片方案选型的完整对比

选瓦片方案要同时看数据性质、访问模式和团队能力：

一个常见误区是把"瓦片"等同于"地图图片"。矢量瓦片、COG、3D Tiles 都是瓦片思想在不同数据上的延伸——把大对象切成小块按需加载。理解了这个本质，选型就有了主线：按数据是什么、在哪个端消费、要不要动态样式来判断。

十二、瓦片服务常见的性能指标

上线后跟踪这些指标判断瓦片服务是否健康：

• 命中率：瓦片缓存命中率（目标 90% 以上），命中率低说明缓存策略或预生成不到位。
• 首次加载时间：首屏地图加载耗时，反映瓦片服务响应和网络质量。
• 错误率：404 和 5xx 比例，异常升高通常是瓦片缺失或服务过载。
• 带宽：瓦片传输量，决定 CDN 成本，矢量瓦片通常比栅格省得多。

核心回顾

• 瓦片目的：地图切小块按需加载，快且省流量。
• 金字塔：每级 2^z × 2^z 块，z 越大越细节。
• 索引：z/x/y，前端按视野算需要的瓦片。
• 栅格 vs 矢量：栅格瓦片图片样式固定，矢量瓦片 MVT 数据样式前端控。
• 缓存：预渲染（快占空间）/按需渲染（省空间首次慢）/GeoWebCache。
• 方案：Google/OSM（y 向下）、TMS（y 向上）、WMTS 标准。

第 3 章结束。下一章讲前端怎么消费这些服务。