基于时间的MVT服务数据刷新需求：无样式重置更新视口数据

我来分享一下实现这类时间驱动MVT服务且避免样式闪烁的核心思路和具体做法，正好做过类似的需求：

1. 先把MVT数据源的时间参数设计好 #

咱得用模板化的URL来传递时间范围，比如这样的格式：/tiles/{z}/{x}/{y}?start_year={start}&end_year={end}。重点是把时间参数绑定到数据源上，而不是单独的图层配置里——这样后面更新时间时，不用动图层，只改数据源就行。

2. 别每次视图动就请求，只在时间变了才更新 #

监听地图的moveend事件很正常，但别一触发就发请求。咱得加个判断：只有当前选中的时间范围和上次请求的不一样时，才去更新数据源。举个Mapbox GL JS的例子：

let lastTimeRange = { start: 1900, end: 2000 };

map.on('moveend', () => {
  const currentTimeRange = getCurrentTimeRange(); // 替换成你自己的时间选择器获取逻辑
  if (currentTimeRange.start !== lastTimeRange.start || currentTimeRange.end !== lastTimeRange.end) {
    updateMVTDataSource(currentTimeRange);
    lastTimeRange = { ...currentTimeRange };
  }
});

3. 核心：不重置图层，只更新数据源 #

这是避免闪烁的关键！别把图层删了再加，直接修改现有数据源的URL参数，然后调用刷新方法就行。还是Mapbox的例子：

function updateMVTDataSource(timeRange) {
  const source = map.getSource('time-based-mvt');
  // 更新URL里的时间参数
  source.setUrl(`/tiles/{z}/{x}/{y}?start_year=${timeRange.start}&end_year=${timeRange.end}`);
  // 触发瓦片重新加载，但图层样式完全保留
  source.refresh();
}

refresh()只会请求符合新时间范围的瓦片，图层的样式、交互配置都不动，自然就不会有样式重置的闪烁感。

4. 再加个过渡动画，体验更丝滑 #

给图层加个过渡配置，让新瓦片淡入淡出，进一步减少视觉突兀感：

map.addLayer({
  id: 'time-mvt-layer',
  type: 'fill',
  source: 'time-based-mvt',
  paint: {
    'fill-color': '#ff0000',
    'fill-opacity': 0.5,
    // 给透明度加个过渡动画
    'fill-opacity-transition': { duration: 300 }
  }
});

另外别忘了配置合理的瓦片缓存，相同时间范围和坐标的瓦片直接复用，减少不必要的请求。

5. 处理时间切换的边界情况 #

有时候时间范围变了，旧的瓦片缓存还在，可能会出现新旧瓦片混在一起的情况。如果你的地图库支持cacheKey，可以通过修改它来强制缓存失效：

source.setCacheKey(`time-${timeRange.start}-${timeRange.end}`);
source.refresh();

要是不支持这个属性，也可以临时给URL加个冗余参数（比如&t=${Date.now()}）来绕过缓存，但别乱用，不然会影响缓存效率。

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