Анимированная полилиния на Mapview Mapbox iOS

Question

Я заменяю GoogleMaps SDK с участием Mapbox SDK для моего приложения iOS. Я застрял в точке, где в моем приложении есть функция, где я анимирую полилинию (уже добавленную) на карте, как приложение Uber.

Но я не могу заставить его работать Mapbox iOS SDK, В Mapbox есть пример, где я могу добавить координаты полилинии на карте с анимацией, но это не то, что я хочу делать.

Полилиния добавлена ​​сразу, но я хочу анимировать маршрут от начала до места назначения.

Вот мой текущий код из примера Mapbox, чтобы добавить координаты полилинии на карту с анимацией.

- (void)addPolylineToStyle:(MGLStyle *)style {
    // Add an empty MGLShapeSource, we’ll keep a reference to this and add points to this later.
    MGLShapeSource *source = [[MGLShapeSource alloc] initWithIdentifier:@"polyline" features:@[] options:nil];
    [style addSource:source];
    self.polylineSource = source;

    // Add a layer to style our polyline.
    MGLLineStyleLayer *layer = [[MGLLineStyleLayer alloc] initWithIdentifier:@"polyline" source:source];
    layer.lineJoin = [NSExpression expressionForConstantValue:@"round"];
    layer.lineCap = layer.lineJoin = [NSExpression expressionForConstantValue:@"round"];
    layer.lineColor = [NSExpression expressionForConstantValue:[UIColor redColor]];

    // The line width should gradually increase based on the zoom level.
    layer.lineWidth = [NSExpression expressionWithFormat:@"mgl_interpolate:withCurveType:parameters:stops:($zoomLevel, 'linear', nil, %@)",
                       @{@14: @5, @18: @20}];
    [self.mapView.style addLayer:layer];
}

- (void)animatePolyline {
    self.currentIndex = 1;

    // Start a timer that will simulate adding points to our polyline. This could also represent coordinates being added to our polyline from another source, such as a CLLocationManagerDelegate.
    [NSTimer scheduledTimerWithTimeInterval:0.05 target:self selector:@selector(tick:) userInfo:nil repeats:YES];
}

- (void)tick:(NSTimer*)timer {
    if (self.currentIndex > self.locations.count) {
        [timer invalidate];
        return;
    }

    // Create a subarray of locations up to the current index.
    NSArray *currentLocations = [self.locations subarrayWithRange:NSMakeRange(0, _currentIndex)];

    // Update our MGLShapeSource with the current locations.
    [self updatePolylineWithLocations:currentLocations];

    self.currentIndex++;
}

- (void)updatePolylineWithLocations:(NSArray<CLLocation *> *)locations {
    CLLocationCoordinate2D coordinates[locations.count];

    for (NSUInteger i = 0; i < locations.count; i++) {
        coordinates[i] = locations[i].coordinate;
    }

    MGLPolylineFeature *polyline = [MGLPolylineFeature polylineWithCoordinates:coordinates count:locations.count];

    // Updating the MGLShapeSource’s shape will have the map redraw our polyline with the current coordinates.
    self.polylineSource.shape = polyline;
}

Обновление: вот gif того, что я ожидаю сделать.

Пожалуйста, помогите мне, что я должен сделать, чтобы оживить маршрут вдоль полилинии?

Спасибо

Answer 1

Спасибо за обновление вашего вопроса с этим полезным визуальным. Вы должны быть в состоянии создать этот эффект с line-gradient выражение стиля, которое обновляется по таймеру.

Несмотря на то, что нет полных примеров реализации этого, команда Mapbox iOS имеет некоторый начальный код, который показывает основной синтаксис выражения градиента линии в этом примере. PR: https://github.com/mapbox/ios-sdk-examples/issues/203. (Конкретная линия, которая определяет градиент, здесь.)

Затем вы можете обновить выражение для вашего MGLLineStyleLayer "s .lineColor атрибут по таймеру.

---

⚠️ Отказ от ответственности: в настоящее время я работаю в Mapbox ⚠️