前言

• 繼續(xù)上一次的Demo，本次添加了同一路線的多條不同的公交線路展示，默認(rèn)顯示第0條。并且通過點(diǎn)擊公交路線來切換選中的路線。

使用場景：

1. 公交路線規(guī)劃

準(zhǔn)備：

1. 騰訊地圖iOS SDK

路線切換

1. 創(chuàng)建QPolyline的子類，用于區(qū)分步行部分和公交部分

   @interface RoutePlanWalkingPolyline : QPolyline
   
   @end
   

   @interface RoutePlanBusingPolyline : QPolyline
   
   // 判斷當(dāng)前路線是否已經(jīng)被選中
   @property (nonatomic, assign) BOOL isSelected;
   
   @end
   

2. 在創(chuàng)建路線Mode時(shí)，通過判斷路線的種類來創(chuàng)建不同的模型，并且默認(rèn)選中第0條路線：

   /*
    1. 默認(rèn)選擇第一個(gè)公交車線路
    2. 當(dāng)前公交車線路 alpha = 1，有箭頭
    3. 備用公交車線路 alpha = 0.5， 無箭頭
    4. 點(diǎn)擊備用公交車線路可以切換
    */
   // 駕車蚯蚓線
   // 遍歷所有駕車路線
   for (int i = 0; i < plan.lines.count; i++) {
       QMSBusingRouteTransitLine *line = plan.lines[i];
       CLLocationCoordinate2D coords[line.polyline.count];
       
       for (int i = 0; i < line.polyline.count; i++) {
           NSValue *value = line.polyline[i];
           CLLocationCoordinate2D coord = [value coordinateValue];
           coords[i] = coord;
       }
       
       RoutePlanBusingPolyline *busPolyline = [[RoutePlanBusingPolyline alloc] initWithCoordinates:coords count:line.polyline.count];
       busPolyline.isSelected = i==0 ? YES : NO;
       [self.mapView addOverlay:busPolyline];
       [self.selectRouteOverlayArray addObject:busPolyline];
   }
   

3. 在添加折線視圖時(shí)，額外添加判斷當(dāng)前的公交模型是否已經(jīng)被選中的步驟

   RoutePlanBusingPolyline *busingPolyline = (RoutePlanBusingPolyline *)overlay;
   // 路線箭頭
   if (busingPolyline.isSelected) {
       
       polylineView.strokeColor = [UIColor colorWithRed:1 green:0 blue:0 alpha:0.5];
       polylineView.drawSymbol = YES;
       polylineView.zIndex = 1;
   } else {
       polylineView.strokeColor = [UIColor colorWithRed:0 green:0 blue:1 alpha:0.5];
       polylineView.drawSymbol = NO;
       polylineView.zIndex = 0;
   }
   

4. 最后，監(jiān)聽Overlay的點(diǎn)擊方法，并判斷回調(diào)的Overlay是否為公交路線的數(shù)據(jù)模型，然后選中該模型，取消選中其他的模型：

   - (void)mapView:(QMapView *)mapView didTapOverlay:(id<QOverlay>)overlay {
       // 判斷是否是路線
       if ([overlay isKindOfClass:[RoutePlanBusingPolyline class]]) {
           
           for (QPolyline *polyline in self.selectRouteOverlayArray) {
               if ([polyline isKindOfClass:[RoutePlanBusingPolyline class]]) {
                   
                   RoutePlanBusingPolyline *busingPolyline = (RoutePlanBusingPolyline *)polyline;
                   
                   QTexturePolylineView *polylineView = (QTexturePolylineView *)[self.mapView viewForOverlay:busingPolyline];
   
                   if (busingPolyline == overlay) {
                       // 選中：實(shí)心顏色
                       busingPolyline.isSelected = YES;
                       polylineView.strokeColor = [UIColor colorWithRed:1 green:0 blue:0 alpha:0.5];
                       polylineView.zIndex = 1;
                       polylineView.drawSymbol = YES;
                   } else {
                       // 未選中：虛色
                       busingPolyline.isSelected = NO;
                       polylineView.strokeColor = [UIColor colorWithRed:0 green:0 blue:1 alpha:0.5];
                       polylineView.zIndex = 0;
                       polylineView.drawSymbol = NO;
                   }
               }
           }
       }
   }
   

示例圖

image.png

image.png

存在缺陷

1. 在第4步中切換蚯蚓線的drawSymbol時(shí)出現(xiàn)了相反的情況，不知是否為bug，有待研究。
2. 觀察騰訊地圖app，公交路線應(yīng)該是先選擇線路，然后再繪制到地圖上，因?yàn)闀?huì)有不同的公交走相同的路線的情況，下次Demo會(huì)補(bǔ)全該功能。

Demo下載

鏈接: https://pan.baidu.com/s/1mRNSQhFrgdlJejng7-6Qkg 密碼: u1bn