ios - Mapview Mapbox iOS上的动画折线
问题描述
我正在替换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。
请帮助我如何为折线的路线设置动画?
谢谢
解决方案
感谢您使用有用的视觉更新您的问题。您应该能够使用line-gradient
在计时器上更新的样式表达式来创建此效果。
虽然没有实现这一点的完美示例,但 Mapbox iOS 团队有一些初始代码显示了此示例 PR 中线渐变表达式的基本语法:https ://github.com/mapbox/ios-sdk-examples/issues /203 . (定义渐变的特定行在这里。)
然后,您可以在计时器上更新MGLLineStyleLayer
'.lineColor
属性的表达式。
⚠️ 免责声明:我目前在 Mapbox 工作⚠️
推荐阅读
- javascript - Vue.js 组件中的记录列表为空
- linux - ssh 端口转发(“ssh -fNL”)无法通过期望 spawn 自动提供密码
- integromat - 如何在自定义 Integromat 应用程序中调试 IML 功能?
- spring-boot - 用于在 Spring Boot JPA 中执行本机 SQL IN 子句查询的 SQLSyntaxErrorException
- centos - OpenLDAP 策略翻译
- javascript - 更改多个字体颜色
- bash - 将 linux 命令移动到 shell 脚本中
- django - ASGI vs WSGI,WSGI 兼容性问题
- pandas - 加入两个数据帧并使用数据帧的索引获取新帧
- zsh - oh-my-zsh:找不到插件“git-remote-branch”