在我们新版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