使用flutter_map，如何在pinch缩放时刷新地图以切换图层？

我正在使用flutter_map包开发地图应用，需要在地图点周围显示圆圈图层，并根据缩放级别动态开关该图层——仅当地图缩放级别>14时显示CircleLayerOptions。

相关代码如下：

FlutterMap(
      mapController: _mapController,
      options: MapOptions(
        center: LatLng(startLat, startLon),
        zoom: 14,
        plugins: [MarkerClusterPlugin()],
        onTap: (_, __) => _popupController.hideAllPopups(),
      ),
      layers: [
        TileLayerOptions(
          minZoom: 1,
          maxZoom: 20,
          backgroundColor: Colors.white,
          urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
          subdomains: ['a', 'b', 'c'],
        ),
        // HERE (show circles around the points if zoomed in enough) <---------------------
        (_mapController.zoom > 14) ? CircleLayerOptions(circles: myCircles)
                                   : Container(),
        ]
);

目前遇到的问题是：pinch缩放操作完全不会触发地图重新加载，导致图层无法动态切换。请问如何在用户进行pinch缩放时自动刷新地图状态？

（备注：因需保持应用开源，未使用谷歌地图）

解决办法 #

问题核心是_mapController.zoom的变化不会自动触发Widget重建，需要监听缩放事件并主动更新状态：

1. 添加缩放事件监听
   在页面的initState方法中，给地图控制器绑定缩放事件监听，当检测到缩放变化时调用setState刷新UI：

@override
void initState() {
  super.initState();
  // 监听地图缩放事件
  _mapController.mapEventStream.listen((event) {
    if (event is MapEventZoom) {
      setState(() {});
    }
  });
}

2. 修正图层条件判断逻辑
   原代码中返回Container()会导致图层列表类型不匹配（layers要求元素为LayerOptions，而非Widget），改用Dart集合的条件语法来控制图层是否加入：

layers: [
  TileLayerOptions(
    minZoom: 1,
    maxZoom: 20,
    backgroundColor: Colors.white,
    urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    subdomains: ['a', 'b', 'c'],
  ),
  // 仅当缩放级别大于14时添加圆圈图层
  if (_mapController.zoom > 14) CircleLayerOptions(circles: myCircles),
]

补充说明 #

• 通过监听MapEventZoom，可以精准捕获手动缩放（pinch）导致的级别变化，触发setState后FlutterMap会重新构建图层列表，实现动态显示/隐藏效果。
• 使用集合条件语法替代三元运算符，既避免了类型错误，也让代码逻辑更直观易读。

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