在Mapbox上添加模糊效果 [英] Add blur effect on a Mapbox

问题描述

我想在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; 
 
返回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（@笛卡尔坐标：（％f，％f），oldcord.x，oldcord.y）; 
 
} 
  

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

我也使用这个lib但我无法理解很多

该示例包含以下逻辑。

1. 使用iOS Map，在地图上方添加了一个自定义UIView，
   UIView的类是 DrawView 实际上处理所有绘图和
   擦除部分。


2. 我们有 CLLocationManager 当然要确定用户的移动。



3. 只要 CLLocationManager 开始给出位置，我们就转换MapView的坐标引脚位置使用以下代码

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

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

     [self.drawView eraseAtPoint：pt]; 
     




4. 当用户坐标的CGPoint传递给DrawView eraseAtPoint 函数我们擦除一个已定义半径的区域，并按需要清除该区域。




5. 我添加了一个样本 directions.gpx 用于模拟GPS位置的文件，示例GIF显示移动。

注意：项目的链接将在 2017年3月14日之后过期，因此请保持下载状态，如果您希望样本再次ping注释。您可以根据需要随意进行修改。

更新：

添加功能要删除圆圈而不是正方形的区域，只需使用下面的代码替换 DrawView 中的 drawRect 功能

   - （void）drawRect：（CGRect）rect {
 
 //绘图代码
 UIColor * backgroundColor = [UIColor colorWithRed：0.85绿色：0.85蓝色：0.85 alpha：1.0f]; //灰色
 
 [backgroundColor setFill]; 
 UIRectFill（rect）; 
 
 if（！self.initialLoad）{//如果从下次加载视图我们将尝试清除所需的区域.. 
 
 //清除背景在给定的矩形
中（NSValue * _rectArray中的holeRectValue）{
 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; 
} 
  

干杯。

I want to add blur effect in mapbox.when first time load map that time only display current location in map other map is blue.see screenshot

when i move the userlocation to another location than other location is clear on the map.also display annotation in specific location see screenshot

help me how can implement this

here i will some implement code

- (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);

}

in this code i will get perfect view pixel point of UserLocation coordinate.after i want to clear blur in view using CGPoint but i can not get it.i think i will create array of CGPoint and than clear using line to blur of view but i can not got it pls suggest me.

i also use this lib but i can not get idea to much https://github.com/DenHeadless/Shapes

解决方案

as per Logic I have added in my comment here I have made a sample for you download it here, check the result below

The sample contains following logic.

1. Using iOS Map, added a Custom UIView above the Map the class for the UIView is DrawView which actually handles all the drawing and erasing part.
2. We are having CLLocationManager of course to determine user's movement.

3. As soon as CLLocationManager start giving locations, we convert the coordinates with respect of MapView pin location using following code

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

   and we pass the CGPoint which is the converted value for the UIView to clear the area in drawing as

   [self.drawView eraseAtPoint:pt];
   

4. When CGPoint from user's coordinate is passed to the DrawView eraseAtPoint function we erase an area of defined radius, and it clears out the area as wanted.

5. I have added a sample directions.gpx file to simulate GPS location, the sample GIF shows the movement.

Note: Link for the project will expire after 14 March,2017, so keep it downloaded, in any case if you want the sample again ping in comment. Feel free to do modifications as you need.

Update:

Adding capability to erase area in circles instead of squares, just replace the drawRect function in DrawView with the code below

- (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;
}

Cheers.

这篇关于在Mapbox上添加模糊效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！