如何在flutter_map中移动/缩放地图时无闪烁快速加载瓦片？

描述 #

在Flutter中通过flutter_map包集成了Mapbox，同时在flutter_map的子组件中添加了标记、聚合等额外图层。

问题 #

当地图进行移动或缩放操作时，瓦片会延迟约1秒加载，新瓦片加载前会出现空白闪烁现象。

当前代码 #

TileLayer(
  urlTemplate:
      "https://api.mapbox.com/styles/v1/user/clgp8xzs200b301qm7i8k8xo4/tiles/256/{z}/{x}/{y}@2x?access_token={accessToken}",
  additionalOptions: const {
    'accessToken': AppConstants.mapBoxAccessToken,
  },
  tileProvider: NetworkTileProvider(),
),

已尝试方案 #

• 使用flutter_map_tile_caching包
• 调整TileLayer的keepBuffer属性

需求 #

• 移动或捏合地图时，瓦片加载流畅快速，无闪烁
• 即使瓦片需要1秒加载，也不能出现空白闪烁

当前效果 #

地图操作过程中，新瓦片加载前出现明显空白闪烁，加载延迟感强。

期望效果 #

地图操作时无空白闪烁，瓦片过渡平滑自然。

可行解决方案 #

1. 优化flutter_map_tile_caching配置

如果你已经用了FMTC，确保配置到位，增大预加载范围和缓存策略：

// 初始化缓存（在app启动时执行）
await FMTCCache().create('mapbox_tiles');

// 使用FMTC瓦片提供者
TileLayer(
  urlTemplate: "https://api.mapbox.com/styles/v1/user/clgp8xzs200b301qm7i8k8xo4/tiles/256/{z}/{x}/{y}@2x?access_token={accessToken}",
  additionalOptions: const {'accessToken': AppConstants.mapBoxAccessToken},
  tileProvider: FMTC.instance('mapbox_tiles').getTileProvider(),
  // 提前加载相邻级别的瓦片，减少操作时的加载等待
  preloadZoomDelta: 2,
  // 保留更多离屏瓦片，避免快速移动时空白
  keepBuffer: 5,
),

2. 添加瓦片加载过渡与占位符

通过自定义tileBuilder实现淡入效果，同时设置错误/加载占位图，彻底消除空白闪烁：

TileLayer(
  urlTemplate: "...",
  additionalOptions: const {'accessToken': "...",},
  tileProvider: NetworkTileProvider(),
  // 设置加载/错误时的占位图（可以用纯色图或低分辨率瓦片）
  errorImage: AssetImage('assets/map_placeholder.png'),
  // 瓦片加载完成后淡入，避免突兀出现
  tileBuilder: (context, tileWidget, tile) {
    return AnimatedOpacity(
      opacity: tile.loading ? 0 : 1,
      duration: const Duration(milliseconds: 200),
      child: tileWidget,
    );
  },
),

3. 替换高效的瓦片提供者

默认NetworkTileProvider功能有限，改用带缓存和重试的自定义实现，比如基于dio：

class CachedTileProvider extends TileProvider {
  final Dio _dio = Dio();
  final String _cacheDir;

  CachedTileProvider(this._cacheDir);

  @override
  ImageProvider getImage(Coords<num> coords, TileLayerOptions options) {
    final tileUrl = getTileUrl(coords, options);
    final fileName = Uri.encodeComponent(tileUrl);
    final cachePath = '$_cacheDir/$fileName';

    // 优先从缓存读取，缓存不存在再请求网络
    return FileImage(File(cachePath))
      ..resolve(const ImageConfiguration()).addListener(
        ImageStreamListener((_, __) {}),
        onError: (_, __) {
          _downloadTile(tileUrl, cachePath);
        },
      );
  }

  Future<void> _downloadTile(String url, String savePath) async {
    try {
      final response = await _dio.get(
        url,
        options: Options(responseType: ResponseType.bytes),
      );
      await File(savePath).writeAsBytes(response.data);
    } catch (_) {}
  }
}

// 使用方式
TileLayer(
  tileProvider: CachedTileProvider((await getTemporaryDirectory()).path),
  // 其他属性...
),

4. 调整Mapbox瓦片参数

• 降低瓦片分辨率：去掉URL中的@2x，减少单瓦片体积，加快加载速度
• 切换为矢量瓦片：Mapbox矢量瓦片体积远小于栅格瓦片，加载更流畅（需配合flutter_map的矢量瓦片插件）

5. 优化额外图层性能

标记、聚合图层如果数量过多，会占用UI线程资源，间接导致瓦片加载延迟：

• 使用flutter_map_marker_cluster优化聚合逻辑，减少渲染压力
• 实现视口过滤，只渲染当前地图视口范围内的标记

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