Flutter地图点聚合插件flutter_map_radius_cluster的使用

Flutter 地图点聚合插件 flutter_map_radius_cluster 的使用

简介

flutter_map_radius_cluster 是一个用于 flutter_map 的聚类插件，支持在定义的半径内进行异步标记/聚类搜索。这个插件可以帮助你在地图上有效地管理和显示大量标记点，避免标记点过于密集导致的地图混乱。

注意事项

该插件是新的，API 可能在未来频繁更改，请注意更新和兼容性问题。

使用方法

1. 添加依赖

   在 pubspec.yaml 文件中添加 flutter_map 和 flutter_map_radius_cluster 依赖：

   dependencies:
     flutter_map: any
     flutter_map_radius_cluster: any  # 或者使用 Pub 上的最新版本
   

2. 配置 FlutterMap

   在 FlutterMap 中添加 RadiusClusterLayerWidget 并配置 RadiusClusterLayerOptions。以下是一个完整的示例代码：

   import 'package:flutter/material.dart';
   import 'package:flutter_map/flutter_map.dart';
   import 'package:flutter_map_radius_cluster/flutter_map_radius_cluster.dart';
   import 'package:latlong2/latlong.dart';
   
   void main() => runApp(MyApp());
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Clustering Demo',
         theme: ThemeData(
           primarySwatch: Colors.blue,
         ),
         home: RadiusClusterLayerPage(),
       );
     }
   }
   
   class RadiusClusterLayerPage extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text('Radius Cluster Example'),
         ),
         body: FlutterMap(
           options: MapOptions(
             center: LatLng(51.5, -0.09),  // 初始地图中心点
             zoom: 5,  // 初始缩放级别
             maxZoom: 15,  // 最大缩放级别
           ),
           children: <Widget>[
             TileLayerWidget(  // 添加地图瓦片层
               options: TileLayerOptions(
                 urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                 subdomains: ['a', 'b', 'c'],
               ),
             ),
             RadiusClusterLayerWidget(  // 添加聚类层
               options: RadiusClusterLayerOptions(
                 radiusInKm: 100.0,  // 聚类半径（单位：公里）
                 search: (radius, center) async {
                   // 这里可以实现自定义的标记点搜索逻辑
                   // 返回一个 List<Marker>，表示在指定半径内的标记点
                   return [
                     Marker(
                       point: LatLng(center.latitude + 0.1, center.longitude),
                       builder: (ctx) => Container(
                         child: Icon(Icons.location_on, color: Colors.red),
                       ),
                     ),
                     Marker(
                       point: LatLng(center.latitude - 0.1, center.longitude),
                       builder: (ctx) => Container(
                         child: Icon(Icons.location_on, color: Colors.red),
                       ),
                     ),
                   ];
                 },
                 clusterWidgetSize: const Size(40, 40),  // 聚类图标大小
                 anchor: AnchorPos.align(AnchorAlign.center),  // 聚类图标锚点位置
                 builder: (context, clusterData) {
                   // 自定义聚类图标
                   return Container(
                     decoration: BoxDecoration(
                       borderRadius: BorderRadius.circular(20.0),
                       color: Colors.blue,
                     ),
                     child: Center(
                       child: Text(
                         clusterData.markerCount.toString(),  // 显示聚类中的标记点数量
                         style: TextStyle(color: Colors.white),
                       ),
                     ),
                   );
                 },
               ),
             ),
           ],
         ),
       );
     }
   }