瓦片地图 #

什么是瓦片 #

地图不是一整张大图,而是被切成无数个小方块,每个方块就是一张瓦片(tile)。浏览器只加载屏幕范围内需要的瓦片,拖动地图时动态加载新的瓦片,所以加载很快。

为什么用瓦片 #

• 加载快:只加载看得见的,不是全部地图
• 缓存友好:瓦片是固定图片,可以长期缓存
• 并发好:多张瓦片并行请求,不卡顿

金字塔模型 #

• 最底层(级别0)只有1张瓦片
• 每放大一级,瓦片数 ×4
• 通常用256×256或512×512像素一张
• 比如 Leaflet 里 zoom=0 一张图,zoom=3 就是 8×8=64张

常见瓦片格式 #

• 传统栅格瓦片:PNG/JPG,如高德、腾讯地图
• 矢量瓦片(PBF):体积小、可以无限放大不模糊,样式在客户端渲染,如 Mapbox

URL 规律 #

https://tile.openstreetmap.org/{z}/{x}/{y}.png

• z 缩放级别
• x 列号,y 行号
• 知道这个规律就能自己拼地图了

WebGIS 里的意义 #

现在前端框架(Leaflet / OpenLayers / Mapbox)渲染地图的核心机制就是瓦片,理解瓦片才能理解地图缓存、性能优化和离线地图方案(如 mbtiles)。