如何高性能使用Mapbox MVT 优化瓦片请求与数据库压力

问题背景 #

• 对MVT运行逻辑存在认知缺口：已知瓦片是类似拼图块的小尺寸地图单元，但未完全掌握MVT完整工作逻辑。Mapbox官方文档说明：Vector tiles are really small, enabling global high resolution maps, fast map loads, and efficient caching.
• 当前实现方案：通过PostGIS直连数据库查询生成MVT返回前端，接口响应类型为application/vnd.mapbox-vector-tile，核心后端代码如下：

with connection.cursor() as cursor:
    cursor.execute(query)
    rows = cursor.fetchall()
    mvt = bytes(rows[-1][-1])

return Response(
    mvt, content_type="application/vnd.mapbox-vector-tile", status=200
)

• 现存性能问题：
  • 每次用户请求都会直接查询数据库，数据库压力随访问量线性上升
  • 前端配置矢量源后，每次移动、缩放地图都会按{z}/{x}/{y}规则请求瓦片接口，触发重复数据库查询，当前矢量源配置代码如下：

{
  type: 'vector',
  tiles: [
    'http://url/{z}/{x}/{y}.mvt'
  ]
}

• 目标需求：仅在特定缩放级别触发瓦片请求，其余时段保留已加载点位不重复请求。例如缩放级别1-7区间仅在z=1时请求一次完成点位绘制，缩放级别达到7时，再请求一次覆盖7-22缩放级别的瓦片更新地图即可。

MVT基础运行逻辑 #

MVT遵循瓦片金字塔切片规则，每个瓦片仅存储对应缩放等级、对应网格范围内的矢量几何与属性数据，前端默认逻辑是实时检查当前视口、当前缩放等级下缺失的瓦片，自动发起请求补全，默认不会跨缩放等级复用已加载瓦片，这也是当前移动、缩放地图就重复发请求的核心原因。

具体实现方案 #

第一步：后端增加缓存层削峰 #

不要让所有请求直接打到数据库：

• 对已经生成过的{z}/{x}/{y}维度的MVT瓦片，用本地磁盘或Redis做持久化缓存，缓存有效期按自身数据更新频率设置即可，比如数据按天更新就设24小时过期。请求到达后端时优先查缓存，命中直接返回，未命中时再查询PostGIS生成瓦片，写入缓存后返回。这一步可以覆盖绝大多数重复请求，数据库压力会降到原来的10%以下。
• 10k坐标点的数据量本身很小，低缩放等级（z1-z6）下单瓦片覆盖范围广，生成的瓦片体积基本都在KB级，缓存命中率极高。

第二步：前端控制请求时机，实现分级加载 #

放弃默认的矢量源自动全量请求逻辑，通过源状态监听+缩放事件控制请求触发时机，完全匹配按需加载的需求：

1. 拆分两个独立的矢量源，分别对应不同缩放区间：
   • 低精度源：配置minzoom:1, maxzoom:6，覆盖z1到z6的显示区间
   • 高精度源：配置minzoom:7, maxzoom:22，覆盖z7到z22的显示区间
2. 地图初始化时，两个源的瓦片地址先设为空数组，不会发起任何请求。等地图加载完成后，先给低精度源设置瓦片地址，触发z1级别的全局瓦片请求。等低精度源数据加载完成后，立刻清空源的瓦片地址配置——此时已经加载到前端的瓦片不会被清除，会在z1-z6区间缩放时自动做客户端放大渲染，后续平移、缩放操作因为源没有配置瓦片地址，不会发起新的请求。
3. 监听地图的zoomend事件，判断当前缩放等级：
   • 当第一次进入z≥7的区间时，给高精度源设置瓦片地址，触发当前视口的高精度瓦片请求，加载完成后同样清空源的瓦片地址，已加载的瓦片会在z7-z22区间自动做客户端缩放渲染，后续操作不会再发请求。
   • 当从高缩放等级缩回到z≤6区间时，直接隐藏高精度图层、显示低精度图层即可，不需要重新请求低精度数据。
4. 核心实现代码参考：

const map = new mapboxgl.Map({
  container: 'map',
  style: 'your-base-map-style-url',
  center: [104, 35],
  zoom: 1
})

let lowLevelLoaded = false
let highLevelLoaded = false

map.on('load', () => {
  // 添加空的低精度矢量源
  map.addSource('low-points', {
    type: 'vector',
    tiles: []
  })
  // 添加低精度点位图层，显示范围1-6
  map.addLayer({
    id: 'low-points-layer',
    type: 'circle',
    source: 'low-points',
    'source-layer': 'your-point-layer-name',
    minzoom: 1,
    maxzoom: 7,
    paint: {
      'circle-radius': 3,
      'circle-color': '#ff0000'
    }
  })

  // 添加空的高精度矢量源
  map.addSource('high-points', {
    type: 'vector',
    tiles: []
  })
  // 添加高精度点位图层，显示范围7-22
  map.addLayer({
    id: 'high-points-layer',
    type: 'circle',
    source: 'high-points',
    'source-layer': 'your-point-layer-name',
    minzoom: 7,
    paint: {
      'circle-radius': 5,
      'circle-color': '#ff0000'
    }
  })

  // 初始加载低精度数据
  map.getSource('low-points').setTiles(['http://url/{z}/{x}/{y}.mvt'])
  lowLevelLoaded = true

  // 数据加载完成后清空瓦片地址，阻止后续自动请求
  map.on('sourcedata', (e) => {
    if (e.sourceId === 'low-points' && e.isSourceLoaded && lowLevelLoaded) {
      map.getSource('low-points').setTiles([])
      lowLevelLoaded = false
    }
    if (e.sourceId === 'high-points' && e.isSourceLoaded && highLevelLoaded) {
      map.getSource('high-points').setTiles([])
      highLevelLoaded = false
    }
  })

  // 第一次缩放到7级及以上时加载高精度数据
  map.on('zoomend', () => {
    const currentZoom = map.getZoom()
    if (currentZoom >=7 && !highLevelLoaded && map.getSource('high-points').tiles.length === 0) {
      map.getSource('high-points').setTiles(['http://url/{z}/{x}/{y}.mvt'])
      highLevelLoaded = true
    }
  })
})

补充优化点 #

• 低缩放等级生成MVT时，可以对点位数据做抽稀处理，z1级别不需要保留10k个点的全部精度，直接用PostGIS的抽稀函数剔除冗余数据，进一步缩小瓦片体积，提升加载速度。
• 如果需要支持用户平移到未加载的视口区域时补全数据，只要监听moveend事件，检查当前视口范围内是否存在未渲染的区域，临时给对应源设置瓦片地址加载缺失区域的瓦片，加载完成后再清空源的瓦片地址即可，不需要全量重刷数据。

内容的提问来源于stack exchange，提问作者code0x00