高德地图热力图的Flutter实现

高德地图SDK是有绘制热力图的功能的，但它的Flutter插件并没有封装这一块功能。我们业务中需要这个，就基于原插件修改了一下。

• Android部分从AMapFlutterMapPlugin这个类开始，发现它是通过AMapPlatformViewFactory这个工厂类来创建View的。
  进入AMapPlatformViewFactory的create方法，里面有很多形如
  1. if (params.containsKey("xxx")) {
  2.                 builder.setInitialMarkers(params.get("yyy"));
  3. }

  复制代码
  的代码，这是提取从Flutter侧传过来的参数。我们加入一句
  1. if (params.containsKey("heatmapTile")){
  2.     builder.setHeatmapTile(params.get("heatmapTile"));
  3. }

  复制代码
  heatmapTile是Flutter传过来的参数名，下面Flutter部分会提到。再到AMapOptionsBuilder中添加字段与相应的set方法
  1. private Object heatmapTile;
  3. @Override
  4. public void setHeatmapTile(Object heatmapTile) {
  5.     this.heatmapTile = heatmapTile;
  6. }

  复制代码
  AMapOptionsBuilder这个类是实现了一个接口，上面这个setHeatmapTile是在接口中定义的，所以这里有个@Override。接口定义的更改这里就不再描述了。
  继续深入到AMapOptionsBuilder的build方法中，工厂类是由这个方法创建的视图，在build方法中设置地图的属性，绘制点、线等。绘制热力图当然也在这个方法中，在return之前加入
  1. if (null != heatmapTile){
  2.     aMapPlatformView.getHeatmapController().add(heatmapTile);
  3. }

  复制代码
  当然在AMapPlatformView中加入
  1. private HeatmapController heatmapController;
  3. public HeatmapController getHeatmapController() {
  4.     return heatmapController;
  5. }

  复制代码
  绘制热力图的方法就在这个HeatmapController类中，
  
  
  
  1. public class HeatmapController implements MyMethodCallHandler {
  2.     private final AMap amap;
  3.     private static final String CLASS_NAME = "HeatmapController";
  5.     public HeatmapController(AMap amap) {
  6.         this.amap = amap;
  7.     }
  9.     public void add(Object mapTileObj){
  10.         if (mapTileObj != null && amap != null){
  11.             HeatmapOptionsBuilder builder = new HeatmapOptionsBuilder();
  12.             HeatmapUtil.parseHeatmapOptions(mapTileObj,builder);
  14.             if (builder.getPointCount() > 0) {
  15.                 HeatmapTileProvider provider = builder.build();
  16.                 TileOverlayOptions tileOverlayOptions = new TileOverlayOptions();
  17.                 tileOverlayOptions.tileProvider(provider);
  18.                 amap.addTileOverlay(tileOverlayOptions);
  19.             }
  20.         }
  21.     }
  23.     @Override
  24.     public String[] getRegisterMethodIdArray() {
  25.         return Const.METHOD_ID_LIST_FOR_HEATMAP;
  26.     }
  29.     @Override
  30.     public void doMethodCall(@NonNull MethodCall call, @NonNull MethodChannel.Result result) {
  31.         LogUtil.i(CLASS_NAME, "doMethodCall===>" + call.method);
  32.         switch (call.method) {
  33.             case Const.METHOD_HEATMAP_UPDATE:
  34.                 Object tileData = call.argument("heatmapTile");
  35.                 amap.clear();
  36.                 add(tileData);
  37.                 result.success(null);
  38.                 break;
  39.         }
  40.     }
  41. }

  复制代码
  View Code它的构造函数有个参数，是个地图对象，在前面AMapPlatformView的构造函数中加入下面一句，
  1. heatmapController = new HeatmapController(amap);

  复制代码
  在HeatmapController中，除了add方法外，其他二个方法是刷新地图时用的。Const.METHOD_ID_LIST_FOR_HEATMAP中现在只有一个值，就是在doMethodCall中的 Const.METHOD_HEATMAP_UPDATE，字面值是“heatmap#update”，下面iOS及Flutter部分也会出现这个值，大家保持一致即可。然后在 AMapPlatformView的 initMyMethodCallHandlerMap中加入
  1. methodIdArray = heatmapController.getRegisterMethodIdArray();
  2. if (null != methodIdArray && methodIdArray.length > 0) {
  3.     for (String methodId : methodIdArray) {
  4.         myMethodCallHandlerMap.put(methodId, heatmapController);
  5.     }
  6. }

  复制代码
  把方法名称跟执行对象的关系存起来。在AMapPlatformView的onMethodCall方法中，根据key调用相应对象的doMethodCall。
  上面的HeatmapController类中还有二个辅助类，是用外部参数来构造HeatmapTileProvider用的，
  
  
  
  1. public class HeatmapOptionsBuilder {
  2.    HeatmapTileProvider.Builder builder;
  3.    private int _pointCount;
  5.     public HeatmapOptionsBuilder() {
  6.         this.builder = new HeatmapTileProvider.Builder();
  7.     }
  9.     public HeatmapTileProvider build(){
  10.         return builder.build();
  11.     }
  13.     public void setData(List<LatLng> data){
  14.         builder = builder.data(data);
  15.         _pointCount = data.size();
  16.     }
  18.     public int getPointCount(){
  19.         return _pointCount;
  20.     }
  22.     public void setGradient(Gradient gradient){
  23.         builder = builder.gradient(gradient);
  24.     }
  26.     public void setRadius(int radius){
  27.         builder = builder.radius(radius);
  28.     }
  30.     public void setTransparency(double transparency){
  31.         builder = builder.transparency(transparency);
  32.     }
  34.     public void setWeightedData(List<WeightedLatLng> data){
  35.         builder = builder.weightedData(data);
  36.     }
  37. }

  复制代码
  View Code
  
  
  1. public class HeatmapUtil {
  2.     public static void parseHeatmapOptions(Object o,HeatmapOptionsBuilder builder){
  3.         if (null == o) {
  4.             return;
  5.         }
  6.         final Map<?, ?> data = ConvertUtil.toMap(o);
  8.         Object radius = data.get("radius");
  9.         if (radius != null){
  10.             builder.setRadius(ConvertUtil.toInt(radius));
  11.         }
  13.         Object transparency = data.get("transparency");
  14.         if (transparency != null){
  15.             builder.setTransparency(ConvertUtil.toDouble(transparency));
  16.         }
  18.         Object noWeightData = data.get("data");
  19.         if (noWeightData != null){
  20.             builder.setData(ConvertUtil.toPoints(noWeightData));
  21.         }
  23.     }
  24. }

  复制代码
  View Code注意一下对应关系就好。
   
  
• iOS部分 这部分从下往上叙述。
   首先定义结构，由传入的参数构造MAHeatMapTileOverlay对象
  
  
  
  1. @interface AMapHeatmap : NSObject {
  2.     /// 热力图的坐标点数组，key为@"points"
  3.     CLLocationCoordinate2D *_coords;//坐标的数组指针
  4.     NSUInteger _coordCount;//坐标的个数
  5. }
  7. ///透明度
  8. @property (nonatomic, assign) double transparency;
  10. ///半径
  11. @property (nonatomic, assign) int radius;
  13. /// 由以上数据生成的heatMapTileOverlay 对象
  14. @property (nonatomic, strong,readonly) MAHeatMapTileOverlay *heatMapTileOverlay;
  17. @end

  复制代码
  AMapHeatmap.h
  
  
  1. @interface AMapHeatmap ()
  3. @property (nonatomic, strong, readwrite) MAHeatMapTileOverlay *heatMapTileOverlay;
  5. @end
  7. @implementation AMapHeatmap
  9. - (instancetype)init {
  10.     self = [super init];
  11.     self.radius = 12;
  12.     self.transparency = 0.6;
  13.     return self;
  14. }
  16. - (void)postHookWith:(NSDictionary *)dict {
  17.     NSArray *points = dict[@"data"];
  19.     //如果经纬度点已经有值，需要手动释放内存
  20.     if (_coords != NULL) {
  21.         free(_coords);
  22.         _coords = NULL;
  23.     }
  24.     _coordCount = points.count;
  25.     if (_coordCount > 0){
  26.         _coords = (CLLocationCoordinate2D*)malloc(_coordCount * sizeof(CLLocationCoordinate2D));
  27.         for (NSUInteger index = 0; index < _coordCount; index ++) {
  28.             NSArray *point = points[index];
  29.             _coords[index] = [AMapConvertUtil coordinateFromArray:point];
  30.         }
  31.     }
  32. }
  34. - (void)dealloc {
  35.     if (_coords != NULL) {
  36.         free(_coords);
  37.         _coords = NULL;
  38.     }
  39. }
  41. - (MAHeatMapTileOverlay *)heatMapTileOverlay {
  42.     if (_coordCount == 0) return nil;
  43.    
  44.     if (_heatMapTileOverlay == nil) {
  45.         _heatMapTileOverlay = [[MAHeatMapTileOverlay alloc] init];
  46.         NSMutableArray* data = [NSMutableArray array];
  47.         for (NSUInteger index = 0; index < _coordCount; index++) {
  48.             MAHeatMapNode *node = [[MAHeatMapNode alloc] init];
  49.             node.coordinate = _coords[index];        
  50.             node.intensity = 1;//设置权重
  51.             [data addObject:node];
  52.         }
  54.         _heatMapTileOverlay.data = data;
  55.         _heatMapTileOverlay.radius = self.radius;
  56.         _heatMapTileOverlay.opacity = self.transparency;
  58.         // MAHeatMapGradient *gradient = [[MAHeatMapGradient alloc] initWithColor:@[[UIColor blueColor],[UIColor greenColor], [UIColor redColor]] andWithStartPoints:@[@(0.2),@(0.5),@(0.9)]];
  59.         // _heatMapTileOverlay.gradient = gradient;
  60.     }
  61.     return _heatMapTileOverlay;
  62. }
  64. @end

  复制代码
  AMapHeatmap.m然后实现一个Controller，把热力图的Overlay加入到map中
  
  
  
  1. @class AMapHeatmap;
  3. @interface AMapHeatmapController : NSObject
  5. - (instancetype)init:(FlutterMethodChannel*)methodChannel
  6.             mapView:(MAMapView*)mapView;
  8. - (void)addOverlay:(NSDictionary*)nodesToAdd;
  10. @end

  复制代码
  AMapHeatmapController.h
  
  
  1. @interface AMapHeatmapController ()
  2. @property (nonatomic,strong) FlutterMethodChannel *methodChannel;
  3. @property (nonatomic,strong) MAMapView *mapView;
  5. @end
  7. @implementation AMapHeatmapController
  9. - (instancetype)init:(FlutterMethodChannel*)methodChannel
  10.              mapView:(MAMapView*)mapView {
  11.     self = [super init];
  12.     if (self){
  13.         _methodChannel = methodChannel;
  14.         _mapView = mapView;
  16.         __weak typeof(self) weakSelf = self;
  17.         [_methodChannel addMethodName:@"heatmap#update" withHandler:^(FlutterMethodCall * _Nonnull call, FlutterResult  _Nonnull result) {
  18.             id heatmapToAdd = call.arguments[@"heatmapTile"];
  19.             if ([heatmapToAdd isKindOfClass:[NSDictionary class]]) {
  20.                 [weakSelf.mapView removeOverlays:weakSelf.mapView.overlays];
  21.                 [weakSelf addOverlay:heatmapToAdd];
  22.             }
  24.             result(nil);
  25.         }];
  26.     }
  27.     return self;
  28. }
  30. - (void)addOverlay:(NSDictionary*)nodesToAdd {   
  31.     AMapHeatmap *heatmapModel = [AMapJsonUtils modelFromDict:nodesToAdd modelClass:[AMapHeatmap class]];
  32.     if (heatmapModel.heatMapTileOverlay == nil) return;
  33.    
  34.     [self.mapView addOverlay:heatmapModel.heatMapTileOverlay];
  35.    
  36. }
  38. @end

  复制代码
  AMapHeatmapController.m在Controller中，除了add，同样有涉及刷新的方法。
  最后改造一下AMapViewController，先在@interface中加入
  1. @property (nonatomic,strong) AMapHeatmapController *heatmapController;

  复制代码
  在initWithFrame方法中，调用addOverlay
  1. _heatmapController = [[AMapHeatmapController alloc] init:_channel
  2.                                                             mapView: _mapView];
  4. id heatmapToAdd = args[@"heatmapTile"];
  5.         if ([heatmapToAdd isKindOfClass:[NSDictionary class]]){
  6.             [_heatmapController addOverlay:heatmapToAdd];
  7.         }

  复制代码
  在rendererForOverlay方法加一个分支
  1. else if ([overlay isKindOfClass:[MATileOverlay class]]) {
  2.     MATileOverlayRenderer *tileOverlayRenderer = [[MATileOverlayRenderer alloc] initWithTileOverlay:overlay];
  3.     return tileOverlayRenderer;
  4. }

  复制代码
   
  
• Flutter部分 先定义widget中用来传递热力图数据的结构，有三个字段，分别表示数据点的数组、半径、透明度。主要有一个把类对象转化为map的方法
  1. class HeatmapTile extends BaseOverlay {
  2.   final List<LatLng> data;
  3.   final int? radius;
  4.   final double? transparency;
  6.   HeatmapTile({required this.data, this.radius, this.transparency});
  8.   @override
  9.   Map<String, dynamic> toMap() {
  10.     final Map<String, dynamic> json = <String, dynamic>{};
  12.     void addIfPresent(String fieldName, dynamic value) {
  13.       if (value != null) {
  14.         json[fieldName] = value;
  15.       }
  16.     }
  18.     json['data'] = _pointsToJson();
  19.     addIfPresent('radius', radius);
  20.     addIfPresent('transparency', transparency);
  21.     return json;
  22.   }
  24.   dynamic _pointsToJson() {
  25.     final List<dynamic> result = <dynamic>[];
  26.     for (final LatLng point in data) {
  27.       result.add(point.toJson());
  28.     }
  29.     return result;
  30.   }
  31. }

  复制代码
  在AMapWidget这个高德地图的widget中加入
  1. ///热力图
  2. final HeatmapTile? heatmapTile;

  复制代码
  更新一下构造函数。使用时候把热力图数据给widget的这个heatmapTile参数就行。
  如果只是这样，当组件刷新的时候，热力图就没了，所以还需要在_MapState的didUpdateWidget方法中添加
  1. _updateHeatmap();

  复制代码
  _updateHeatmap方法如下
  1.   void _updateHeatmap() async {
  2.     final AMapController controller = await _controller.future;
  3.     var tile = widget.heatmapTile;
  4.     if (tile != null){
  5.       controller._updateHeatmap(tile);
  6.     }
  7.   }

  复制代码
  当然还要在AMapController中添加
  1.   Future<void> _updateHeatmap(HeatmapTile tile){
  2.     return _methodChannel.updateHeatmap(tile, mapId: mapId);
  3.   }

  复制代码
  通过methodChannel调用原生的方法，在MethodChannelAMapFlutterMap中添加更新的方法
  1.   Future<void> updateHeatmap(
  2.       HeatmapTile tile, {
  3.         required int mapId,
  4.       }) {
  5.     return channel(mapId).invokeMethod<void>(
  6.       'heatmap#update',
  7.       { 'heatmapTile': tile.toMap() },
  8.     );
  9.   }

  复制代码
   
   这样就完成了高德地图Flutter插件的改造，
  

 

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！