最后更新时间:2025-06-23

---

绘制面

面图形，是由地图上一组线段组成的封闭图形，包括多边形和圆，用户可以描边、填充颜色等属性。 绘制面的基本绘制需要两个类，数据类(QPolygon、QCircle)提供绘制视图所需的数据，图形视图(QPolygonView、QCircleView)则使用数据来绘制图形。

一、多边形

1、创建多边形

在地图中使用QPolygon和QPolygonView绘制多边形的基本步骤如下：

1. 创建数据类QPolygon：

   CLLocationCoordinate2D coordinates[7];
   coordinates[0].latitude = 39.984864;
   coordinates[0].longitude = 116.305756;
   
   coordinates[1].latitude = 39.983618;
   coordinates[1].longitude = 116.305848;
   
   coordinates[2].latitude = 39.982347;
   coordinates[2].longitude = 116.305966;
   
   coordinates[3].latitude = 39.982412;
   coordinates[3].longitude = 116.308111;
   
   coordinates[4].latitude = 39.984122;
   coordinates[4].longitude = 116.308224;
   
   coordinates[5].latitude = 39.984955;
   coordinates[5].longitude = 116.308099;
   
   coordinates[6].latitude = 39.984864;
   coordinates[6].longitude = 116.305756;
   
   
   QPolygon *polygon = [QPolygon polygonWithCoordinates:coordinates count:7];
   
   [self.mapView addOverlay:polygon];
   

2. 实现<QMapViewDelegate>的mapView: viewForOverlay:方法，创建QPolygonView：

   - (QOverlayView *)mapView:(QMapView *)mapView viewForOverlay:(id<QOverlay>)overlay
   {
   if ([overlay isKindOfClass:[QPolygon class]])
       {
           QPolygonView *polygonRender = [[QPolygonView alloc] initWithPolygon:overlay];
           // 设置线宽
           polygonRender.lineWidth   = 4;
           // 设置描边颜色
           polygonRender.strokeColor = [UIColor redColor];
           // 设置填充颜色
           polygonRender.fillColor   = [[UIColor greenColor] colorWithAlphaComponent:0.5];
           
           return polygonRender;
       }
       
       return nil;
   }
   

3. 效果如图所示：

   

2、多边形虚线边框

地图SDK在4.4.0版本中 QPolygonView 新增了 lineType 属性来选择多边形的边框样式，使多边形的边框除了实线样式外，还支持虚线和点两种样式，属性说明如下：

属性	说明
QOverlayStrokeType QOverlayStrokeType_Default	实线边框，默认属性
QOverlayStrokeType QOverlayStrokeType_Dash	虚线边框
QOverlayStrokeType QOverlayStrokeType_Dot	圆点虚线

1. 绘制虚线：在创建 QPolygonView时，指定 lineType 为 QOverlayStrokeType_Dash，示例代码如下：

   polygonView.lineType = QOverlayStrokeType_Dash;
   // 样式为QOverlayStrokeType_Dash时, lineDashPattern为实线和虚线的线长序列（元素个数必须是偶数）
   polygonView.lineDashPattern = @[@20, @20];
   

2. 绘制点：在创建 QPolygonView时，指定 lineType 为 QOverlayStrokeType_Dot，示例代码如下：

   polygonView.lineType = QOverlayStrokeType_Dot;
   // 样式为QOverlayStrokeType_Dot时, textureGap为圆点的密集度
   polygonView.textureGap = 10;
   

   注：绘制圆点虚线时，如果lineWidth太小，圆点效果不明显
   

3. 绘制自定义纹理虚线：绘制QOverlayStrokeType_Dot类型虚线时，可以通过设置styleTextureImage属性指定自定义图片来绘制，示例代码如下

   view.styleTextureImage = [UIImage imageNamed:@"foot.png"];
   

4. 示例图片如下：

   

3、批量添加多边形

地图SDK在6.4.0版本新增批量添加多边形功能，可一次性添加多个多边形：

// 创建多边形数组
NSMutableArray<QPolygon *> *polygons = [NSMutableArray array];

// 多边形1
CLLocationCoordinate2D coords1[3] = {
    CLLocationCoordinate2DMake(39.9442, 116.514),
    CLLocationCoordinate2DMake(39.9442, 116.574),
    CLLocationCoordinate2DMake(39.8642, 116.574)
};
QPolygon *polygon1 = [QPolygon polygonWithCoordinates:coords1 count:3];
[polygons addObject:polygon1];

// 多边形2
CLLocationCoordinate2D coords2[4] = {
    CLLocationCoordinate2DMake(39.9242, 116.504),
    CLLocationCoordinate2DMake(39.9242, 116.554),
    CLLocationCoordinate2DMake(39.8742, 116.554),
    CLLocationCoordinate2DMake(39.8742, 116.504)
};
QPolygon *polygon2 = [QPolygon polygonWithCoordinates:coords2 count:4];
[polygons addObject:polygon2];

// 批量添加
[self.mapView addMultiPolygons:polygons];

注意事项：

1. 仅支持不带洞和不带描边的多边形（设置描边属性无效）
2. 代理方法中避免设置strokeColor/lineWidth等描边属性：

- (QOverlayView *)mapView:(QMapView *)mapView viewForOverlay:(id<QOverlay>)overlay
{
    if ([overlay isKindOfClass:[QPolygon class]]) {
        QPolygonView *view = [[QPolygonView alloc] initWithPolygon:overlay];
        // 仅设置填充色有效
        view.fillColor = [[UIColor blueColor] colorWithAlphaComponent:0.3];
        return view;
    }
    return nil;
}

二、圆形

在地图中使用QCircle和QCircleView绘制多边形的基本步骤如下：

1. 创建QCircle只需要提供圆心坐标以及圆半径(米)即可，示例如下：

   QCircle *circle = [QCircle circleWithCenterCoordinate:CLLocationCoordinate2DMake(39.8842, 116.264) radius:4000];
   [self.mapView addOverlay:circle];
   

2. 实现<QMapViewDelegate>的mapView: viewForOverlay:方法，创建QCircleView：

   - (QOverlayView *)mapView:(QMapView *)mapView viewForOverlay:(id<QOverlay>)overlay
   {
       if ([overlay isKindOfClass:[QCircle class]])
       {
           QCircleView *circleView = [[QCircleView alloc] initWithCircle:overlay];
           circleView.lineWidth   = 3;
           circleView.strokeColor = [UIColor colorWithRed:.2 green:.1 blue:.1 alpha:.8];
           circleView.fillColor   = [[UIColor blueColor] colorWithAlphaComponent:0.2];
           
           return circleView;
       }
       
       return nil;
   }
   

3. 效果如图所示：

   

三、面覆盖物的更新

地图SDK4.3.9版本增加了线段更新功能，在之前版本中如果想要更改面覆盖物的位置、构成坐标，需要将原覆盖物删除然后重新创建。通过该能力可以解决频繁的移动面覆盖物，导致QPolygonView和QCircleView重复删除、添加造成的性能问题。

1、QPolygonView

多边形覆盖物通过传入新的坐标点串数据和对应的count即可修改。

CLLocationCoordinate2D coordinates[5];
coordinates[0].latitude = 39.9442;
coordinates[0].longitude = 116.514;

coordinates[1].latitude = 39.9442;
coordinates[1].longitude = 116.574;

coordinates[2].latitude = 39.8642;
coordinates[2].longitude = 116.574;

coordinates[3].latitude = 39.8142;
coordinates[3].longitude = 116.514;
// 新加的点
coordinates[4].latitude = 39.806979;
coordinates[4].longitude = 116.461366;

QPolygonView *polygonView = (QPolygonView *)[self.mapView viewForOverlay:self.myPolygon];

// 更新坐标点
[polygonView updateOverlayPoints:coordinates pointCount:5];

注：当删除polygon的坐标点时，如果坐标点个数小于3，则修改无效

效果如下

2、QCircleView

圆形覆盖物现支持修改圆心的坐标，只需传入一个坐标点即可，多于一个，按第一个点数据更新圆心位置。

QCircleView *cv = (QCircleView *)[self.mapView viewForOverlay:self.testCircle];

CLLocationCoordinate2D circleCenter[1];
circleCenter[0].latitude = 39.9442;
circleCenter[0].longitude = 116.324;

// 更新半径
cv.circle.radius = 5000;
// 更新坐标点
[cv updateOverlayPoints:circleCenter pointCount:1];

四、常见问题

1. 为什么多边形的连线是中间交叉的？

   在创建QPolygon数据模型时，需要注意传入的坐标要按照顶点连接顺序传入，保证图形闭合时顶点连线不会交叉。