最后更新时间:2025-03-25

---

矢量热力图

腾讯地图SDK自4.4.2版本起，将支持矢量热力图功能，该功能可以在地图上以3D或2D的形式表达数据的密度和分布状况，示例图如下：

一、添加矢量热力图

为了添加一个简单的热力图，你需要提前准备好带有坐标分布的数据集。基本使用步骤如下：

1. 准备热力节点需要的坐标分布数据，示例如下：

   // 纬度 经度 权值
   116.895579	24.306521	43
   

   腾讯地图sdk提供了热力图示例文件：热力图数据
   

2. 遍历所有数据并创建节点对象，保存在数组中：

   NSString *filePath = [[NSBundle mainBundle] pathForResource:@"heatTest_2" ofType:@"heat"];
   NSString* fileContents = [NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil];
   
   NSArray* allLinedStrings = [fileContents componentsSeparatedByCharactersInSet:[NSCharacterSet newlineCharacterSet]];
   
   NSMutableArray <QHeatNode *> *nodes = [NSMutableArray array];
   
   [allLinedStrings enumerateObjectsUsingBlock:^(NSString *  _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
       
       NSArray *ar = [obj componentsSeparatedByCharactersInSet:[NSCharacterSet whitespaceCharacterSet]];
       if(ar.count == 3 ){
           // 纬度.
           double lat = [ar[1] doubleValue];
           // 经度.
           double lon = [ar[0] doubleValue];
           // 权值.
           double val = [ar[2] doubleValue];
           
           QHeatNode *node = [[QHeatNode alloc] init];
           node.coordinate = CLLocationCoordinate2DMake(lat, lon);
           node.value      = val;
           
           [nodes addObject:node];
       }
   }];
   

3. 创建热力图层对象，并创建热力渐变属性对象QHeatGradient，指定矢量热力图的属性：

   QHeatOverlay *heatOverlay = [[QHeatOverlay alloc] initWithHeatNodes:nodes];
   // 默认初始化热力图渐变属性会使用默认配色方案
   QHeatGradient *grad = [[QHeatGradient alloc] init];
   heatOverlay.gradient = gradient;
   

4. 配置热力图层对象的其他属性，最后添加到mapView上：

   // 调整热力的最大高度
   heatOverlay.maxHeight = 50;
   
   // 调整热力的衰退半径
   heatOverlay.decayRadius = 20;
   
   // 是否开启3D效果
   self.heatOverlay.enable3D = YES;
   
   // 将热力图添加到地图上，配合mapView:viewForOverlay:回调使用
   [self.mapView addOverlay:heatOverlay];
   

5. 实现mapView的代理方法，将热力图层展示到地图上：

   - (QOverlayView *)mapView:(QMapView *)mapView viewForOverlay:(id<QOverlay>)overlay
   {
   	if ([overlay isKindOfClass:[QHeatOverlay class]]) {
   		QHeatOverlayView *hv = [[QHeatOverlayView alloc] initWithOverlay:overlay];
   		// 设置在POI之上
   		hv.displayLevel = QOverlayLevelAboveLabels;
   		return hv;
   	}
   	
   	return nil;
   }
   

6. 效果如下图所示：

   

二、 配置矢量热力图的参数

QHeatOverlay热力图层对象常用属性如下表所示：

属性	说明
NSArray<id > *nodes	热力图数据：原始的节点数据
NSInteger decayRadius	热力图样式：衰变半径，单位 point 范围越大计算耗时越长，默认10，取值范围 [6, 50]。
QHeatGradient *gradient	热力图样式：颜色梯度
CGFloat maxHeight	热力图最大拔高高度，单位point，默认20。
BOOL enable3D	是否支持拔高3D效果，默认NO。
QAnimation *animation	显示时的动画

1、配置矢量热力图颜色方式如下所示：

QHeatGradient对象为矢量热力图的颜色梯度对象，配置矢量热力图颜色方式如下：

NSArray *styleColors =  @[
	[UIColor colorWithRed:77 / 255.0 green:111 / 255.0 blue:255 / 255.0 alpha:1.0],
	[UIColor colorWithRed:0 / 255.0 green:238 / 255.0 blue:227 / 255.0 alpha:1.0],
	[UIColor colorWithRed:113 / 255.0 green:236 / 255.0 blue:80 / 255.0 alpha:1.0],
	[UIColor colorWithRed:255 / 255.0 green:176 / 255.0 blue:0 / 255.0 alpha:1.0],
	[UIColor colorWithRed:255 / 255.0 green:72 / 255.0 blue:0 / 255.0 alpha:1.0]
];
// 颜色变化节点列表，需为严格递增数组(无相同值)，区间为[0, 1.0]
NSArray *startPoints = @[@0.1f, @0.185f, @0.3571f, @0.6142f, @1.f];
	
QHeatGradient *grad = [[QHeatGradient alloc] initWithColor:styleColors andWithStartPoints:startPoints];
	
self.heatOverlay.enable3D = YES;
self.heatOverlay.gradient = grad;
	
// 刷新样式需调用此接口，否则新样式不生效
[self.heatOverlay setNeedsDisplay];

效果如下图所示：

2、切换矢量热力图展示层级：

矢量热力图与其他Overlay图层对象相同，展示层级默认在POI之上(QOverlayLevelAboveLabels)。如果需要调整展示层级，可以通过如下方法：

QHeatOverlayView *hv = (QHeatOverlayView *) [self.mapView viewForOverlay:self.heatOverlay];
// 在楼块之上POI之下
hv.displayLevel = QOverlayLevelAboveBuildings;
// 刷新样式需调用此接口，否则新样式不生效
[self.heatTileOverlay setNeedsDisplay];

效果如下图所示：

3、矢量热力图动画效果：

矢量热力图在显示时将支持动画效果，使用方法如下：

// 通用动画类
QAnimation *animation = [[QAnimation alloc] init];
animation.duration = 2;

QVectorHeatOverlayOption *option = [[QVectorHeatOverlayOption alloc] init];

// 矢量热力图显示时的动画
heatOverlay.animation = animation;

效果如下：

三、移除热力图

调用mapView的removeOverlay:即可将热力图移除：

[self.mapView removeOverlay:heatOverlay];