WechatIMG2.png

项目已接入高德地图,并且大部分功能已经实现好,但BOSS觉得iOS自带的地图效果更好。。。本着面向老板编程的思想,换之。还好,高德地图是在MapKit上封装的,大部分api只要将前缀MA->MK即可,但有一个问题麻烦了,就是处理轨迹的渐变,Mapkit没有相应的方法,高德又不是开源的,而且国内的网站上基本搜不到解决方案,所以在这里把自己的思路和在国外论坛上找到的解决方法分享出来,让其他做运动的同行节省点时间。

如何在iPhone上绘制mapView就不说了,在mapView上绘制轨迹要添加MKPolyline,调用[self.mapView addOverlay:self.polyLine];但这个MKPolyline的构造方法中只接受和坐标相关的值,而轨迹渐变自然要通过速度控制,但传不进去,所以只能重写一个实现<MKOverlay>协议的类。下面就是我找到的,拿去可以直接用:

GradientPolylineOverlay.h实现

#import <Foundation/Foundation.h>
#import <MapKit/MapKit.h> @interface GradientPolylineOverlay : NSObject <MKOverlay>{
MKMapPoint *points;
NSUInteger pointCount;
NSUInteger pointSpace; MKMapRect boundingMapRect;
pthread_rwlock_t rwLock;
} //Initialize the overlay with the starting coordinate.
//The overlay's boundingMapRect will be set to a sufficiently large square
//centered on the starting coordinate.
-(id) initWithCenterCoordinate:(CLLocationCoordinate2D)coord; -(id) initWithPoints:(CLLocationCoordinate2D*)_points velocity:(float*)_velocity count:(NSUInteger)_count; //Add a location observation. A MKMapRect containing the newly added point
//and the previously added point is returned so that the view can be updated
//int that rectangle. If the added coordinate has not moved far enough from
//the previously added coordinate it will not be added to the list and
//MKMapRectNULL will be returned.
//
-(MKMapRect)addCoordinate:(CLLocationCoordinate2D)coord; -(void) lockForReading; //The following properties must only be accessed when holding the read lock
// via lockForReading. Once you're done accessing the points, release the
// read lock with unlockForReading.
//
@property (assign) MKMapPoint *points;
@property (readonly) NSUInteger pointCount;
@property (assign) float *velocity; -(void) unlockForReading; @end

GradientPolylineOverlay.m

#import "GradientPolylineOverlay.h"
#import <pthread.h> #define INITIAL_POINT_SPACE 1000
#define MINIMUM_DELTA_METERS 10.0 @implementation GradientPolylineOverlay{
} @synthesize points, pointCount, velocity; -(id) initWithCenterCoordinate:(CLLocationCoordinate2D)coord{
self = [super init];
if (self){
//initialize point storage and place this first coordinate in it
pointSpace = INITIAL_POINT_SPACE;
points = malloc(sizeof(MKMapPoint)*pointSpace);
points[0] = MKMapPointForCoordinate(coord);
pointCount = 1; //bite off up to 1/4 of the world to draw into
MKMapPoint origin = points[0];
origin.x -= MKMapSizeWorld.width/8.0;
origin.y -= MKMapSizeWorld.height/8.0;
MKMapSize size = MKMapSizeWorld;
size.width /=4.0;
size.height /=4.0;
boundingMapRect = (MKMapRect) {origin, size};
MKMapRect worldRect = MKMapRectMake(0, 0, MKMapSizeWorld.width, MKMapSizeWorld.height);
boundingMapRect = MKMapRectIntersection(boundingMapRect, worldRect); // initialize read-write lock for drawing and updates
pthread_rwlock_init(&rwLock,NULL);
}
return self;
} -(id) initWithPoints:(CLLocationCoordinate2D*)_points velocity:(float *)_velocity count:(NSUInteger)_count{
self = [super init];
if (self){
pointCount = _count;
self.points = malloc(sizeof(MKMapPoint)*pointCount);
for (int i=0; i<_count; i++){
self.points[i] = MKMapPointForCoordinate(_points[i]);
} self.velocity = malloc(sizeof(float)*pointCount);
for (int i=0; i<_count;i++){
self.velocity[i] = _velocity[i];
} //bite off up to 1/4 of the world to draw into
MKMapPoint origin = points[0];
origin.x -= MKMapSizeWorld.width/8.0;
origin.y -= MKMapSizeWorld.height/8.0;
MKMapSize size = MKMapSizeWorld;
size.width /=4.0;
size.height /=4.0;
boundingMapRect = (MKMapRect) {origin, size};
MKMapRect worldRect = MKMapRectMake(0, 0, MKMapSizeWorld.width, MKMapSizeWorld.height);
boundingMapRect = MKMapRectIntersection(boundingMapRect, worldRect); // initialize read-write lock for drawing and updates
pthread_rwlock_init(&rwLock,NULL);
}
return self;
} -(void)dealloc{
free(points);
free(velocity);
pthread_rwlock_destroy(&rwLock);
} //center
-(CLLocationCoordinate2D)coordinate{
return MKCoordinateForMapPoint(points[0]);
} -(MKMapRect)boundingMapRect{
return boundingMapRect;
} -(void) lockForReading{
pthread_rwlock_rdlock(&rwLock);
} -(void) unlockForReading{
pthread_rwlock_unlock(&rwLock);
} -(MKMapRect)addCoordinate:(CLLocationCoordinate2D)coord{
//Acquire the write lock because we are going to changing the list of points
pthread_rwlock_wrlock(&rwLock); //Convert a CLLocationCoordinate2D to an MKMapPoint
MKMapPoint newPoint = MKMapPointForCoordinate(coord);
MKMapPoint prevPoint = points[pointCount-1]; //Get the distance between this new point and previous point
CLLocationDistance metersApart = MKMetersBetweenMapPoints(newPoint, prevPoint);
MKMapRect updateRect = MKMapRectNull; if (metersApart > MINIMUM_DELTA_METERS){
//Grow the points array if necessary
if (pointSpace == pointCount){
pointSpace *= 2;
points = realloc(points, sizeof(MKMapPoint) * pointSpace);
} //Add the new point to points array
points[pointCount] = newPoint;
pointCount++; //Compute MKMapRect bounding prevPoint and newPoint
double minX = MIN(newPoint.x,prevPoint.x);
double minY = MIN(newPoint.y,prevPoint.y);
double maxX = MAX(newPoint.x, prevPoint.x);
double maxY = MAX(newPoint.y, prevPoint.y); updateRect = MKMapRectMake(minX, minY, maxX - minX, maxY - minY);
} pthread_rwlock_unlock(&rwLock); return updateRect;
} @end

下面是在mapview上添加PolyLine的方法:([self smoothTrack] 是我针对项目需求做速度平滑渐变的算法,可以忽略;我绘制轨迹的坐标数据结构是由精度、维度、速度构成的字典;最后添加的方法是调用mapview的分类中的方法,所以有级别,也是根我需求相关,可直接用[self.mapView addOverlay:self.polyline] 代替)

NSMutableArray *smoothTrackArray = [self smoothTrack];
double count = smoothTrackArray.count;
CLLocationCoordinate2D *points;
float *velocity;
points = malloc(sizeof(CLLocationCoordinate2D)*count);
velocity = malloc(sizeof(float)*count); for(int i=0;i<count;i++){
NSDictionary *dic = [smoothTrackArray objectAtIndex:i];
CLLocationDegrees latitude = [dic[@"latitude"] doubleValue];
CLLocationDegrees longitude = [dic[@"longitude"] doubleValue];
CLLocationCoordinate2D coordinate = CLLocationCoordinate2DMake(latitude, longitude);
velocity[i] = [dic[@"speed"] doubleValue];
points[i] = coordinate;
} self.polyline = [[GradientPolylineOverlay alloc] initWithPoints:points velocity:velocity count:count];
[self.mapView addOverlay:self.polyline level:1];

轨迹添加好了,还需要在渲染器上面呈现,会调用Mapkit相应的代理:(GradientPolylineRenderer 则是与之对应的渲染器)

#pragma mark -
#pragma mark - MKMap Delegate
- (MKOverlayRenderer *)mapView:(MKMapView *)mapView rendererForOverlay:(id <MKOverlay>)overlay{
if([overlay isKindOfClass:[GradientPolylineOverlay class]]){
//轨迹
GradientPolylineRenderer *polylineRenderer = [[GradientPolylineRenderer alloc] initWithOverlay:overlay];
polylineRenderer.lineWidth = 8.f;
return polylineRenderer;
}
return nil;
}

GradientPolylineRenderer.h实现:

#import <MapKit/MapKit.h>

@interface GradientPolylineRenderer : MKOverlayPathRenderer

@end

GradientPolylineRenderer.m实现:(上面的几个宏定义,是速度的边界值,以及对应的颜色边界值;另外我这里会对hues[i]是否为0做判断,项目需求要区分暂停点和速度过快点,已防作弊,此种情况会用虚线代替,如果只绘制渐变实线,不用管这)

#import "GradientPolylineRenderer.h"
#import <pthread.h>
#import "GradientPolylineOverlay.h"
#import "Constant.h" #define V_MAX 4.5
#define V_MIN 1.0
#define H_MAX 0.33
#define H_MIN 0.03 @implementation GradientPolylineRenderer{
float* hues;
pthread_rwlock_t rwLock;
GradientPolylineOverlay* polyline;
} - (id) initWithOverlay:(id<MKOverlay>)overlay{
self = [super initWithOverlay:overlay];
if (self){
pthread_rwlock_init(&rwLock,NULL);
polyline = ((GradientPolylineOverlay*)self.overlay);
float *velocity = polyline.velocity;
int count = (int)polyline.pointCount;
[self velocity:velocity ToHue:&hues count:count];
[self createPath];
}
return self;
}
/**
* Convert velocity to Hue using specific formular.
*
* H(v) = Hmax, (v > Vmax)
* = Hmin + ((v-Vmin)*(Hmax-Hmin))/(Vmax-Vmin), (Vmin <= v <= Vmax)
* = Hmin, (v < Vmin)
*
* @param velocity Velocity list.
* @param count count of velocity list.
*
* @return An array of hues mapping each velocity.
*/
- (void) velocity:(float*)velocity ToHue:(float**)_hue count:(int)count{
*_hue = malloc(sizeof(float)*count);
for (int i=0;i<count;i++){
float curVelo = velocity[i];
// //原有渐变公式
// curVelo = ((curVelo < V_MIN) ? V_MIN : (curVelo > V_MAX) ? V_MAX : curVelo);
// (*_hue)[i] = H_MIN + ((curVelo-V_MIN)*(H_MAX-H_MIN))/(V_MAX-V_MIN); if(curVelo>0.){
curVelo = ((curVelo < V_MIN) ? V_MIN : (curVelo > V_MAX) ? V_MAX : curVelo);
(*_hue)[i] = H_MIN + ((curVelo-V_MIN)*(H_MAX-H_MIN))/(V_MAX-V_MIN);
}else{
//暂停颜色
(*_hue)[i] = 0.;
}
}
} -(void) createPath{
CGMutablePathRef path = CGPathCreateMutable();
BOOL pathIsEmpty = YES;
for (int i=0;i< polyline.pointCount;i++){
CGPoint point = [self pointForMapPoint:polyline.points[i]];
if (pathIsEmpty){
CGPathMoveToPoint(path, nil, point.x, point.y);
pathIsEmpty = NO;
} else {
CGPathAddLineToPoint(path, nil, point.x, point.y);
}
} pthread_rwlock_wrlock(&rwLock);
self.path = path; //<—— don't forget this line.
pthread_rwlock_unlock(&rwLock);
} //-(BOOL)canDrawMapRect:(MKMapRect)mapRect zoomScale:(MKZoomScale)zoomScale{
// CGRect pointsRect = CGPathGetBoundingBox(self.path);
// CGRect mapRectCG = [self rectForMapRect:mapRect];
// return CGRectIntersectsRect(pointsRect, mapRectCG);
//} - (void) drawMapRect:(MKMapRect)mapRect zoomScale:(MKZoomScale)zoomScale inContext:(CGContextRef)context{ //put this blok into the canDraw method cause problem
CGRect pointsRect = CGPathGetBoundingBox(self.path);
CGRect mapRectCG = [self rectForMapRect:mapRect];
if (!CGRectIntersectsRect(pointsRect, mapRectCG))return;
CGContextSetLineCap(context, kCGLineCapRound);
CGContextSetLineJoin(context, kCGLineJoinRound);
UIColor* pcolor,*ccolor;
for (int i=0;i< polyline.pointCount;i++){
CGPoint point = [self pointForMapPoint:polyline.points[i]];
CGMutablePathRef path = CGPathCreateMutable(); if(hues[i]==0.){
//虚线
if(i==0){
CGPathMoveToPoint(path, nil, point.x, point.y);
}else{
//颜色
CGContextSetRGBStrokeColor(context, 153.0 / 255.0, 153.0 / 255.0, 153.0 / 255.0, 1.0);
//线宽
CGFloat lineWidth = CGContextConvertSizeToUserSpace(context, (CGSize){self.lineWidth,self.lineWidth}).width;
CGContextSetLineWidth(context, lineWidth); CGFloat lengths[] = {lineWidth*2,lineWidth*2};//设置虚线
CGContextSetLineDash(context, lineWidth, lengths, 2);//设置虚线 CGPoint prevPoint = [self pointForMapPoint:polyline.points[i-1]];
CGPathMoveToPoint(path, nil, prevPoint.x, prevPoint.y);
CGPathAddLineToPoint(path, nil, point.x, point.y);
CGContextAddPath(context, path);
CGContextStrokePath(context);
}
}else{
//跑步渐变
ccolor = [UIColor colorWithHue:hues[i] saturation:1.0f brightness:1.0f alpha:1.0f];
if (i==0){
CGPathMoveToPoint(path, nil, point.x, point.y);
} else {
CGPoint prevPoint = [self pointForMapPoint:polyline.points[i-1]];
CGPathMoveToPoint(path, nil, prevPoint.x, prevPoint.y);
CGPathAddLineToPoint(path, nil, point.x, point.y); CGFloat pc_r,pc_g,pc_b,pc_a,
cc_r,cc_g,cc_b,cc_a; [pcolor getRed:&pc_r green:&pc_g blue:&pc_b alpha:&pc_a];
[ccolor getRed:&cc_r green:&cc_g blue:&cc_b alpha:&cc_a]; CGFloat gradientColors[8] = {pc_r,pc_g,pc_b,pc_a,
cc_r,cc_g,cc_b,cc_a}; CGFloat gradientLocation[2] = {0,1};
CGContextSaveGState(context);
CGFloat lineWidth = CGContextConvertSizeToUserSpace(context, (CGSize){self.lineWidth,self.lineWidth}).width;
CGPathRef pathToFill = CGPathCreateCopyByStrokingPath(path, NULL, lineWidth, self.lineCap, self.lineJoin, self.miterLimit);
CGContextAddPath(context, pathToFill);
CGContextClip(context);
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGGradientRef gradient = CGGradientCreateWithColorComponents(colorSpace, gradientColors, gradientLocation, 2);
CGColorSpaceRelease(colorSpace);
CGPoint gradientStart = prevPoint;
CGPoint gradientEnd = point;
CGContextDrawLinearGradient(context, gradient, gradientStart, gradientEnd, kCGGradientDrawsAfterEndLocation);
CGGradientRelease(gradient);
CGContextRestoreGState(context);
pcolor = [UIColor colorWithCGColor:ccolor.CGColor];
}
}
}
}
@end

以上就是我基于Mapkit绘制渐变轨迹的方式,相比高德的轨迹,圆滑程度还是欠缺些,但这些都是项目日后优化的点。
最后,附上我项目的下载地址,如果有帮到你,求好评,谢谢!;如果有其他问题,也欢迎一起讨论
https://itunes.apple.com/cn/app/ning-meng-pao-bu/id1108388147?mt=8

文/柠檬跑步(简书作者)
原文链接:http://www.jianshu.com/p/2d71cc8dd035
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。

iOS 原生地图(MapKit、MKMapView)轨迹渐变的更多相关文章

  1. IOS原生地图与高德地图

    原生地图 1.什么是LBS LBS: 基于位置的服务   Location Based Service 实际应用:大众点评,陌陌,微信,美团等需要用到地图或定位的App 2.定位方式 1.GPS定位  ...

  2. iOS原生地图开发指南续——大头针与自定义标注

    iOS原生地图开发指南续——大头针与自定义标注 出自:http://www.sxt.cn/info-6042-u-7372.html 在上一篇博客中http://my.oschina.net/u/23 ...

  3. iOS原生地图开发详解

    在上一篇博客中:http://my.oschina.net/u/2340880/blog/414760.对iOS中的定位服务进行了详细的介绍与参数说明,在开发中,地位服务往往与地图框架结合使用,这篇博 ...

  4. iOS原生地图开发进阶——使用导航和附近兴趣点检索

    iOS原生地图开发进阶——使用导航和附近兴趣点检索 iOS中的mapKit框架对国际化的支持非常出色.在前些篇博客中,对这个地图框架的基础用法和标注与覆盖物的添加进行了详细的介绍,这篇博客将介绍两个更 ...

  5. iOS 原生地图 开发

    iOS开发有时候用到地图,不少人第一想到的是用第三方.当然有时候为了和安卓同步,可能会一起使用某一第三方.但有时候,我们是可以用原生地图开发的.上面两个示意图是原生地图的自定义开发.运行demo,将展 ...

  6. iOS原生地图与高德地图的使用

    原生地图 1.什么是LBS LBS: 基于位置的服务 Location Based Service 实际应用:大众点评,陌陌,微信,美团等需要用到地图或定位的App 2.定位方式 1.GPS定位 2. ...

  7. iOS 原生地图地理编码与反地理编码

    当我们要在App实现功能:输入地名,编码为经纬度,实现导航功能. 那么,我需要用到原生地图中的地理编码功能,而在Core Location中主要包含了定位.地理编码(包括反编码)功能. 在文件中导入 ...

  8. 如何初始化一个iOS原生地图

    /** 初始化一个mapView  需导入 #import <MapKit/MapKit.h> - returns: 返回一个mapView对象 */ mapView = [[MKMapV ...

  9. iOS之原生地图与高德地图

    原生地图 1.什么是LBS LBS: 基于位置的服务 Location Based Service 实际应用:大众点评,陌陌,微信,美团等需要用到地图或定位的App 2.定位方式 1.GPS定位 2. ...

随机推荐

  1. jQuery文档加载完毕的几种写法

    js中文档加载完毕.一般在body加一个onload事件或者window.onload = function () {} jQuery中有好多写法,平时也不注意,别人一问,还真觉得头大. 下面是我整理 ...

  2. HTML的<head>中的内容总结

    [01]文件头部一般包含标题标签.<meta>标签.内联样式表及预定义脚本等. [02]<meta>标签在网页内容中不显示,但它的作用不容忽视.<meta>标签主要 ...

  3. sqlserver中GUID的默认值设置

    sqlserver中GUID的默认值设置 YID uniqueidentifier not null default (NEWSEQUENTIALID()), //有序GUID(只能用于表设计的时候的 ...

  4. Cocos2d-JS v3.0 alpha不支持cocos2d-x的Physics integration

    cocos2d-x 3.0新的Physics integration,把chipmunk和Box2D封装到引擎内部 auto scene = Scene::createWithPhysics(); s ...

  5. 如何判断ios设备是否是高清屏幕

    if([[[UIDevice currentDevice] systemVersion] floatValue] >= 3.2f) { CGRect winRect = [[UIScreen m ...

  6. C#操作Access的一些小结

    C#操作Access的一些小结 好久没有写blog,感觉今年一年都没怎么真正开心过,整天有一些事围绕在身边,使心情难以平静下来,真正写点有意义的东西.博客园是天天看的,看得多,写的少,偶尔也是Copy ...

  7. C++11用于元编程的类别属性

    [C++11用于元编程的类别属性] 许多算法能作用在不同的数据类别; C++ 模板支持泛型,这使得代码能更紧凑和有用.然而,算法经常会需要目前作用的数据类别的信息.这种信息可以通过类别属性 (type ...

  8. STM32F407存储器和总线架构

    http://www.cnblogs.com/ransn/p/5654068.html

  9. POJ2155Matrix(二维线段树)

    链接http://poj.org/problem?id=2155 题目操作就是说,每次操作可以是编辑某个矩形区域,这个区域的0改为1,1改为0,每次查询只查询某一个点的值是0还是1. 方法:二维线段树 ...

  10. 在CentOS 5.8上搭建PPTP VPN服务

    在天朝上网,vpn已经是必备之物了,我也记录一下搭建vpn服务的方法. 1. 确认内核是否支持MPPE模块MPPE用来支持Microsoft Point to Point Encryption, 包括 ...