如何在GMSMapView中获取动画折线路线，使其在地图移动时随地图一起移动？
How to get animated polyline route in GMSMapView, so that it move along with map when map is moved?
我已经通过以下代码创建了像 CAShapeLayer 这样的动画多段线，我已经将 CAShapeLayer 作为子层添加到 GMSMapiew 但是，如果我移动地图，图层不会移动。在哪里添加图层，使其随地图一起移动？
func layer(from path: GMSPath) -> CAShapeLayer {
let breizerPath = UIBezierPath()
let firstCoordinate: CLLocationCoordinate2D = path.coordinate(at: 0)
breizerPath.move(to: self.mapView.projection.point(for: firstCoordinate))
for i in 1 ..< Int((path.count())){
print(path.coordinate(at: UInt(i)))
let coordinate: CLLocationCoordinate2D = path.coordinate(at: UInt(i))
breizerPath.addLine(to: self.mapView.projection.point(for: coordinate))
}
let shapeLayer = CAShapeLayer()
shapeLayer.path = breizerPath.reversing().cgPath
shapeLayer.strokeColor = UIColor.green.cgColor
shapeLayer.lineWidth = 4.0
shapeLayer.fillColor = UIColor.clear.cgColor
shapeLayer.lineJoin = kCALineJoinRound
shapeLayer.lineCap = kCALineCapRound
shapeLayer.cornerRadius = 5
return shapeLayer
}
func animatePath(_ layer: CAShapeLayer) {
let pathAnimation = CABasicAnimation(keyPath: "strokeEnd")
pathAnimation.duration = 6
//pathAnimation.delegate = self
pathAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut)
pathAnimation.fromValue = Int(0.0)
pathAnimation.toValue = Int(1.0)
pathAnimation.repeatCount = 100
layer.add(pathAnimation, forKey: "strokeEnd")
}
由
添加到 GoogleMapView
let shapelayer: CAShapeLayer = self.layer(from: path!)
self.animatePath(shapelayer)
self.mapView.layer.addSublayer(shapelayer)
通过实施委托 mapView:didChangeCameraPosition:.
在地图移动时移动图层
您需要为此使用 GMSPolyline。创建一个 GMSPolyline 实例，将您的 GMSMapView 实例设置为其父映射。
GMSPolyline* routeOverlay = // config
routeOverlay.map = // my GMSMapView instance
就是这样。你不需要做任何额外的事情来让它随着地图相机的移动而移动。它会自动执行此操作。
我正在创建 GMSPath 路径为 coordinate
的动画
Objective C
界面
@interface MapWithTracking ()
@property (weak, nonatomic) IBOutlet GMSMapView *mapView;
@property (nonatomic,strong) GMSMutablePath *path2;
@property (nonatomic,strong)NSMutableArray *arrayPolylineGreen;
@property (nonatomic,strong) GMSPolyline *polylineBlue;
@property (nonatomic,strong) GMSPolyline *polylineGreen;
@end
实施
-(void)viewDidLoad {
_arrayPolylineGreen = [[NSMutableArray alloc] init];
_path2 = [[GMSMutablePath alloc]init];
}
获取 GMSPath 并创建一条蓝色多段线。
-(void)createBluePolyline(GMSPath *path) {
// Here create a blue poly line
_polylineBlue = [GMSPolyline polylineWithPath:path];
_polylineBlue.strokeColor = [UIColor blueColor];
_polylineBlue.strokeWidth = 3;
_polylineBlue.map = _mapView;
// animate green path with timer
[NSTimer scheduledTimerWithTimeInterval:0.003 repeats:true block:^(NSTimer * _Nonnull timer) {
[self animate:path];
}];
}
为绿色折线制作动画
将坐标添加到路径 2 并分配给地图
-(void)animate:(GMSPath *)path {
dispatch_async(dispatch_get_main_queue(), ^{
if (i < path.count) {
[_path2 addCoordinate:[path coordinateAtIndex:i]];
_polylineGreen = [GMSPolyline polylineWithPath:_path2];
_polylineGreen.strokeColor = [UIColor greenColor];
_polylineGreen.strokeWidth = 3;
_polylineGreen.map = _mapView;
[arrayPolylineGreen addObject:_polylineGreen];
i++;
}
else {
i = 0;
_path2 = [[GMSMutablePath alloc] init];
for (GMSPolyline *line in arrayPolylineGreen) {
line.map = nil;
}
}
});
}
SWIFT
声明
var polyline = GMSPolyline()
var animationPolyline = GMSPolyline()
var path = GMSPath()
var animationPath = GMSMutablePath()
var i: UInt = 0
var timer: Timer!
到达尔路线
func drawRoute(routeDict: Dictionary<String, Any>) {
let routesArray = routeDict ["routes"] as! NSArray
if (routesArray.count > 0)
{
let routeDict = routesArray[0] as! Dictionary<String, Any>
let routeOverviewPolyline = routeDict["overview_polyline"] as! Dictionary<String, Any>
let points = routeOverviewPolyline["points"]
self.path = GMSPath.init(fromEncodedPath: points as! String)!
self.polyline.path = path
self.polyline.strokeColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.5)
self.polyline.strokeWidth = 3.0
self.polyline.map = self.mapView
self.timer = Timer.scheduledTimer(timeInterval: 0.003, target: self, selector: #selector(animatePolylinePath), userInfo: nil, repeats: true)
}
}
动画路径
func animatePolylinePath() {
if (self.i < self.path.count()) {
self.animationPath.add(self.path.coordinate(at: self.i))
self.animationPolyline.path = self.animationPath
self.animationPolyline.strokeColor = UIColor.black
self.animationPolyline.strokeWidth = 3
self.animationPolyline.map = self.mapView
self.i += 1
}
else {
self.i = 0
self.animationPath = GMSMutablePath()
self.animationPolyline.map = nil
}
}
别忘了在 viewWillDisappear 中停止计时器
self.timer.invalidate()
Output
这是对 Elangovan 代码的改编
我所做的更改是从 class 中删除 var 使其仅在函数中，还删除了 iOS 中不再需要的 #selector >= 10.
var timerAnimation: Timer!
var mapView:GMSMapView?
func drawRoute(encodedString: String, animated: Bool) {
if let path = GMSMutablePath(fromEncodedPath: encodedString) {
let polyline = GMSPolyline(path: path)
polyline.strokeWidth = 3.0
polyline.strokeColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.5)
polyline.map = Singleton.shared.getMapView()
if(animated){
self.animatePolylinePath(path: path)
}
}
}
func animatePolylinePath(path: GMSMutablePath) {
var pos: UInt = 0
var animationPath = GMSMutablePath()
let animationPolyline = GMSPolyline()
self.timerAnimation = Timer.scheduledTimer(withTimeInterval: 0.003, repeats: true) { timer in
pos += 1
if(pos >= path.count()){
pos = 0
animationPath = GMSMutablePath()
animationPolyline.map = nil
}
animationPath.add(path.coordinate(at: pos))
animationPolyline.path = animationPath
animationPolyline.strokeColor = UIColor.yellow
animationPolyline.strokeWidth = 3
animationPolyline.map = self.mapView
}
}
func stopAnimatePolylinePath() {
self.timerAnimation.invalidate()
}
您可以为 shapeLayer 创建一个变量并使用 GMSMapViewDelegate 方法
mapView(_ mapView: GMSMapView, willMove gesture: Bool) 和
mapView(_ mapView: GMSMapView, idleAt position: GMSCameraPosition) 在地图上添加和删除图层。这种方法有两个缺点，第一个是当地图被拖动（移动）时图层不会动画，第二个缺点是图层总是位于所有其他地图元素之上，如标记、道路名称、POI 等. 我找不到将此图层作为子图层直接添加到地面叠加层的方法。您可以在下面找到完整的代码：
var polyLineShapeLayer:CAShapeLayer?
var layerAdded = false
var path = GMSPath()
var polyLine:GMSPolyline!
// Add regular polyline to the map
func addPolyLineWithEncodedStringInMap(_ encodedString:String) {
self.polyLine = GMSPolyline(path: self.path)
polyLine.strokeWidth = 3.8
self.polyLine.strokeColor = .black
polyLine.map = googleMapView
DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + 2) {
self.addPolyLineShapeLayerToMapView()
self.layerAdded = true
}
}
// Add CAshapeLayer to map
func layer(from path: GMSPath) -> CAShapeLayer {
let breizerPath = UIBezierPath()
let firstCoordinate: CLLocationCoordinate2D = path.coordinate(at: 0)
breizerPath.move(to: self.googleMapView.projection.point(for: firstCoordinate))
for i in 1 ..< Int((path.count())){
print(path.coordinate(at: UInt(i)))
let coordinate: CLLocationCoordinate2D = path.coordinate(at: UInt(i))
breizerPath.addLine(to: self.googleMapView.projection.point(for: coordinate))
}
let shapeLayer = CAShapeLayer()
shapeLayer.path = breizerPath.cgPath
shapeLayer.strokeColor = UIColor.lightGray.withAlphaComponent(0.8).cgColor
shapeLayer.lineWidth = 4.0
shapeLayer.fillColor = UIColor.clear.cgColor
shapeLayer.lineJoin = kCALineJoinRound
shapeLayer.lineCap = kCALineCapRound
shapeLayer.cornerRadius = 5
return shapeLayer
}
func animatePath(_ layer: CAShapeLayer) {
let pathAnimation = CABasicAnimation(keyPath: "strokeEnd")
pathAnimation.duration = 2
pathAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
pathAnimation.fromValue = Int(0.0)
pathAnimation.toValue = Int(1.0)
pathAnimation.repeatCount = 200
layer.add(pathAnimation, forKey: "strokeEnd")
}
func addPolyLineShapeLayerToMapView(){
polyLineShapeLayer = self.layer(from: self.path)
if let polyLineShapeLayer = polyLineShapeLayer{
self.animatePath(polyLineShapeLayer)
self.googleMapView.layer.addSublayer(polyLineShapeLayer)
polyLineShapeLayer.zPosition = 0
}
}
// Delegate methods to control the polyline
// whenever map is about to move, if layer is already added, remove the layer from superLayer
func mapView(_ mapView: GMSMapView, willMove gesture: Bool) {
if layerAdded{
DispatchQueue.main.async {
self.polyLineShapeLayer?.removeFromSuperlayer()
self.polyLineShapeLayer = nil
}
}
}
// when map is idle again(var layerAdded:bool ensures that additional layer is not added initially when the delegate method is fired) add new instance of polylineShapeLayer to the map with current projected coordinates.
func mapView(_ mapView: GMSMapView, idleAt position: GMSCameraPosition) {
if self.layerAdded{
self.addPolyLineShapeLayerToMapView()
}
}
我已经通过以下代码创建了像 CAShapeLayer 这样的动画多段线，我已经将 CAShapeLayer 作为子层添加到 GMSMapiew 但是，如果我移动地图，图层不会移动。在哪里添加图层，使其随地图一起移动？
func layer(from path: GMSPath) -> CAShapeLayer {
let breizerPath = UIBezierPath()
let firstCoordinate: CLLocationCoordinate2D = path.coordinate(at: 0)
breizerPath.move(to: self.mapView.projection.point(for: firstCoordinate))
for i in 1 ..< Int((path.count())){
print(path.coordinate(at: UInt(i)))
let coordinate: CLLocationCoordinate2D = path.coordinate(at: UInt(i))
breizerPath.addLine(to: self.mapView.projection.point(for: coordinate))
}
let shapeLayer = CAShapeLayer()
shapeLayer.path = breizerPath.reversing().cgPath
shapeLayer.strokeColor = UIColor.green.cgColor
shapeLayer.lineWidth = 4.0
shapeLayer.fillColor = UIColor.clear.cgColor
shapeLayer.lineJoin = kCALineJoinRound
shapeLayer.lineCap = kCALineCapRound
shapeLayer.cornerRadius = 5
return shapeLayer
}
func animatePath(_ layer: CAShapeLayer) {
let pathAnimation = CABasicAnimation(keyPath: "strokeEnd")
pathAnimation.duration = 6
//pathAnimation.delegate = self
pathAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut)
pathAnimation.fromValue = Int(0.0)
pathAnimation.toValue = Int(1.0)
pathAnimation.repeatCount = 100
layer.add(pathAnimation, forKey: "strokeEnd")
}
由
添加到 GoogleMapView let shapelayer: CAShapeLayer = self.layer(from: path!)
self.animatePath(shapelayer)
self.mapView.layer.addSublayer(shapelayer)
通过实施委托 mapView:didChangeCameraPosition:.
您需要为此使用 GMSPolyline。创建一个 GMSPolyline 实例，将您的 GMSMapView 实例设置为其父映射。
GMSPolyline* routeOverlay = // config
routeOverlay.map = // my GMSMapView instance
就是这样。你不需要做任何额外的事情来让它随着地图相机的移动而移动。它会自动执行此操作。
我正在创建 GMSPath 路径为 coordinate
Objective C
界面
@interface MapWithTracking ()
@property (weak, nonatomic) IBOutlet GMSMapView *mapView;
@property (nonatomic,strong) GMSMutablePath *path2;
@property (nonatomic,strong)NSMutableArray *arrayPolylineGreen;
@property (nonatomic,strong) GMSPolyline *polylineBlue;
@property (nonatomic,strong) GMSPolyline *polylineGreen;
@end
实施
-(void)viewDidLoad {
_arrayPolylineGreen = [[NSMutableArray alloc] init];
_path2 = [[GMSMutablePath alloc]init];
}
获取 GMSPath 并创建一条蓝色多段线。
-(void)createBluePolyline(GMSPath *path) {
// Here create a blue poly line
_polylineBlue = [GMSPolyline polylineWithPath:path];
_polylineBlue.strokeColor = [UIColor blueColor];
_polylineBlue.strokeWidth = 3;
_polylineBlue.map = _mapView;
// animate green path with timer
[NSTimer scheduledTimerWithTimeInterval:0.003 repeats:true block:^(NSTimer * _Nonnull timer) {
[self animate:path];
}];
}
为绿色折线制作动画
将坐标添加到路径 2 并分配给地图
-(void)animate:(GMSPath *)path {
dispatch_async(dispatch_get_main_queue(), ^{
if (i < path.count) {
[_path2 addCoordinate:[path coordinateAtIndex:i]];
_polylineGreen = [GMSPolyline polylineWithPath:_path2];
_polylineGreen.strokeColor = [UIColor greenColor];
_polylineGreen.strokeWidth = 3;
_polylineGreen.map = _mapView;
[arrayPolylineGreen addObject:_polylineGreen];
i++;
}
else {
i = 0;
_path2 = [[GMSMutablePath alloc] init];
for (GMSPolyline *line in arrayPolylineGreen) {
line.map = nil;
}
}
});
}
SWIFT
声明
var polyline = GMSPolyline()
var animationPolyline = GMSPolyline()
var path = GMSPath()
var animationPath = GMSMutablePath()
var i: UInt = 0
var timer: Timer!
到达尔路线
func drawRoute(routeDict: Dictionary<String, Any>) {
let routesArray = routeDict ["routes"] as! NSArray
if (routesArray.count > 0)
{
let routeDict = routesArray[0] as! Dictionary<String, Any>
let routeOverviewPolyline = routeDict["overview_polyline"] as! Dictionary<String, Any>
let points = routeOverviewPolyline["points"]
self.path = GMSPath.init(fromEncodedPath: points as! String)!
self.polyline.path = path
self.polyline.strokeColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.5)
self.polyline.strokeWidth = 3.0
self.polyline.map = self.mapView
self.timer = Timer.scheduledTimer(timeInterval: 0.003, target: self, selector: #selector(animatePolylinePath), userInfo: nil, repeats: true)
}
}
动画路径
func animatePolylinePath() {
if (self.i < self.path.count()) {
self.animationPath.add(self.path.coordinate(at: self.i))
self.animationPolyline.path = self.animationPath
self.animationPolyline.strokeColor = UIColor.black
self.animationPolyline.strokeWidth = 3
self.animationPolyline.map = self.mapView
self.i += 1
}
else {
self.i = 0
self.animationPath = GMSMutablePath()
self.animationPolyline.map = nil
}
}
别忘了在 viewWillDisappear 中停止计时器
self.timer.invalidate()
Output
这是对 Elangovan 代码的改编
我所做的更改是从 class 中删除 var 使其仅在函数中，还删除了 iOS 中不再需要的 #selector >= 10.
var timerAnimation: Timer!
var mapView:GMSMapView?
func drawRoute(encodedString: String, animated: Bool) {
if let path = GMSMutablePath(fromEncodedPath: encodedString) {
let polyline = GMSPolyline(path: path)
polyline.strokeWidth = 3.0
polyline.strokeColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.5)
polyline.map = Singleton.shared.getMapView()
if(animated){
self.animatePolylinePath(path: path)
}
}
}
func animatePolylinePath(path: GMSMutablePath) {
var pos: UInt = 0
var animationPath = GMSMutablePath()
let animationPolyline = GMSPolyline()
self.timerAnimation = Timer.scheduledTimer(withTimeInterval: 0.003, repeats: true) { timer in
pos += 1
if(pos >= path.count()){
pos = 0
animationPath = GMSMutablePath()
animationPolyline.map = nil
}
animationPath.add(path.coordinate(at: pos))
animationPolyline.path = animationPath
animationPolyline.strokeColor = UIColor.yellow
animationPolyline.strokeWidth = 3
animationPolyline.map = self.mapView
}
}
func stopAnimatePolylinePath() {
self.timerAnimation.invalidate()
}
您可以为 shapeLayer 创建一个变量并使用 GMSMapViewDelegate 方法 mapView(_ mapView: GMSMapView, willMove gesture: Bool) 和 mapView(_ mapView: GMSMapView, idleAt position: GMSCameraPosition) 在地图上添加和删除图层。这种方法有两个缺点，第一个是当地图被拖动（移动）时图层不会动画，第二个缺点是图层总是位于所有其他地图元素之上，如标记、道路名称、POI 等. 我找不到将此图层作为子图层直接添加到地面叠加层的方法。您可以在下面找到完整的代码：
var polyLineShapeLayer:CAShapeLayer?
var layerAdded = false
var path = GMSPath()
var polyLine:GMSPolyline!
// Add regular polyline to the map
func addPolyLineWithEncodedStringInMap(_ encodedString:String) {
self.polyLine = GMSPolyline(path: self.path)
polyLine.strokeWidth = 3.8
self.polyLine.strokeColor = .black
polyLine.map = googleMapView
DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + 2) {
self.addPolyLineShapeLayerToMapView()
self.layerAdded = true
}
}
// Add CAshapeLayer to map
func layer(from path: GMSPath) -> CAShapeLayer {
let breizerPath = UIBezierPath()
let firstCoordinate: CLLocationCoordinate2D = path.coordinate(at: 0)
breizerPath.move(to: self.googleMapView.projection.point(for: firstCoordinate))
for i in 1 ..< Int((path.count())){
print(path.coordinate(at: UInt(i)))
let coordinate: CLLocationCoordinate2D = path.coordinate(at: UInt(i))
breizerPath.addLine(to: self.googleMapView.projection.point(for: coordinate))
}
let shapeLayer = CAShapeLayer()
shapeLayer.path = breizerPath.cgPath
shapeLayer.strokeColor = UIColor.lightGray.withAlphaComponent(0.8).cgColor
shapeLayer.lineWidth = 4.0
shapeLayer.fillColor = UIColor.clear.cgColor
shapeLayer.lineJoin = kCALineJoinRound
shapeLayer.lineCap = kCALineCapRound
shapeLayer.cornerRadius = 5
return shapeLayer
}
func animatePath(_ layer: CAShapeLayer) {
let pathAnimation = CABasicAnimation(keyPath: "strokeEnd")
pathAnimation.duration = 2
pathAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
pathAnimation.fromValue = Int(0.0)
pathAnimation.toValue = Int(1.0)
pathAnimation.repeatCount = 200
layer.add(pathAnimation, forKey: "strokeEnd")
}
func addPolyLineShapeLayerToMapView(){
polyLineShapeLayer = self.layer(from: self.path)
if let polyLineShapeLayer = polyLineShapeLayer{
self.animatePath(polyLineShapeLayer)
self.googleMapView.layer.addSublayer(polyLineShapeLayer)
polyLineShapeLayer.zPosition = 0
}
}
// Delegate methods to control the polyline
// whenever map is about to move, if layer is already added, remove the layer from superLayer
func mapView(_ mapView: GMSMapView, willMove gesture: Bool) {
if layerAdded{
DispatchQueue.main.async {
self.polyLineShapeLayer?.removeFromSuperlayer()
self.polyLineShapeLayer = nil
}
}
}
// when map is idle again(var layerAdded:bool ensures that additional layer is not added initially when the delegate method is fired) add new instance of polylineShapeLayer to the map with current projected coordinates.
func mapView(_ mapView: GMSMapView, idleAt position: GMSCameraPosition) {
if self.layerAdded{
self.addPolyLineShapeLayerToMapView()
}
}