绘制MKPolyline填充颜色

Question

我试图在MKPolyline上绘制一个漂亮的MKPolylineView。到目前为止，一切都很顺利 - 折线正如我想要的那样绘制，当我希望它使用以下代码时：

[[self map] addOverlay:routeLine];

这个方法告诉应用程序如何绘制它：

- (MKOverlayView *)mapView:(MKMapView *)mapView viewForOverlay:(id <MKOverlay>)overlay {
    MKOverlayView* overlayView = nil;
    self.routeLineView = [[MKPolylineView alloc] initWithPolyline:[self routeLine]];
    [[self routeLineView] setFillColor:[UIColor colorWithRed:167/255.0f green:210/255.0f blue:244/255.0f alpha:1.0]];
    [[self routeLineView] setStrokeColor:[UIColor colorWithRed:0/255.0f green:136/255.0f blue:255/255.0f alpha:1.0]];
    [[self routeLineView] setLineWidth:15.0];
    [[self routeLineView] setLineCap:kCGLineCapRound];
    overlayView = [self routeLineView];
    return overlayView;
}

结果我得到一条蓝色的线条。我看到的蓝色不是我期待的笔触的填充颜色 - 它是笔触颜色的蓝色。使用此方法时没有填充颜色。为什么不在折线上绘制填充颜色？

在进一步调查之后，我在Xcode的快速帮助部分找到了这些信息：

MKPolylineView类为MKPolyline注释对象提供可视化表示。此视图描绘注释表示的路径。 （此类不会填充路径所包含的区域。）您可以通过修改从MKOverlayPathView类继承的属性来更改路径的颜色和其他绘图属性。

这听起来很荒谬。我必须使用这个类来设置填充颜色，但我不能使用这个类来绘制填充颜色？考虑到它已经引起了中风，这似乎很奇怪。文档中这个解释的最后一行有点不清楚，但似乎提供了答案 - 我只是很难编码/找到答案。我的项目中没有MKOverlayPathView（无论如何是什么？）但它似乎是解决方案 - 有谁知道如何使用它？

Answer 1

如果你想要一种颜色的线条和另一种颜色的填充，请使用MKPolygon而不是MKPolyline。因此，相应地修改您的原始注释创建。然后你修改你的viewForOverlay（或者，对于iOS 7，rendererForOverlay）来识别MKPolygon并执行如下操作：

// for iOS7+; see `viewForOverlay` for earlier versions

- (MKOverlayRenderer *)mapView:(MKMapView *)mapView rendererForOverlay:(id<MKOverlay>)overlay
{
    if ([overlay isKindOfClass:[MKPolygon class]])
    {
        MKPolygonRenderer *renderer = [[MKPolygonRenderer alloc] initWithPolygon:overlay];

        renderer.fillColor   = [[UIColor cyanColor] colorWithAlphaComponent:0.2];
        renderer.strokeColor = [[UIColor blueColor] colorWithAlphaComponent:0.7];
        renderer.lineWidth   = 3;

        return renderer;
    }

    return nil;
}

// for iOS versions prior to 7; see `rendererForOverlay` for iOS7 and later

- (MKOverlayView *)mapView:(MKMapView *)mapView viewForOverlay:(id <MKOverlay>)overlay
{
    if ([overlay isKindOfClass:[MKPolygon class]])
    {
        MKPolygonView *overlayView = [[MKPolygonView alloc] initWithPolygon:overlay];

        overlayView.fillColor      = [[UIColor cyanColor] colorWithAlphaComponent:0.2];
        overlayView.strokeColor    = [[UIColor blueColor] colorWithAlphaComponent:0.7];
        overlayView.lineWidth      = 3;

        return overlayView;
    }

    return nil;
}

请注意，您不需要在此处引用任何类属性，因为叠加层将传递给您的viewForOverlay。如果您在地图中添加了多个叠加层，则会更灵活一些。

---

顺便说一下，这些是我的标准viewForOverlay（7.0之前的iOS版本）和rendererForOverlay（iOS 7+），它们将处理MKPolygon，MKPolyline和MKCircle叠加：

// for iOS7+; see `viewForOverlay` for earlier versions

- (MKOverlayRenderer *)mapView:(MKMapView *)mapView rendererForOverlay:(id<MKOverlay>)overlay
{
    if ([overlay isKindOfClass:[MKPolygon class]])
    {
        MKPolygonRenderer *renderer = [[MKPolygonRenderer alloc] initWithPolygon:overlay];

        renderer.fillColor   = [[UIColor cyanColor] colorWithAlphaComponent:0.2];
        renderer.strokeColor = [[UIColor blueColor] colorWithAlphaComponent:0.7];
        renderer.lineWidth   = 3;

        return renderer;
    }

    if ([overlay isKindOfClass:[MKCircle class]])
    {
        MKCircleRenderer *renderer = [[MKCircleRenderer alloc] initWithCircle:overlay];

        renderer.fillColor   = [[UIColor cyanColor] colorWithAlphaComponent:0.2];
        renderer.strokeColor = [[UIColor blueColor] colorWithAlphaComponent:0.7];
        renderer.lineWidth   = 3;

        return renderer;
    }

    if ([overlay isKindOfClass:[MKPolyline class]])
    {
        MKPolylineRenderer *renderer = [[MKPolylineRenderer alloc] initWithPolyline:overlay];

        renderer.strokeColor = [[UIColor blueColor] colorWithAlphaComponent:0.7];
        renderer.lineWidth   = 3;

        return renderer;
    }

    return nil;
}

// for iOS versions prior to 7; see `rendererForOverlay` for iOS7 and later

- (MKOverlayView *)mapView:(MKMapView *)mapView viewForOverlay:(id <MKOverlay>)overlay
{
    if ([overlay isKindOfClass:[MKPolygon class]])
    {
        MKPolygonView *overlayView = [[MKPolygonView alloc] initWithPolygon:overlay];

        overlayView.fillColor      = [[UIColor cyanColor] colorWithAlphaComponent:0.2];
        overlayView.strokeColor    = [[UIColor blueColor] colorWithAlphaComponent:0.7];
        overlayView.lineWidth      = 3;

        return overlayView;
    }

    if ([overlay isKindOfClass:[MKCircle class]])
    {
        MKCircleView *overlayView = [[MKCircleView alloc] initWithCircle:overlay];

        overlayView.fillColor     = [[UIColor cyanColor] colorWithAlphaComponent:0.2];
        overlayView.strokeColor   = [[UIColor blueColor] colorWithAlphaComponent:0.7];
        overlayView.lineWidth     = 3;

        return overlayView;
    }

    if ([overlay isKindOfClass:[MKPolyline class]])
    {
        MKPolylineView *overlayView = [[MKPolylineView alloc] initWithPolyline:overlay];

        overlayView.strokeColor     = [[UIColor blueColor] colorWithAlphaComponent:0.7];
        overlayView.lineWidth       = 3;

        return overlayView;
    }

    return nil;
}

通过这种方式，我可以将这三种类型的叠加层添加到我的地图中，并且可以正确地渲染所有这些叠加层。

Answer 2

您可以通过实现自己的MKOverlayPathView子类来完成此操作，该子类在map rect中绘制两次路径。一旦用黑色加厚，一次用更薄的颜色加上另一种颜色。

我已经创建了一个简单的直接替换MKPolylineView，它可以让你这样做：ASPolylineView。

- (void)drawMapRect:(MKMapRect)mapRect
          zoomScale:(MKZoomScale)zoomScale
          inContext:(CGContextRef)context
{
    UIColor *darker = [UIColor blackColor];
    CGFloat baseWidth = self.lineWidth / zoomScale;

    // draw the dark colour thicker
    CGContextAddPath(context, self.path);
    CGContextSetStrokeColorWithColor(context, darker.CGColor);
    CGContextSetLineWidth(context, baseWidth * 1.5);
    CGContextSetLineCap(context, self.lineCap);
    CGContextStrokePath(context);

    // now draw the stroke color with the regular width
    CGContextAddPath(context, self.path);
    CGContextSetStrokeColorWithColor(context, self.strokeColor.CGColor);
    CGContextSetLineWidth(context, baseWidth);
    CGContextSetLineCap(context, self.lineCap);
    CGContextStrokePath(context);

    [super drawMapRect:mapRect zoomScale:zoomScale inContext:context];
}

- (void)createPath
{
    // turn the polyline into a path

    CGMutablePathRef path = CGPathCreateMutable();
    BOOL pathIsEmpty = YES;

    for (int i = 0; i < self.polyline.pointCount; i++) {
        CGPoint point = [self pointForMapPoint:self.polyline.points[i]];

        if (pathIsEmpty) {
            CGPathMoveToPoint(path, nil, point.x, point.y);
            pathIsEmpty = NO;
        } else {
            CGPathAddLineToPoint(path, nil, point.x, point.y);
        }
    }

    self.path = path;
}

或者您可以从以下链接https://github.com/nighthawk/ASPolylineView下载代码

我已经使用过了，看看这个屏幕截图。

Answer 3

我有另一种方法。

如果没有坐标数组，则可以绘制两条折线。

绘制特定line1_width的第一行，然后绘制另一行line2_width = line1_width - 1.0。

这将绘制两条线，而第二条线将只看到它的边距，成为第一条线的笔划。

Answer 4

是的，正如Rob所提到的，使用MKPolygon和MKPolygonRenderer而不是MKPolyline和MKPolylineRenderer，但也要确保您的点数组按顺时针顺序排列。如果它是逆时针顺序你只需要通过调用数组上的reverse（）来反转它。

pointsToUse.reverse()
let overlay = MKPolygon(coordinates: &pointsToUse, count: pointsToUse.count)