ios - 在 MKMapView 上绘制自定义形状(地理围栏)区域

Question

我正在创建一个通用应用，我必须在 map View 上创建自定义安全区。

我做的是:

1. 添加一个名为 squareZone 的新 UIView 作为 map view 的 super View 。
2. 我向 squareZone View 添加了 UIPanGestureRecognizer、UIPinchGestureRecognizer 和 UIRotationGestureRecognizer 以便我可以移动、旋转和缩放(进出)。

这是SquareZone的代码

- (id)initWithFrame:(CGRect)frame{
    self = [super initWithFrame:frame];
    if (self) {
        self.opaque = NO;
        self.layer.cornerRadius = 5.0f;
    }
    return self;
}

- (void)drawRect:(CGRect)rect {
    [super drawRect:rect];

    UIColor *color = [UIColor colorWithRed: 0.765 green: 0.439 blue: 0.443 alpha: 0.658];

    UIBezierPath *rectanglePath = [UIBezierPath bezierPathWithRect: rect];
    [color setFill];
    [rectanglePath fill];
    [UIColor.whiteColor setStroke];
    rectanglePath.lineWidth = 5;
    CGFloat rectanglePattern[] = {2, 3};
    [rectanglePath setLineDash: rectanglePattern count: 2 phase: 0];
    [rectanglePath stroke];
}

现在，当用户调整 squareZone 时，我必须在 UILabel 上显示每个点之间的距离(以米为单位)。对于我正在使用的任务

- (CLLocationDistance)distanceFromLocation:(const CLLocation *)location

当用户与 squareZone 交互时，如何添加/显示四个 UILabels。

我这里需要一些光。我看过很多教程，但我无法想象这怎么可能。作为引用，有一个名为

Trax:https://itunes.apple.com/us/app/trax-gps-tracker/id647170688?mt=8

我必须执行相同的绘图地理围栏区域。

提前致谢。

Answer 1

首先要提到的是 Trax 有两种不同的模式:

1) 编辑 -- 绘制路径的地方

2) live -- 显示结果的地方。

编辑模式

在编辑时，您不能在 MKMapView 内部移动和缩放。发生这种情况是因为他们使用了与您相同的方法——他们在 MKMapView 之上添加了一个 UIView，这样手势就不会相互冲突。

您需要做的就是将 CGPoint 添加到某个数组并在将来使用它们。

当然，使用 CoreGraphics 框架有一些困难，但并不是那么棘手。

直播模式

在用户添加了所有 CGPoint 之后，您现在必须将这些点转换为实际的 CLLocationCoordinate2D 实例。

CGPoint thePoint = ...
CLLocationCoordinate2D theLocationCoordinate2D = [theMapView convertPoint:thePoint toCoordinateFromView:theDrawingView];

Trax 在他们的应用程序中可能(几乎可以肯定)是 MKPolygon 类的实例。

你可以这样添加:

NSUInteger theCount = self.theMainDrawingView.thePointsArray.count;
CLLocationCoordinate2D theLocationCoordinatesArray[theCount];
for (NSUInteger theIndex = 0; theIndex < theCount; theIndex++)
{
    CGPoint thePoint = self.theMainDrawingView.thePointsArray[theIndex].CGPointValue;
    CLLocationCoordinate2D theLocationCoordinate2D = [self.theMainMapView convertPoint:thePoint toCoordinateFromView:self.theMainDrawingView];
    theLocationCoordinatesArray[theIndex] = theLocationCoordinate2D;
}
MKPolygon *thePolygon = [MKPolygon polygonWithCoordinates:theLocationCoordinatesArray count:theCount];
[self.theMainMapView addOverlay:thePolygon];

然而，这还没有结束。这将触发您的 MKMapView 的委托(delegate)方法(不要忘记设置其 .delegate 属性)

- (MKOverlayView *)mapView:(MKMapView *)mapView viewForOverlay:(id<MKOverlay>)overlay
{
    if (![overlay isKindOfClass:[MKPolygon class]])
    {
        return nil;
    }
    MKPolygonView *thePolygonView = [[MKPolygonView alloc] initWithPolygon:(MKPolygon *)overlay];
    thePolygonView.fillColor = [[UIColor cyanColor] colorWithAlphaComponent:0.2];
    thePolygonView.strokeColor = [[UIColor redColor] colorWithAlphaComponent:0.6];
    thePolygonView.lineWidth = 4;
    return thePolygonView;
}

结果是这样的:

总结

当然，这并不能完全解决问题，因为您还必须添加 pinch 和 pan 手势，但我希望我能指出正确的方向。