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

---

散点图

腾讯地图SDK自4.4.7版本起支持散点图功能，该功能可以根据大量的点坐标在地图上展示散点效果，示例图如下：

一、添加散点图

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

1. 准备轨迹点坐标和时间戳，示例如下：

   // 散点坐标1
   116.4151898097858 39.91718071931067
   // 散点坐标2
   116.4221401125229 39.90512390527111
   // 散点坐标3，以此类推...
   

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

   self.node2 = [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];
           
           // 散点对象
           QScatterNode *node = [[QScatterNode alloc] init];
           node.coordinate = CLLocationCoordinate2DMake(lat, lon);
           // 节点的类型，用于贴图散点的图片和点散点的颜色的映射关系
           node.type      = arc4random()%3;
           
           [self.node2 addObject:node];
       }
   }];
   

3. 通过散点数据对象创建散点图层对象，并配置散点图层的样式，添加到地图上：

   QDotScatterOverlay *dotOverlay = [[QDotScatterOverlay alloc] init];
   // 设置散点图节点数据
   dotOverlay.nodes = self.nodes;
   // 开启3D效果
   dotOverlay.enable3D = YES;
   // 单个散点的半径
   dotOverlay.radius = 9;
   // 将散点overlay添加到地图上
   [self.mapView addOverlay:dotOverlay];
   

4. 实现mapView的代理方法，将散点图层展示到地图上：

   - (QOverlayView *)mapView:(QMapView *)mapView viewForOverlay:(id<QOverlay>)overlay
   {
       if ([overlay isKindOfClass:[QDotScatterOverlay class]])
       {
           QDotScatterOverlayView *view = [[QDotScatterOverlayView alloc] initWithOverlay:overlay];
           
           return view;
       }
       
       return nil;
   }
   

5. 效果如下图所示：

   

二、配置散点图的参数

QDotScatterOverlay散点图层对象常用属性如下表所示：

属性	说明
NSArray <id > *nodes;	散点图数据：原始的节点数据.。 数组每个元素符合 QScatterNodeProtocol 协议。
NSArray <UIColor *> *colors	散点颜色数据； 散点颜色与 QScatterNodeProtocol 中的type成映射关系。
double radius	散点半径，单位：point 默认 2。
BOOL enable3D	是否开启3D效果，默认为NO。
BOOL animated	是否开启动画辐射效果，默认NO。

1、配置轨迹图颜色方式如下所示：

QDotScatterOverlay中的 NSArray <UIColor *> *colors 属性用于设置散点图每个节点颜色，数组中的元素个数，要与QScatterNodeProtocol中的type形成映射关系，示例如下：

// 创建节点对象时，type取值范围为0-1
QScatterNode *node = [[QScatterNode alloc] init];
node.type = arc4random() % 2;

// 配置颜色时，要与type指定的数值一一对应，否则会使用默认透明色来渲染散点
dotOverlay.colors = @[color1,color2];

效果如下图所示：

2、切换轨迹图展示层级：

散点图展示层级默认在楼块之上POI之下(QOverlayLevelAboveBuildings)。如果需要调整展示层级，可以通过如下方法：

QIconScatterOverlayView *hv = (QIconScatterOverlayView *) [self.mapView viewForOverlay:self.dotOverlay];

hv.displayLevel = QOverlayLevelAboveLabels;

3、散点图3D效果：

散点图默认开启3D效果，当3D开启时，散点图在地图倾角任何角度下都展示为圆形。如果关闭了3D效果，散点图会表现为贴地效果：

4、散点图动画效果：

散点图带有点扩散动画效果，该功能默认关闭，可通过QDotScatterOverlay的 animated 属性开启，效果图如下：

三、移除散点图图

调用mapView的removeOverlay:即可将轨迹图移除：

[self.mapView removeOverlay:self.dotOverlay];

四、注意

1. 散点图颜色默认色对应type0-2分别为黄色、红色、紫色，如果指定了type而没有指定颜色的话，将会使用默认颜色：

   // 指定type范围为0-2
   QScatterNode *node = [[QScatterNode alloc] init];
   node.type = arc4random() % 3;
   
   // 颜色数组传入空数组
   dotOverlay.colors = [NSArray array];
   

   

2. 如果type的值超出了colors元素的索引最大值，则会以透明色渲染散点。下图中出现部分颜色缺失的散点，实际是被透明色的散点遮盖住导致：

   // 指定type范围0-9
   QScatterNode *node = [[QScatterNode alloc] init];
   node.type = arc4random() % 10;
   
   // 颜色数组长度为3
   dotOverlay.colors = [NSArray array];