在 Mapbox 上添加模糊效果

Posted 2023-03-13

【中文标题】在 Mapbox 上添加模糊效果

【英文标题】：Add blur effect on a Mapbox

【发布时间】：2017-01-02 10:14:30

【问题描述】：

我想在mapbox中添加模糊效果。当第一次加载地图时，只在地图中显示当前位置，其他地图是蓝色的。看截图

当我将用户位置移动到另一个位置时，其他位置在地图上是清晰的。还在特定位置显示注释 看截图

帮助我如何实现这一点

这里我将一些实现代码

- (CGPoint)convertLatLongCoord:(CGPoint)latLong 
    CGSize screenSize = [UIScreen mainScreen].applicationFrame.size];
    CGFloat SCALE = MIN(screenSize.width, screenSize.height) / (2.0 * EARTH_RADIUS);
    CGFloat OFFSET = MIN(screenSize.width, screenSize.height) / 2.0;
    CGFloat x = EARTH_RADIUS * cos(latLong.x) * cos(latLong.y) * SCALE + OFFSET;
    CGFloat y = EARTH_RADIUS * cos(latLong.x) * sin(latLong.y) * SCALE + OFFSET;

    return CGPointMake(x, y);


-(void)locationManager:(CLLocationManager *)manager didUpdateLocations:(NSArray<CLLocation *> *)locations

    NSLog(@"data=%f",self.mapview.userLocation.coordinate.latitude);
    CLLocation *currentLoc=[locations objectAtIndex:0];
    _coordinate=currentLoc.coordinate;
CGPoint latLong = _coordinate.latitude, _coordinate.longitude;
    oldcord = [self convertLatLongCoord:latLong];
    NSLog(@"Cartesian Coordinate: (%f, %f)",oldcord.x, oldcord.y);

在此代码中，我将获得 UserLocation 坐标的完美视图像素点。之后我想使用 CGPoint 清除视图中的模糊，但我无法获得它。我想我将创建 CGPoint 数组，而不是使用线条来模糊查看，但我无法得到它请建议我。

我也使用这个库，但我不太了解https://github.com/DenHeadless/Shapes

【参考方案1】：

根据我在评论中添加的逻辑here 我已经为您制作了一个样本download it here，请查看下面的结果

示例包含以下逻辑。

使用ios Map，在Map的上方添加了一个Custom UIView UIView 是DrawView，它实际上处理所有的绘图和 擦除部分。 我们当然有CLLocationManager 来确定用户的移动。

CLLocationManager 开始提供位置后，我们使用以下代码转换相对于 MapView 引脚位置的坐标

CGPoint pt=[self.map convertCoordinate:location.coordinate toPointToView:self.view];

我们传递CGPoint，这是UIView的转换值，以清除绘图中的区域

[self.drawView eraseAtPoint:pt];

当来自用户坐标的 CGPoint 被传递给 DrawView eraseAtPoint 函数时，我们会擦除一个定义半径的区域，并根据需要清除该区域。

我添加了一个示例directions.gpx 文件来模拟 GPS 定位，示例 GIF 显示了运动。

注意：该项目的链接将在 2017 年 3 月 14 日之后过期，所以请继续下载，如果您希望在评论中再次 ping 示例，请继续下载。随意根据需要进行修改。

更新：

添加以圆形而不是正方形擦除区域的功能，只需将 DrawView 中的drawRect 函数替换为以下代码

- (void)drawRect:(CGRect)rect     

    // Drawing code
    UIColor *backgroundColor=[UIColor colorWithRed:0.85 green:0.85 blue:0.85 alpha:1.0f];//Grey

    [backgroundColor setFill];
    UIRectFill(rect);

    if(!self.initialLoad)//If the view has been loaded from next time we will try to clear area where required..

        // clear the background in the given rectangles
        for (NSValue *holeRectValue in _rectArray) 
            CGContextRef context = UIGraphicsGetCurrentContext();

            CGRect holeRect = [holeRectValue CGRectValue];

            [[UIColor clearColor] setFill];

            CGRect holeRectIntersection = CGRectIntersection( holeRect, rect );

            CGContextSetFillColorWithColor( context, [UIColor clearColor].CGColor );
            CGContextSetBlendMode(context, kCGBlendModeClear);

            CGContextFillEllipseInRect( context, holeRectIntersection );

        
    

    self.initialLoad=NO;

干杯。

【讨论】：

在 mapbox 中我会得到错误的 cgpoint (CGPoint) pt = (x = 1040634.6362283671, y = -389230.46748177585)

@Jigar 我不知道MapBox，你可以做的是隐藏视图中的iOS地图并正确计算，gps位置仍然会在你的MapBox地图上移动，只是一个主意。您可以随时深入研究 MapBox 课程、教程和论坛来寻找答案，您的解决方案的基本思想在示例中，这就是这样做的方式。

***.com/questions/9711248/… 我将尝试使用此代码创建圆圈。我知道了，但只创建一个圆圈而不是多个圆圈，如果您有一些想法而不是告诉我，我需要创建多个圆圈而不是矩形

@Jigar 是的，检查我的更新我已添加代码以擦除带圆圈的区域。