在我们新版App.针对轨迹上不同速度需要用不同的颜色绘制出来.单纯的绘制渐变色.高德地图SDK已经提供了相应的Api.
/**
* @brief 多彩线，根据经纬度坐标数据生成多彩线
*/
+ (instancetype)polylineWithCoordinates:(CLLocationCoordinate2D *)coords count:(NSUInteger)count drawStyleIndexes:(NSArray<NSNumber *> *) drawStyleIndexes;`
达到如下效果
image.png
其中需要根据速度值获取颜色值.可参考如下代码:
//获取颜色值
- (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];
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 if(curVelo==kPauseSpeed){
//暂停颜色
(*_hue)[i] = kPauseSpeed;
}else{
//超速颜色
(*_hue)[i] = 0.;
}
//填充轨迹渐变数组
UIColor *color;
if(curVelo>0.){
color = [UIColor colorWithHue:(*_hue)[i] saturation:1.0f brightness:1.0f alpha:1.0f];
}else{
color = [UIColor colorWithHue:(*_hue)[i] saturation:1.0f brightness:1.0f alpha:0.0f];
}
[[StaticVariable sharedInstance].gradientColors addObject:(__bridge id)color.CGColor];
}
}
如何实现如下回放效果:
sport.gif
思路比较简单:就是在mapView上添加一层CAShapeLayer做动画即可.至于渐变色.根据gps获取到每两点之间的方向.绘制出每一段渐变CAGradientLayer图层添加到CALayer上.然后通过mask显示即可:
- (void)initGradientLayerWithPoints:(CGPoint *)points Count:(NSUInteger)count{
if(count<1){
return;
}
self.gradientLayer = [[CALayer alloc] init];
for(int i=0;i<count-1;i++){
@autoreleasepool {
CGPoint point1 = points[I];
CGPoint point2 = points[i+1];
double xDiff = point2.x-point1.x; //正向差距多少
double yDiff = point2.y-point1.y; //y轴正向差距多少.
CGPoint startPoint,endPoint;
double offset = 0.;
CAGradientLayer *gradientLayer = [[CAGradientLayer alloc] init];
.......<其他代码>
[self.gradientLayer insertSublayer:gradientLayer atIndex:0];
}
}
[self.gradientLayer setMask:self.shapeLayer];
[self.mapView.layer insertSublayer:self.gradientLayer atIndex:1];
}
获取渐变方向
比较关键的是以上<其他代码>拿出单讲.主要计算两点之间的渐变方向.一张图理解
image.png
代码如下:
//渐变方向
if (xDiff > 0 && yDiff > 0) {
if (xDiff >= yDiff) {
startPoint = CGPointMake(0, 0);
endPoint = CGPointMake(1, yDiff / xDiff);
}else{
offset = xDiff/yDiff;
startPoint = CGPointMake(0, 0);
endPoint = CGPointMake(xDiff / yDiff, 1);
}
}else if (xDiff > 0 && yDiff == 0){
startPoint = CGPointMake(0, 0);
endPoint = CGPointMake(1, 0);
}else if (xDiff < 0 && yDiff == 0){
startPoint = CGPointMake(1, 0);
endPoint = CGPointMake(0, 0);
}else if (xDiff == 0 && yDiff > 0){
startPoint = CGPointMake(0, 0);
endPoint = CGPointMake(0, 1);
}else if (xDiff == 0 && yDiff < 0){
startPoint = CGPointMake(0, 1);
endPoint = CGPointMake(0, 0);
}else if (xDiff > 0 && yDiff < 0){
if (fabs(xDiff) >= fabs(yDiff)) {
startPoint = CGPointMake(0, fabs(yDiff / xDiff));
endPoint = CGPointMake(1, 0);
}else{
startPoint = CGPointMake(0, 1);
endPoint = CGPointMake(fabs(xDiff/yDiff), 0);
}
}else if (xDiff < 0 && yDiff < 0){
if (fabs(xDiff) >= fabs(yDiff)){
startPoint = CGPointMake(1, 1);
endPoint = CGPointMake(0, 1 - fabs(yDiff) / fabs(xDiff));
}else{
startPoint = CGPointMake(fabs(xDiff)/fabs(yDiff), 1);
endPoint = CGPointMake(0, 0);
}
}else{
if(fabs(xDiff) >= fabs(yDiff)){
startPoint = CGPointMake(1, 0);
endPoint = CGPointMake(0, fabs(yDiff) / fabs(xDiff));
}else{
startPoint = CGPointMake(fabs(xDiff)/fabs(yDiff), 0);
endPoint = CGPointMake(0, 1);
}
}
开始绘制:
给CAShareLayer添加动画.在地图上添加移动大头针作为光点.
- (void)execute
{
[self clear];
[self.mapView addOverlay:self.polyline];
/* 使轨迹在地图可视范围内. */
[self.mapView setVisibleMapRect:self.polyline.boundingMapRect edgePadding:self.edgeInsets animated:NO];
self.displayLink = [CADisplayLink displayLinkWithTarget:self
selector:@selector(updateDisplay)];
[self.displayLink addToRunLoop:[NSRunLoop currentRunLoop]
forMode:NSDefaultRunLoopMode];
self.timeCount = 0;
/* 构建path. */
CGPoint *points = [self pointsForCoordinates:_coordinates count:_count];
CGPathRef path = [self pathForPoints:points count:_count];
self.shapeLayer.path = path;
[self.mapView.layer insertSublayer:self.shapeLayer atIndex:1];
/* 根据速度获取渐变颜色集.这里调试写死*/
self.gradientColors = @[(id)UIColor.redColor.CGColor,(id)UIColor.orangeColor.CGColor,(id)UIColor.blueColor.CGColor,(id)UIColor.greenColor.CGColor];
[self initGradientLayerWithPoints:points Count:_count];
[self.mapView addAnnotation:self.annotation];
MAAnnotationView *annotationView = [self.mapView viewForAnnotation:self.annotation];
annotationView.image = [UIImage imageNamed:@"icon24／sport_details_route_head"];
self.annotationView = annotationView;
if (annotationView != nil)
{
/* Annotation animation. */
CAAnimation *annotationAnimation = [self constructAnnotationAnimationWithPath:path];
[annotationView.layer addAnimation:annotationAnimation forKey:@"annotation"];
[annotationView.annotation setCoordinate:_coordinates[_count - 1]];
/* ShapeLayer animation. */
CAAnimation *shapeLayerAnimation = [self constructShapeLayerAnimation];
shapeLayerAnimation.delegate = self;
[self.shapeLayer addAnimation:shapeLayerAnimation forKey:@"shape"];
}
(void)(free(points)), points = NULL;
(void)(CGPathRelease(path)), path = NULL;
}
以上大致讲解了一下实现思路.细节可查看Demo
参考:Guanxxx的iOS MKMapView 地图轨迹回放的动画实现
参考:高德官方demo:Tracking
Demo
