如何在Flutter Map中实现多种地图类型切换（非谷歌地图）

核心逻辑 #

flutter_map的地图展示完全由TileLayer组件控制，不同地图类型本质是切换第三方瓦片服务的地址（urlTemplate）及相关配置。不用依赖谷歌地图，只需找合规的免费/商用瓦片服务，封装成TileLayer实例后实现切换逻辑即可。

具体实现步骤 #

1. 封装多种地图源的TileLayer实例 #

先把常用的非谷歌地图源封装成可复用的TileLayer，示例如下：

// 标准OSM图层（你已实现的）
TileLayer get openStreetMap => TileLayer(
      urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
      userAgentPackageName: 'dev.fleaflet.flutter_map.example',
    );

// OpenTopoMap 地形图层
TileLayer get openTopoMap => TileLayer(
      urlTemplate: 'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',
      subdomains: const ['a', 'b', 'c'], // 多域名负载均衡，避免单域名请求限制
      userAgentPackageName: 'dev.fleaflet.flutter_map.example',
    );

// 高德矢量地图（国内访问稳定）
TileLayer get amapVector => TileLayer(
      urlTemplate: 'https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
      subdomains: const ['1', '2', '3', '4'],
      userAgentPackageName: 'dev.fleaflet.flutter_map.example',
    );

// 高德卫星地图
TileLayer get amapSatellite => TileLayer(
      urlTemplate: 'https://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
      subdomains: const ['1', '2', '3', '4'],
      userAgentPackageName: 'dev.fleaflet.flutter_map.example',
    );

2. 实现图层切换的UI与状态管理 #

用状态变量控制当前显示的TileLayer，搭配弹窗、下拉菜单等控件触发切换：

class MapPage extends StatefulWidget {
  const MapPage({super.key});

  @override
  State<MapPage> createState() => _MapPageState();
}

class _MapPageState extends State<MapPage> {
  TileLayer _currentLayer = openStreetMap;

  void _switchLayer(TileLayer newLayer) {
    setState(() {
      _currentLayer = newLayer;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('地图类型切换'),
        actions: [
          PopupMenuButton<TileLayer>(
            onSelected: _switchLayer,
            itemBuilder: (_) => [
              const PopupMenuItem(
                value: openStreetMap,
                child: Text('标准地图'),
              ),
              const PopupMenuItem(
                value: openTopoMap,
                child: Text('地形地图'),
              ),
              const PopupMenuItem(
                value: amapVector,
                child: Text('高德矢量'),
              ),
              const PopupMenuItem(
                value: amapSatellite,
                child: Text('高德卫星'),
              ),
            ],
          ),
        ],
      ),
      body: FlutterMap(
        options: const MapOptions(
          initialCenter: LatLng(31.2304, 121.4737),
          initialZoom: 11,
        ),
        children: [_currentLayer],
      ),
    );
  }
}

3. 关键注意事项 #

• 所有瓦片服务必须设置合法的userAgentPackageName，否则可能被服务器拦截请求
• 部分地图源有使用限制（比如商用需授权），使用前务必确认服务条款
• 如果需要离线地图，可提前下载瓦片文件到本地，使用asset://或file://开头的urlTemplate加载

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