2. 程式人生 > >iOS 百度地圖路線繪製與小車平滑移動

iOS 百度地圖路線繪製與小車平滑移動

阿新 • • 發佈：2019-01-28

專案中用到了百度地圖，記錄一下，為以後開發提供幫助

紋理繪製和分段顏色繪製

我們在利用百度地圖計算出路線的點後可以在地圖上繪製出自己想要的紋理路線或者分段顏色顯示，通過自定義或者利用百度給出的類直接繪製。

我們在計算出路線之後就需要進行路線的繪製了，我們在路線的回撥方法中進行設定

#pragma mark - 計算車輛路線結果回撥
- (void)onGetDrivingRouteResult:(BMKRouteSearch *)searcher result:(BMKDrivingRouteResult *)result errorCode:(BMKSearchErrorCode
 
)error

當獲取到路線的點時，根據百度地圖demo，我們可以在此方法中進行路線的自定義設定，可以是紋理圖片，可以是分段顏色繪製，也可以是單一顏色，都可以。

     // 通過points構建BMKPolyline
     //構建分段顏色索引陣列
     NSArray *colorIndexs = [NSArray arrayWithObjects:
     [NSNumber numberWithInt:0],nil];
     //構建BMKPolyline,使用分段顏色索引，其對應的BMKPolylineView必須設定colors屬性
     myPolyline = [BMKPolyline polylineWithPoints:temppoints count: planPointCounts textureIndex:colorIndexs];       
      [_mapView addOverlay:myPolyline];

路線分段顏色繪製

#pragma mark - 路線分段顏色繪製
//根據overlay生成對應的View
- (BMKOverlayView *)mapView:(BMKMapView *)mapView viewForOverlay:(id <BMKOverlay>)overlay
{    
    if ([overlay isKindOfClass:[BMKPolyline class]])
    {
        BMKPolylineView* polylineView = [[BMKPolylineView alloc] initWithOverlay:overlay];
        if
 
 (overlay == colorfulPolyline) {
            polylineView.lineWidth = 5;
            /// 使用分段顏色繪製時，必須設定（內容必須為UIColor）
            polylineView.colors = [NSArray arrayWithObjects:
                                   [[UIColor alloc] initWithRed:0 green:1 blue:0 alpha:1],
                                   [[UIColor alloc] initWithRed:1 green:0 blue:0 alpha:1],
                                   [[UIColor alloc] initWithRed:1 green:1 blue:0 alpha:0.5], nil];
        } else {
            polylineView.strokeColor = [[UIColor blueColor] colorWithAlphaComponent:1];
            polylineView.lineWidth = 20.0;
            [polylineView loadStrokeTextureImage:[UIImage imageNamed:@"arrowTexture"]];
        }
        return polylineView;
    }
    return nil;
}

路線紋理繪製

#pragma mark - 路線紋理繪製

//根據overlay生成對應的View
-(BMKOverlayView *)mapView:(BMKMapView *)mapView viewForOverlay:(id<BMKOverlay>)overlay{

    if ([overlay isKindOfClass:[BMKPolyline class]])
    {
        BMKPolylineView* polylineView = [[BMKPolylineView alloc] initWithOverlay:overlay];

        polylineView.lineWidth = 8;
        polylineView.isFocus = YES;
        polylineView.tileTexture = YES;

        // 載入分段紋理繪製 
        UIImage *image = [UIImage imageNamed:@"lv"];
        [polylineView loadStrokeTextureImages:@[image]];

        return polylineView;
    }

    return nil;
}

【紋理圖片】

  • （百度demo中獲取）—-> 圖片寬高必須為2的冪次方才可以正確的在專案中使用。

  • 這裡寫圖片描述

  • 這裡寫圖片描述

//////////////////////////////////////////////////////////////////////////////////

華麗的分割線

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

下面介紹一下小車的平滑移動，實現類似滴滴打車，小車移動的效果。

這裡寫圖片描述

步驟1
我們需要先自定義Annotation類，為小車的平滑移動儲存方向和Id資料，自定義大頭針，方便設定小車方向的旋轉 ，兩個自定義的類都是為了之後的平滑移動提供幫助。

// 自定義DBMKPointAnnotation用來儲存id和angle
@interface DBMKPointAnnotation : BMKPointAnnotation
/** ID  */
@property(strong,nonatomic)NSString *ID;
/** angle  */
@property(strong,nonatomic)NSString *Angle;
@end

// 自定義BMKAnnotationView，用於顯示小車
@interface SportAnnotationView1 : BMKAnnotationView

@property (nonatomic, strong) UIImageView *imageView;

@end

@implementation SportAnnotationView1

@synthesize imageView = _imageView;

- (id)initWithAnnotation:(id<BMKAnnotation>)annotation reuseIdentifier:(NSString *)reuseIdentifier {
    self = [super initWithAnnotation:annotation reuseIdentifier:reuseIdentifier];
    if (self) {
        //設定小車顯示大小
        [self setBounds:CGRectMake(0.f, 0.f, 40.f, 40.f)];
        _imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0.f, 0.f, 40.f, 40.f)];
        _imageView.image = [UIImage imageNamed:@"小車圖片"];
        _imageView.contentMode = UIViewContentModeScaleAspectFit;
        _imageView.userInteractionEnabled = YES;
        [self addSubview:_imageView];
    }
    return self;
}

@end

步驟2
實時的獲取車輛的經緯度，方向，資料，進行展示.
百度給我們的方法非常簡單，就是利用UIView動畫，對大頭針進行一個經緯度及反向轉向的設定。下面是程式碼 —>

   [UIView animateWithDuration:0.5 animations:^{
        //轉向                                                                         sportAnnotationView.imageView.transform=CGAffineTransformMakeRotation(angle);
} completion:^(BOOL finished) {
    //平移
    [UIView animateWithDuration:5.5 animations:^{
        annotation.coordinate = CLLocationCoordinate2DMake([dic[@"Lat"] floatValue], [dic[@"Lng"] floatValue]);
    }];
}];

至此小車的平滑移動，我們就可以簡單的處理好了。但是，這樣處理的話，會有一個bug，就是對地圖進行縮放時，小車對跑出地圖外，這個問題是怎麼引起的呢？我們應該怎麼解決呢？

引起這個問題的原因是運用的UIView動畫，實際修改了屬性的真實值，進行動畫，UIView動畫是一個過程動畫，在縮放時會改變動畫過程，導致平滑移動出路線外bug。這個問題就涉及到了UIView動畫與核心動畫的區別問題，在這個問題的處理上，我們用KeyAnimation動畫進行處理（解決方案是根據百度官方人員回覆處理的）。

這裡建立一個顯示當前位置的圖層

#import <BaiduMapAPI_Map/BMKMapComponent.h>
#import <BaiduMapAPI_Utils/BMKUtilsComponent.h>

@interface CACoordLayer : CALayer

@property (nonatomic, assign) BMKMapView * mapView;

//定義一個BMKAnnotation物件
@property (nonatomic, strong) BMKPointAnnotation *annotation;

@property (nonatomic) double mapx;

@property (nonatomic) double mapy;

@property (nonatomic) CGPoint centerOffset;

@end

//
//  CACoordLayer.m
//

#import "CACoordLayer.h"

@implementation CACoordLayer

@dynamic mapx;
@dynamic mapy;

- (id)initWithLayer:(id)layer
{
    if ((self = [super initWithLayer:layer]))
    {
        if ([layer isKindOfClass:[CACoordLayer class]])
        {
            CACoordLayer * input = layer;
            self.mapx = input.mapx;
            self.mapy = input.mapy;
            [self setNeedsDisplay];
        }
    }
    return self;
}

+ (BOOL)needsDisplayForKey:(NSString *)key
{

    if ([@"mapx" isEqualToString:key])
    {
        return YES;
    }
    if ([@"mapy" isEqualToString:key])
    {
        return YES;
    }

    return [super needsDisplayForKey:key];
}

- (void)display
{

    CACoordLayer * layer = [self presentationLayer];
    BMKMapPoint mappoint = BMKMapPointMake(layer.mapx, layer.mapy);
    //根據得到的座標值，將其設定為annotation的經緯度
    self.annotation.coordinate = BMKCoordinateForMapPoint(mappoint);
    //設定layer的位置，顯示動畫
    CGPoint center = [self.mapView convertCoordinate:BMKCoordinateForMapPoint(mappoint) toPointToView:self.mapView];
    self.position = center;
}

@end

CACoordLayer類的關鍵程式碼needsDisplayForKey方法和圖層重繪方法display，就是當mapx，mapy改變時會呼叫圖層的重繪功能，為動畫做鋪墊。為大頭針提供動畫的能力。

根據建立好的顯示當前位置的圖層進行移動，下面主要說下關鍵程式碼，在自定義的大頭針中設定使用的圖層為我們剛才建立的圖層CACoordLayer，當我們獲取到車輛經緯度，方向等資訊傳給大頭針時，我們需要的操作為

- (void)addTrackingAnimationForPoints:(NSArray *)points duration:(CFTimeInterval)duration
{
    if (![points count])
    {
        return;
    }

    CACoordLayer * mylayer = ((CACoordLayer *)self.layer);

    //preparing
    NSUInteger num = 2*[points count] + 1;
    NSMutableArray * xvalues = [NSMutableArray arrayWithCapacity:num];
    NSMutableArray *yvalues = [NSMutableArray arrayWithCapacity:num];

    NSMutableArray * times = [NSMutableArray arrayWithCapacity:num];

    double sumOfDistance = 0.f;
    //dis儲存的為地址
    double * dis = malloc(([points count]) * sizeof(double));
//    NSLog(@"%p",dis);


    //the first point is set by the destination of last animation.
    BMKMapPoint preLoc;
    if (!([self.animationList count] > 0 || isAnimatingX || isAnimatingY))
    {
        lastDestination = BMKMapPointMake(mylayer.mapx, mylayer.mapy);
    }
    preLoc = lastDestination;

    [xvalues addObject:@(preLoc.x)];
    [yvalues addObject:@(preLoc.y)];
    [times addObject:@(0.f)];

    //set the animation points.
    for (int i = 0; i<[points count]; i++)
    {
        TracingPoint * tp = points[i];

        //position
        BMKMapPoint p = BMKMapPointForCoordinate(tp.coordinate);
        [xvalues addObjectsFromArray:@[@(p.x), @(p.x)]];//stop for turn
        [yvalues addObjectsFromArray:@[@(p.y), @(p.y)]];

        //distance
        dis[i] = BMKMetersBetweenMapPoints(p, preLoc);
        sumOfDistance = sumOfDistance + dis[i];
        dis[i] = sumOfDistance;

        //record pre
        preLoc = p;
    }

    //set the animation times.
    double preTime = 0.f;
    double turnDuration = TurnAnimationDuration/duration;
    for (int i = 0; i<[points count]; i++)
    {
        double turnEnd = dis[i]/sumOfDistance;
        double turnStart = (preTime > turnEnd - turnDuration) ? (turnEnd + preTime) * 0.5 : turnEnd - turnDuration;

        [times addObjectsFromArray:@[@(turnStart), @(turnEnd)]];

        preTime = turnEnd;
    }

    //record the destination.
    TracingPoint * last = [points lastObject];
    lastDestination = BMKMapPointForCoordinate(last.coordinate);

    free(dis);

    // add animation.
    CAKeyframeAnimation *xanimation = [CAKeyframeAnimation animationWithKeyPath:MapXAnimationKey];
    xanimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionDefault];
    xanimation.values   = xvalues;
    xanimation.keyTimes = times;
    xanimation.duration = duration;
    xanimation.delegate = self;
    xanimation.fillMode = kCAFillModeForwards;

    CAKeyframeAnimation *yanimation = [CAKeyframeAnimation animationWithKeyPath:MapYAnimationKey];
    yanimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionDefault];
    yanimation.values   = yvalues;
    yanimation.keyTimes = times;
    yanimation.duration = duration;
    yanimation.delegate = self;
    yanimation.fillMode = kCAFillModeForwards;

    [self pushBackAnimation:xanimation];
    [self pushBackAnimation:yanimation];

    mylayer.mapView = [self mapView];
}
#pragma mark - Animation Delegate

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
    if ([anim isKindOfClass:[CAKeyframeAnimation class]])
    {
        CAKeyframeAnimation * keyAnim = ((CAKeyframeAnimation *)anim);
        if ([keyAnim.keyPath isEqualToString:MapXAnimationKey])
        {
            isAnimatingX = NO;

            CACoordLayer * mylayer = ((CACoordLayer *)self.layer);
            mylayer.mapx = ((NSNumber *)[keyAnim.values lastObject]).doubleValue;
            currDestination.x = mylayer.mapx;

            [self updateAnnotationCoordinate];
            [self popFrontAnimationForKey:MapXAnimationKey];
        }
        else if ([keyAnim.keyPath isEqualToString:MapYAnimationKey])
        {
            isAnimatingY = NO;

            CACoordLayer * mylayer = ((CACoordLayer *)self.layer);
            mylayer.mapy = ((NSNumber *)[keyAnim.values lastObject]).doubleValue;
            currDestination.y = mylayer.mapy;

            [self updateAnnotationCoordinate];
            [self popFrontAnimationForKey:MapYAnimationKey];
        }
        animateCompleteTimes++;
        if (animateCompleteTimes % 2 == 0) {
            if (_animateDelegate && [_animateDelegate respondsToSelector:@selector(movingAnnotationViewAnimationFinished)]) {
                [_animateDelegate movingAnnotationViewAnimationFinished];
            }
        }
    }
}

這個方法所做的就是將經緯度座標轉換為投影后的直角地理座標，然後進行CAKeyframeAnimation動畫，移動的屬性是自定義CACoordLayer中的mapx，mapy，而不是UIView動畫中的經緯度，我們都知道核心動畫都是假象，並不是真正的移動，所以在移動完之後，重新為mapx賦值，更新大頭針位置，避免出現小車移動的起始位置錯亂的問題，簡易的流程應該是這樣的

Created with Raphaël 2.1.0KeyFrame動畫對mapx屬性動畫needsDisplayForKey中設定了當前指定的屬性key改變是否需要重新繪製，所以產生了動畫當動畫結束後賦值改變mapx，mapy,的值，保證下次動畫起始位置的正確性yes

//////////////////////////////////////////////////////////////////////////////////

華麗的分割線

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

內邊距的設定

我們的專案還要實現，當路線繪製出來後，需要顯示這個路線，並且需要有內邊距，當我呼叫這個介面時

   [_mapView setVisibleMapRect:polyLine.boundingMapRect edgePadding:UIEdgeInsetsMake(20, 20, 280, 20) animated:YES];

地圖縮放的顯示範圍並不是我設定的內邊距，有誤差，類似於這種
這裡寫圖片描述

通過與百度地圖技術人員的詢問，得知在調取polyLine.boundingMapRect 不能夠獲取到數值，技術人員給出了另一個方法獲取到polyline的MapRect,然後設定了內邊距

//根據polyline設定地圖範圍
- (void)mapViewFitPolyLine:(BMKPolyline *) polyLine {
    CGFloat ltX, ltY, rbX, rbY;
    if (polyLine.pointCount < 1) {
        return;
    }
    BMKMapPoint pt = polyLine.points[0];
    ltX = pt.x, ltY = pt.y;
    rbX = pt.x, rbY = pt.y;
    for (int i = 1; i < polyLine.pointCount; i++) {
        BMKMapPoint pt = polyLine.points[i];
        if (pt.x < ltX) {
            ltX = pt.x;
        }
        if (pt.x > rbX) {
            rbX = pt.x;
        }
        if (pt.y < ltY) {
            ltY = pt.y;
        }
        if (pt.y > rbY) {
            rbY = pt.y;
        }
    }
    BMKMapRect rect;
    rect.origin = BMKMapPointMake(ltX , ltY);
    rect.size = BMKMapSizeMake(rbX - ltX, rbY - ltY);
    [_mapView setVisibleMapRect:rect edgePadding:UIEdgeInsetsMake(0, 0, 100, 0) animated:YES];
    _mapView.zoomLevel = _mapView.zoomLevel - 0.3;
}

而且根據百度技術人員的說法，這個方法也會有誤差，是因為SDK設定了邊距的級別，目前暫不能根據邊距的大小進行精確設定

不過要按照專案要求實現，如果有更好的方法，可以告訴我，謝謝。

如有錯誤的地方❌，請指正✅。。。

第一次寫部落格,玻璃心求輕噴,希望自己能堅持下去,當做一種知識總結也能分享給一些新手朋友們.

相關推薦

iOS 百度地圖路線繪製與小車平滑移動

專案中用到了百度地圖，記錄一下，為以後開發提供幫助 紋理繪製和分段顏色繪製 我們在利用百度地圖計算出路線的點後可以在地圖上繪製出自己想要的紋理路線或者分段顏色顯示，通過自定義或者利用百度給出的類直接繪製。 我們在計算出路線之後就需要進行路線的繪製了

qt與js互動，並在百度地圖上繪製軌跡

前言： 獲得了照片的GPS資訊後，我們現在要做的就是把GPS資訊傳入JS中，然後通過百度地圖API將軌跡繪製出來。 一：在程式頁面載入地圖 qt5.6及之後取消了QWebkits,轉為使用QWebEngine. 在qt5.6的額ui設計師介面中，並不能直

iOS百度地圖簡單應用（ iOS地圖定位(定位、地理編碼與反地理編碼、mapView、大頭針）

匯入百度SDK 注：自iOS8起，系統定位功能進行了升級，SDK為了實現最新的適配，自v2.5.0起也做了相應的修改，開發者在使用定位功能之前，需要在info.plist裡新增（以下二選一，兩個都新增預設使用NSLocationWhenInUseUsageDescrip

ios 百度地圖根據路徑規劃自動縮放，顯示完整路線

//根據polyline設定地圖範圍 - (void)mapViewFitPolyLine:(BMKPolyline *) polyLine { CGFloat ltX, ltY, rbX, rbY; if (polyLine.pointCount &

js呼叫百度地圖介面繪製任意多邊形並獲取每個點的經緯度等

來自：https://blog.csdn.net/u013239236/article/details/52213977 侵刪 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type"

百度地圖API繪製計程車流向地圖（一）：將起始GPS點對映到地圖上

打算在年前實現用百度地圖API繪製NYC計程車流向地圖。目前實現了將出租車的起始點的GPS點對映到地圖上，繪製了GPS點的熱力圖。記錄在此。 所用資料：NYC綠色計程車資料 時間：2016.01.01 0:00-24:00 共24小時 GPS點個數：64398 繪圖方式：熱力圖 百度地圖

php百度地圖座標繪製矩形 呼叫百度poi搜尋矩形區域內資料

首先貼出三個重要的方法 /** * @date:2017-07-12 9:23 * @auth:網路搜尋 * @parame ：百度地圖php版呼叫方法 */ function caculateAKSN($ak, $sk, $url, $querystring_arrays, $

百度地圖SDK配置與使用

在配置百度地圖 SDK 和使用時，發現官網上的教程並不是那麼好用，而且容易出現定位回撥裡 BDLocation.getLocType() == 162 這個問題，官網只是說 SO 配置出現異常，並沒有明確問題所在；如果你也遇到了，請點這個連結：BDLocation.getLocType() == 1

iOS 百度地圖點聚合在房地產專案中的應用

1.公司的專案是面向房地產的，包含新房（全國多個分公司），存租房（與建行建方的合作）專案，所以地圖與看房相結合比較多，之前為了進度，地圖這一塊的業務都是H5實現，現在穩定下來後，H5的體驗度不是很高，所以地圖這一塊全部換成原生。這篇文章也是做個探索和總結，以便

用Swift語言使用IOS百度地圖（折線的使用方法很特別）

摘要 本文旨在講解如何使用Swift語言單獨整合百度地圖的SDK 前言 百度地圖iOS SDK是一套基於armv7、armv7s、arm64（自v2.5.0版本）處理器裝置的應用程式介面，不僅提供構建地圖的基本介面，還提供POI搜尋、地理編碼、路線規劃、定位、

JavaFX 圈選 仿百度地圖路線

import javafx.application.Application; import javafx.collections.ObservableList; import javafx.event.EventHandler; import javafx.geometry.Point

百度地圖 滑鼠繪製工具BUG修復(地圖自動平移)

開發專案時用到了滑鼠繪製工具，繪製多邊形時，滑鼠離開地圖後，地圖會自動平移。用close方法也停止不了。 看下原始碼中這樣的程式碼： /** * 開啟滑鼠到地圖邊緣，自動平移地圖 */ Mask.prototype.enableEdgeMove = func

IOS 百度地圖定位,顯示地理位置

最近公司要做一個類似與美團的東西,讓我用百度地圖來進行定位,並顯示地理資訊. 預覽圖 那麼我們要如何做呢,直接上程式碼 先看看包結構,要把需要用到的庫都要引入進來. 包結構 注意:appdelegate.mm 字尾一定要加個m 不然的話編譯會不通過,好像是因為它的編譯原

iOS百度地圖 定位,獲取當前經緯度

百度地圖定位 #import "ViewController.h" #import <BaiduMapAPI_Location/BMKLocationService.h> @interface ViewController ()<BMKLoca

IOS百度地圖自定義大頭針和氣泡

文／煜寒了（簡書作者） 原文連結：http://www.jianshu.com/p/6a334f071c69 著作權歸作者所有，轉載請聯絡作者獲得授權，並標註“簡書作者”。1.首先實現新增多個標註和自定義氣泡 新增自定義標註 [_mapView addAnnotations:array]; arry 中放入標

iOS 百度地圖改變popview 及改變定點陣圖標

///定點陣圖標名稱，需要將該圖片放到 mapapi.bundle/images 目錄下 @property (nonatomic, strong) NSString* locationViewImgName; BMKLocationViewDisplayPara

ios 百度地圖軌跡回放一點心得

由於專案需要，需要通過百度地圖sdk實現軌跡回放。 使用一個非常簡單的辦法來實現軌跡回放。 話不多說，出來吧，程式碼君。 1，使用的是BMKPointAnnotation。 @interface TrackMapViewController (){ BMKPoint

百度地圖路線規劃

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@taglib prefix="c" uri="http://java.sun.

IOS百度地圖定位總結

#pragma mark 註冊百度地圖 - (void)reguestBaiduMap {     // 要使用百度地圖，請先啟動BaiduMapManager     mapManager = [[BMKMapManager alloc]init];     BOOL ret = [mapManager

百度地圖路線規劃路線的起始圖示的點選監聽

最近專案中用到百度地圖，其中一個功能是點選路徑規劃生成的路線的終點圖示彈出InfoWindow,顯示目的地資訊。 我是這樣解決的： 在DrivingRouteOverlay中， @Override public final List<OverlayOptions&g