flutter_map自定义TileProvider缩放/平移时API请求过多问题

问题根源分析 #

你的代码存在几个导致缓存失效、重复请求的核心问题：

• CacheManager实例不共享：每个CachedTileProvider都新建独立的CacheManager，不同实例的缓存完全隔离，相同瓦片无法跨Provider复用缓存，还会浪费系统资源。
• URL替换逻辑冗余错误：getTileUrl中replaceAll('$apiKey', apiKey)属于多余操作——你的urlTemplate已经直接传入了$apiKey变量，重复替换可能生成错误URL，导致缓存Key失效，触发不必要的新请求。
• 缓存过期时间过短：stalePeriod设为5分钟，地图瓦片更新频率极低，过短的过期时间会导致频繁重新请求瓦片。
• 重复创建TileProvider：两个TileLayer各自创建CachedTileProvider，进一步加剧了缓存不共享的问题。

修复后的代码实现 #

1. 实现单例CacheManager #

确保所有瓦片请求共享同一个缓存实例：

class MapCacheManager {
  static final CacheManager instance = CacheManager(
    Config(
      'map_tiles_cache',
      maxNrOfCacheObjects: 100000,
      // 调整过期时间为7天，可根据实际需求修改
      stalePeriod: const Duration(days: 7),
    ),
  );
}

2. 优化CachedTileProvider #

复用单例CacheManager，修正URL生成逻辑：

class CachedTileProvider extends TileProvider {
  final String urlTemplate;
  final String apiKey;

  CachedTileProvider({
    required this.urlTemplate,
    required this.apiKey,
  });

  @override
  ImageProvider getImage(TileCoordinates coordinates, TileLayer options) {
    final url = getTileUrl(coordinates, options);
    return CachedNetworkImageProvider(
      url,
      cacheManager: MapCacheManager.instance,
    );
  }

  @override
  String getTileUrl(TileCoordinates coordinates, TileLayer options) {
    // 仅替换瓦片坐标和缩放级别，apiKey已在urlTemplate中正确传入
    return urlTemplate
        .replaceAll('{x}', coordinates.x.toString())
        .replaceAll('{y}', coordinates.y.toString())
        .replaceAll('{z}', coordinates.z.toString());
  }
}

3. 复用TileProvider实例 #

在FlutterMap中提前创建TileProvider实例，避免每次build都新建：

@override
Widget build(BuildContext context) {
  // 提前初始化Provider实例，复用缓存
  final baseMapProvider = CachedTileProvider(
    urlTemplate: "https://api.tomtom.com/map/1/tile/basic/main/{z}/{x}/{y}.png?key=$apiKey",
    apiKey: apiKey,
  );
  final trafficMapProvider = CachedTileProvider(
    urlTemplate: "https://api.tomtom.com/traffic/map/4/tile/flow/relative/{z}/{x}/{y}.png?key=$apiKey",
    apiKey: apiKey,
  );

  return FlutterMap(
    options: const MapOptions(
      minZoom: 11,
      initialCenter: LatLng(24.7136, 46.6753),
      initialZoom: 11,
      onTap: _handleMapTap,
    ),
    children: [
      TileLayer(
        tileBuilder: (context, tileWidget, tile) => tileWidget,
        tileProvider: baseMapProvider,
      ),
      TileLayer(
        tileProvider: trafficMapProvider,
      ),
    ],
  );
}

额外优化建议 #

• 限制合理缩放范围：根据TomTom API文档设置maxZoom，避免加载超出服务范围的瓦片导致无效请求。
• 启用瓦片预加载：使用TileLayer的preloadDelta参数，提前加载当前视口周边的瓦片，减少平移/缩放时的请求峰值（注意不要过度预加载）。
• 检查Windows缓存权限：确保CacheManager的缓存目录有读写权限，避免缓存写入失败导致重复请求。

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