08. 矢量瓦片与栅格瓦片

JuliusDeng
7 阅读4分钟

08. 矢量瓦片与栅格瓦片

概述

瓦片（Tile）是 Web 地图的核心数据分发机制，将地图按缩放级别和空间范围切割成小块。本节学习：

  • 矢量瓦片（MVT/PBF）原理
  • 栅格瓦片（XYZ/TMS/WMTS）
  • 自建瓦片服务（Martin / Tippecanoe）
  • 常用免费瓦片源汇总

瓦片金字塔

地图瓦片使用金字塔结构组织数据：

zoom=0:  1 个瓦片（全球）
zoom=1:  4 个瓦片（2×2）
zoom=2:  16 个瓦片（4×4）
...
zoom=n:  4^n 个瓦片

每个瓦片用 {z}/{x}/{y} 标识：

  • z：缩放级别
  • x：列号（从左到右）
  • y：行号（从上到下）

矢量瓦片（Vector Tiles）

原理

矢量瓦片以二进制格式（PBF / MVT）存储矢量数据（点/线/面），渲染在客户端完成。

格式

  • MVT（Mapbox Vector Tile）：行业标准格式
  • PBF（Protocol Buffer Format）：数据编码格式

特点

特性说明
文件体积小（二进制压缩）
渲染方式客户端 WebGL 渲染
样式灵活性✅ 极高，可动态修改样式
交互性✅ 支持要素点击、悬停
数据查询✅ 可查询要素属性
缩放清晰度✅ 矢量放大不模糊

在 MapLibre 中使用

map.addSource('vector-tiles', {
  type: 'vector',
  tiles: ['https://example.com/tiles/{z}/{x}/{y}.pbf'],
  maxzoom: 14
})

// 需要指定 source-layer
map.addLayer({
  id: 'buildings',
  type: 'fill',
  source: 'vector-tiles',
  'source-layer': 'building',  // 矢量瓦片中的图层名
  paint: {
    'fill-color': '#aaa',
    'fill-opacity': 0.5
  }
})

⚠️ 矢量瓦片图层需要指定 source-layer，这是瓦片内部的图层名称。

栅格瓦片（Raster Tiles）

原理

栅格瓦片是服务端预渲染的图片（PNG/JPEG），客户端直接显示。

三种规范

XYZ 规范（最常见）
https://tile.openstreetmap.org/{z}/{x}/{y}.png
  • y 轴从上到下递增（North → South）
  • 最常用的栅格瓦片规范
TMS 规范
https://example.com/tiles/{z}/{x}/{y}.png
  • y 轴从下到上递增（South → North）
  • 与 XYZ 的 y 值互补：y_tms = 2^z - 1 - y_xyz

💡 MapLibre 默认使用 XYZ 规范。使用 TMS 瓦片时需要在数据源中设置 scheme: 'tms'。

WMTS 规范

WMTS（Web Map Tile Service）是 OGC 标准，通过参数化 URL 请求瓦片：

https://example.com/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0
  &LAYER=layerName&STYLE=default&TILEMATRIXSET=EPSG:3857
  &TILECOL={x}&TILEROW={y}&TILEMATRIX={z}

特点

特性说明
文件体积较大（图片格式）
渲染方式服务端预渲染
样式灵活性❌ 不可修改
交互性❌ 无法查询要素
缩放清晰度❌ 放大会模糊

在 MapLibre 中使用

map.addSource('osm-raster', {
  type: 'raster',
  tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
  tileSize: 256,
  maxzoom: 19
})

map.addLayer({
  id: 'osm-layer',
  type: 'raster',
  source: 'osm-raster'
})

矢量 vs 栅格对比

维度矢量瓦片栅格瓦片
数据格式PBF/MVT（二进制）PNG/JPEG（图片）
渲染端客户端（WebGL）服务端
文件体积小大
样式修改✅ 动态修改❌ 固定
交互能力✅ 要素级交互❌ 无
缩放表现矢量清晰放大模糊
GPU 消耗较高较低
适用场景交互地图、可视化底图、卫星影像

自建瓦片服务

Martin — 矢量瓦片服务器

Martin 是 MapLibre 生态的矢量瓦片服务器，直接从 PostGIS 生成矢量瓦片。

# 安装
cargo install martin

# 启动（连接 PostGIS）
martin postgresql://user:pass@localhost/mydb

Tippecanoe — GeoJSON 转矢量瓦片

Tippecanoe 将 GeoJSON 转为 MBTiles（矢量瓦片包）。

# GeoJSON → MBTiles
tippecanoe -o output.mbtiles -zg --drop-densest-as-needed input.geojson

其他服务

  • TileServer GL：serve MBTiles 和样式
  • pg_tileserv：PostGIS 矢量瓦片服务
  • t-rex：矢量瓦片生成器

常用免费瓦片源

矢量瓦片

服务URL / 说明
OpenFreeMaphttps://tiles.openfreemap.org/styles/bright
MapLibre Demohttps://demotiles.maplibre.org/style.json
Protomaps开源 PMTiles 格式，可自托管

栅格瓦片

服务URL 模板
OpenStreetMaphttps://tile.openstreetmap.org/{z}/{x}/{y}.png
天地图矢量https://t{0-7}.tianditu.gov.cn/vec_w/wmts?...&tk=KEY
天地图影像https://t{0-7}.tianditu.gov.cn/img_w/wmts?...&tk=KEY
Stamen Terrainhttps://tiles.stadiamaps.com/tiles/stamen_terrain/{z}/{x}/{y}.png

高程瓦片

服务URL
MapLibre DEMhttps://demotiles.maplibre.org/terrain-tiles/tiles.json
Mapzen TerrainTerrarium 编码格式

⚠️ 注意各服务的使用条款和频率限制。商业项目需确认许可协议。

本课小结

  • 矢量瓦片（MVT/PBF）在客户端渲染，支持动态样式和交互
  • 栅格瓦片是预渲染图片，简单但不可交互
  • XYZ 是最常见的瓦片规范，TMS 的 y 轴方向相反
  • Martin 和 Tippecanoe 是常用的矢量瓦片生成工具
  • 选择瓦片类型时权衡：交互性 vs 性能 vs 简便性

📌 上一节：07. GeoJSON 数据实战 📌 下一节：09. Fill 填充图层

avatar
文章
阅读
粉丝