Flutter使用flutter_map加载离线瓦片资源失败问题求助

问题详情 #

• 开发嵌入flutter_map的应用，已下载离线地图瓦片，但无法从assets文件夹加载
• 报错信息：

  资源加载失败：Unable to load asset: assets/tiles/{z}/{x}/{y}.png
  flutter_map错误：Tile loading failed: Asset not found

• 核心代码（main.dart）：

  TileLayer(
    tileProvider: AssetTileProvider(),
    urlTemplate: 'assets/tiles/{z}/{x}/{y}.png',
  ),
  

• pubspec.yaml配置：

  assets:
    - assets/tiles/
  

• 文件夹结构：

  项目根目录
  ├── assets
  │   └── tiles
  │       ├── [缩放级别z]
  │       │   ├── [x坐标]
  │       │   │   └── [y坐标].png
  │       │   └── ...
  │       └── ...
  ├── lib
  │   └── main.dart
  └── pubspec.yaml
  

解决方案 #

1. 确认Pubspec配置并重启应用 #

• 确保pubspec.yaml中assets路径正确，嵌套目录需显式声明顶层目录：

  assets:
    - assets/tiles/
  

• 配置修改后必须重启应用，热重载不会刷新asset配置。

2. 严格匹配路径与文件名 #

• 检查urlTemplate的路径和实际文件结构完全一致，注意大小写（iOS系统区分文件名大小写）。
• 测试单个瓦片的可访问性，排查路径问题：

  import 'package:flutter/services.dart';
  
  // 在Widget的initState中添加测试代码
  @override
  void initState() {
    super.initState();
    _testAssetLoad();
  }
  
  void _testAssetLoad() async {
    try {
      await rootBundle.load('assets/tiles/10/345/678.png'); // 替换为你实际存在的瓦片路径
      print("瓦片资源加载成功");
    } catch (e) {
      print("瓦片加载失败：$e");
    }
  }
  

3. 清理缓存并重建项目 #

执行以下命令清理Flutter缓存，避免缓存导致的资源异常：

flutter clean
flutter pub get
flutter run

4. 检查AssetTileProvider的使用 #

确保使用flutter_map提供的AssetTileProvider，而非自定义Provider，并且确认依赖版本兼容：

import 'package:flutter_map/flutter_map.dart';
import 'package:flutter_map/plugin_api.dart';

// 正确的TileLayer配置
TileLayer(
  tileProvider: AssetTileProvider(),
  urlTemplate: 'assets/tiles/{z}/{x}/{y}.png',
  minZoom: 8, // 匹配你的离线瓦片最小缩放级别
  maxZoom: 12, // 匹配你的离线瓦片最大缩放级别
),

5. iOS平台额外检查 #

如果在iOS设备上出现问题，确认Runner/Info.plist中没有限制资源访问，或者添加以下配置（若缺失）：

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

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