天天看點
傳回

iOS_地圖大量标記

如何在iOS地圖上以使用者可以了解并樂于接受的方式來處理和顯示大量資料？這個教程将會給大家進行示例說明。   我們要開發一款iOS的app應用，這個應用包含有87000個旅館的資訊，每個旅館的資訊中包括有一個坐标值，一個旅館名跟一個電話号碼。這款app可以在使用者拖動、放大縮小地圖時更新旅館資料，而不需要使用者重新進行搜尋。   為了達到這個目的，我們需要構造一個可快速檢索的資料結構。C語言的性能高，是以我們用C語言來構造這個資料結構。為了確定大量的資料不會讓使用者感到迷惑，是以我們還需要想出一個合并資料的解決方案。最後，為了更好的适應市場，我們需要把app做的更完善一些。   完成這個教學後，你将學到這款app的所有核心内容。  

iOS_地圖大量标記

  資料結構 首先我們先來分析下資料，搞清我們要如何處理資料。旅館資料中包含了一系列的坐标點（包括緯度和經度），我們需要根據這些坐标點在地圖上進行标注。地圖可以任意的拖動并放大縮小，是以我們不需要把所有的點都全部繪制出來，我們隻需要繪制可以顯示在螢幕上的點。核心問題是：我們需要查詢出顯示在螢幕上的所有的點，是以我們要想出一個查找算法，查找存在于一個矩形範圍内的所有點。   一個簡單的解決方式就是周遊所有的點，然後判斷（xMin<=x<=xMax并且yMin<=y<=yMax），很不幸，這是一個複雜度為O（N）的算法，顯然不适合我們的情況。   這兒有個更好的解決方法，就是我們可以利用對稱性來減少我們的查詢範圍。那麼如何能通過查詢的每一次的疊代來減少查詢的範圍呢？我們可以在每個區域内都加索引，這樣可以有效減少查詢的範圍。這種區域索引的方式可以用四叉樹來實作，查詢複雜度為O（H）（H是查詢的那個點所在的樹的高度）   四叉樹 四叉樹是一個資料結構，由一系列的結點（node）構成。每個結點包含一個桶（bucket）跟一個包圍框（boundingbox）。每個桶裡面有一系列的點（point）。如果一個點包含在一個外包圍框A中，就會被添加到A所在結點的桶（bucket）中。一旦這個結點的桶滿了，這個結點就會分裂成四個子結點，每個子節點的包圍框分别是目前結點包圍框的1/4。分裂之後那些本來要放到目前結點桶中的點就都會放到子容器的桶中。   那麼我們該如何來對四叉樹進行編碼呢？   我們先來定義基本的結構：  

     
  1.  typedef struct TBQuadTreeNodeData {        
    2.       
  2.      double x;        
    3.       
  3.      double y;        
    4.       
  4.      void* data;        
    5.       
  5.  } TBQuadTreeNodeData;        
    6.       
  6.  TBQuadTreeNodeData TBQuadTreeNodeDataMake(double x, double y, void* data);        
    7.           
  7.  typedef struct TBBoundingBox {        
    8.       
  8.      double x0; double y0;        
    9.       
  9.      double xf; double yf;        
    10.       
  10.  } TBBoundingBox;        
    11.       
  11.  TBBoundingBox TBBoundingBoxMake(double x0, double y0, double xf, double yf);        
    12.           
  12.  typedef struct quadTreeNode {        
    13.       
  13.      struct quadTreeNode* northWest;        
    14.       
  14.      struct quadTreeNode* northEast;        
    15.       
  15.      struct quadTreeNode* southWest;        
    16.       
  16.      struct quadTreeNode* southEast;        
    17.       
  17.      TBBoundingBox boundingBox;        
    18.       
  18.      int bucketCapacity;        
    19.       
  19.      TBQuadTreeNodeData *points;        
    20.       
  20.      int count;        
    21.       
  21.  } TBQuadTreeNode;        
    22.       
  22.  TBQuadTreeNode* TBQuadTreeNodeMake(TBBoundingBox boundary, int bucketCapacity);        
    23.

  TBQuadTreeNodeData結構包含了坐标點（緯度，經度）。void*data是一個普通的指針，用來存儲我們需要的其他資訊，如旅館名跟電話号碼。TBBoundingBox代表一個用于範圍查詢的長方形，也就是之前談到(xMin<=x<=xMax&&yMin<=y<=yMax)查詢的那個長方形。左上角是(xMin,yMin)，右下角是(xMax,yMax)。   最後，我們看下TBQuadTreeNode結構，這個結構包含了四個指針，每個指針分别指向這個結點的四個子節點。它還有一個外包圍框和一個數組（數組中就是那個包含一系列坐标點的桶）。   在我們建立完四叉樹的同時，空間上的索引也就同時形成了。這是生成四叉樹的示範動畫。  

iOS_地圖大量标記

  下面的代碼準确描述了以上動畫的過程：  

     
  1.  void TBQuadTreeNodeSubdivide(TBQuadTreeNode* node)        
    2.       
  2.  {        
    3.       
  3.      TBBoundingBox box = node->boundingBox;        
    4.           
  4.      double xMid = (box.xf + box.x0) / 2.0;        
    5.       
  5.      double yMid = (box.yf + box.y0) / 2.0;        
    6.           
  6.      TBBoundingBox northWest = TBBoundingBoxMake(box.x0, box.y0, xMid, yMid);        
    7.       
  7.      node->northWest = TBQuadTreeNodeMake(northWest, node->bucketCapacity);        
    8.           
  8.      TBBoundingBox northEast = TBBoundingBoxMake(xMid, box.y0, box.xf, yMid);        
    9.       
  9.      node->northEast = TBQuadTreeNodeMake(northEast, node->bucketCapacity);        
    10.           
  10.      TBBoundingBox southWest = TBBoundingBoxMake(box.x0, yMid, xMid, box.yf);        
    11.       
  11.      node->southWest = TBQuadTreeNodeMake(southWest, node->bucketCapacity);        
    12.           
  12.      TBBoundingBox southEast = TBBoundingBoxMake(xMid, yMid, box.xf, box.yf);        
    13.       
  13.      node->southEast = TBQuadTreeNodeMake(southEast, node->bucketCapacity);        
    14.       
  14.  }        
    15.           
  15.  bool TBQuadTreeNodeInsertData(TBQuadTreeNode* node, TBQuadTreeNodeData data)        
    16.       
  16.  {        
    17.       
  17.      // Bail if our coordinate is not in the boundingBox        
    18.       
  18.      if (!TBBoundingBoxContainsData(node->boundingBox, data)) {        
    19.       
  19.          return false;        
    20.       
  20.      }        
    21.           
  21.      // Add the coordinate to the points array        
    22.       
  22.      if (node->count < node->bucketCapacity) {        
    23.       
  23.          node->points[node->count++] = data;        
    24.       
  24.          return true;        
    25.       
  25.      }        
    26.           
  26.      // Check to see if the current node is a leaf, if it is, split        
    27.       
  27.      if (node->northWest == NULL) {        
    28.       
  28.          TBQuadTreeNodeSubdivide(node);        
    29.       
  29.      }        
    30.           
  30.      // Traverse the tree        
    31.       
  31.      if (TBQuadTreeNodeInsertData(node->northWest, data)) return true;        
    32.       
  32.      if (TBQuadTreeNodeInsertData(node->northEast, data)) return true;        
    33.       
  33.      if (TBQuadTreeNodeInsertData(node->southWest, data)) return true;        
    34.       
  34.      if (TBQuadTreeNodeInsertData(node->southEast, data)) return true;        
    35.           
  35.      return false;        
    36.       
  36.  }        
    37.

  現在我們已經完成了四叉樹的構造，我們還需要在四叉樹上進行區域範圍查詢并傳回TBQuadTreeNodeData結構。以下是區域範圍查詢的示範動畫，在淺藍區域内的是所有的标注點。當标注點被查詢到在指定的區域範圍内，則會被标注為綠色。  

iOS_地圖大量标記

  以下是查詢代碼：  

     
  1.  typedef void(^TBDataReturnBlock)(TBQuadTreeNodeData data);        
    2.           
  2.  void TBQuadTreeGatherDataInRange(TBQuadTreeNode* node, TBBoundingBox range, TBDataReturnBlock block)        
    3.       
  3.  {        
    4.       
  4.      // If range is not contained in the node's boundingBox then bail        
    5.       
  5.      if (!TBBoundingBoxIntersectsBoundingBox(node->boundingBox, range)) {        
    6.       
  6.          return;        
    7.       
  7.      }        
    8.           
  8.      for (int i = 0; i < node->count; i++) {        
    9.       
  9.          // Gather points contained in range        
    10.       
  10.          if (TBBoundingBoxContainsData(range, node->points[i])) {        
    11.       
  11.              block(node->points[i]);        
    12.       
  12.          }        
    13.       
  13.      }        
    14.           
  14.      // Bail if node is leaf        
    15.       
  15.      if (node->northWest == NULL) {        
    16.       
  16.          return;        
    17.       
  17.      }        
    18.           
  18.      // Otherwise traverse down the tree        
    19.       
  19.      TBQuadTreeGatherDataInRange(node->northWest, range, block);        
    20.       
  20.      TBQuadTreeGatherDataInRange(node->northEast, range, block);        
    21.       
  21.      TBQuadTreeGatherDataInRange(node->southWest, range, block);        
    22.       
  22.      TBQuadTreeGatherDataInRange(node->southEast, range, block);        
    23.       
  23.  }        
    24.

  用四叉樹這種結構可以進行快速的查詢。在一個包含成百上千條資料的資料庫中，可以以60fps的速度查詢上百條資料。     用旅館資料來填充四叉樹 旅館的資料來自于POIplaza這個網站，而且已經格式化成csv檔案。我們要從硬碟中讀取出資料并對資料進行轉換，最後用資料來填充四叉樹。   建立四叉樹的代碼在TBCoordinateQuadTree類中：  

     
  1.  typedef struct TBHotelInfo {        
    2.       
  2.      char* hotelName;        
    3.       
  3.      char* hotelPhoneNumber;        
    4.       
  4.  } TBHotelInfo;        
    5.           
  5.  TBQuadTreeNodeData TBDataFromLine(NSString *line)        
    6.       
  6.  {        
    7.       
  7.      // Example line:        
    8.       
  8.      // -80.26262, 25.81015, Everglades Motel, USA-United States, +1 305-888-8797        
    9.           
  9.      NSArray *components = [line componentsSeparatedByString:@","];        
    10.       
  10.      double latitude = [components[1] doubleValue];        
    11.       
  11.      double longitude = [components[0] doubleValue];        
    12.           
  12.      TBHotelInfo* hotelInfo = malloc(sizeof(TBHotelInfo));        
    13.           
  13.      NSString *hotelName = [components[2] stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceAndNewlineCharacterSet]];        
    14.       
  14.      hotelInfo->hotelName = malloc(sizeof(char) * hotelName.length + 1);        
    15.       
  15.      strncpy(hotelInfo->hotelName, [hotelName UTF8String], hotelName.length + 1);        
    16.           
  16.      NSString *hotelPhoneNumber = [[components lastObject] stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceAndNewlineCharacterSet]];        
    17.       
  17.      hotelInfo->hotelPhoneNumber = malloc(sizeof(char) * hotelPhoneNumber.length + 1);        
    18.       
  18.      strncpy(hotelInfo->hotelPhoneNumber, [hotelPhoneNumber UTF8String], hotelPhoneNumber.length + 1);        
    19.           
  19.      return TBQuadTreeNodeDataMake(latitude, longitude, hotelInfo);        
    20.       
  20.  }        
    21.           
  21.  - (void)buildTree        
    22.       
  22.  {        
    23.       
  23.      NSString *data = [NSString stringWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"USA-HotelMotel" ofType:@"csv"] encoding:NSASCIIStringEncoding error:nil];        
    24.       
  24.      NSArray *lines = [data componentsSeparatedByString:@"\n"];        
    25.           
  25.      NSInteger count = lines.count - 1;        
    26.           
  26.      TBQuadTreeNodeData *dataArray = malloc(sizeof(TBQuadTreeNodeData) * count);        
    27.       
  27.      for (NSInteger i = 0; i < count; i++) {        
    28.       
  28.          dataArray[i] = TBDataFromLine(lines[i]);        
    29.       
  29.      }        
    30.           
  30.      TBBoundingBox world = TBBoundingBoxMake(19, -166, 72, -53);        
    31.       
  31.      _root = TBQuadTreeBuildWithData(dataArray, count, world, 4);        
    32.       
  32.  }        
    33.

  現在我們用iPhone上預加載的資料建立了一個四叉樹。接下來我們将處理app的下一個部分：合并資料（clustering）。   合并資料（clustering） 現在我們有了一個裝滿旅館資料的四叉樹，可以用來解決合并資料的問題了。首先，讓我們來探索下合并資料的原因。我們合并資料是因為我們不想因為資料過于龐大而使使用者迷惑。實際上有很多種方式可以解決這個問題。GoogleMaps根據地圖的縮放等級（zoomlevel）來顯示搜尋結果資料中的一部分資料。地圖放的越大，就越能清晰的看到更細節的标注，直到你能看到所有有效的标注。我們将采用這種合并資料的方式，隻顯示出來旅館的個數，而不在地圖上顯示出所有的旅館資訊。   最終呈現的标注是一個中心顯示旅館個數的小圓圈。實作的原理跟如何把圖檔縮小的原理差不多。我們先在地圖上畫一個格子。每個格子中包含了很多個小單元格，每個小單元格中的所有旅館資料合并出一個标注。然後通過每個小單元格中所有旅館的坐标值的平均值來決定合并後這個标注的坐标值。   這是以上處理的示範動畫。  

iOS_地圖大量标記

  以下是代碼實作過程。在TBCoordinateQuadTree類中添加了一個方法。  

     
  1.  - (NSArray *)clusteredAnnotationsWithinMapRect:(MKMapRect)rect withZoomScale:(double)zoomScale        
    2.       
  2.  {        
    3.       
  3.      double TBCellSize = TBCellSizeForZoomScale(zoomScale);        
    4.       
  4.      double scaleFactor = zoomScale / TBCellSize;        
    5.           
  5.      NSInteger minX = floor(MKMapRectGetMinX(rect) * scaleFactor);        
    6.       
  6.      NSInteger maxX = floor(MKMapRectGetMaxX(rect) * scaleFactor);        
    7.       
  7.      NSInteger minY = floor(MKMapRectGetMinY(rect) * scaleFactor);        
    8.       
  8.      NSInteger maxY = floor(MKMapRectGetMaxY(rect) * scaleFactor);        
    9.           
  9.      NSMutableArray *clusteredAnnotations = [[NSMutableArray alloc] init];        
    10.           
  10.      for (NSInteger x = minX; x <= maxX; x++) {        
    11.       
  11.          for (NSInteger y = minY; y <= maxY; y++) {        
    12.           
  12.              MKMapRect mapRect = MKMapRectMake(x / scaleFactor, y / scaleFactor, 1.0 / scaleFactor, 1.0 / scaleFactor);        
    13.           
  13.              __block double totalX = 0;        
    14.       
  14.              __block double totalY = 0;        
    15.       
  15.              __block int count = 0;        
    16.           
  16.              TBQuadTreeGatherDataInRange(self.root, TBBoundingBoxForMapRect(mapRect), ^(TBQuadTreeNodeData data) {        
    17.       
  17.                  totalX += data.x;        
    18.       
  18.                  totalY += data.y;        
    19.       
  19.                  count++;        
    20.       
  20.              });        
    21.           
  21.              if (count >= 1) {        
    22.       
  22.                  CLLocationCoordinate2D coordinate = CLLocationCoordinate2DMake(totalX / count, totalY / count);        
    23.       
  23.                  TBClusterAnnotation *annotation = [[TBClusterAnnotation alloc] initWithCoordinate:coordinate count:count];        
    24.       
  24.                  [clusteredAnnotations addObject:annotation];        
    25.       
  25.              }        
    26.       
  26.          }        
    27.       
  27.      }        
    28.           
  28.      return [NSArray arrayWithArray:clusteredAnnotations];        
    29.       
  29.  }        
    30.

  上面的方法在指定小單元格大小的前提下合并資料生成了最終的标注。現在我們需要做的就是把這些标注繪制到MKMapView上。首先我們建立一個UIViewController的子類，然後用MKMapView作為它的view視圖。在可視區域改變的情況下，我們需要實時更新标注的顯示，是以我們要實作mapView:regionDidChangeAnimated:的協定方法。  

     
  1.  - (void)mapView:(MKMapView *)mapView regionDidChangeAnimated:(BOOL)animated        
    2.       
  2.  {        
    3.       
  3.      [[NSOperationQueue new] addOperationWithBlock:^{        
    4.       
  4.          double zoomScale = self.mapView.bounds.size.width / self.mapView.visibleMapRect.size.width;        
    5.       
  5.          NSArray *annotations = [self.coordinateQuadTree clusteredAnnotationsWithinMapRect:mapView.visibleMapRect withZoomScale:zoomScale];        
    6.           
  6.          [self updateMapViewAnnotationsWithAnnotations:annotations];        
    7.       
  7.      }];        
    8.       
  8.  }        
    9.

    隻添加必要的标注 在主線程中我們期望盡可能花費較少時間來做運算，這意味着我們要盡可能的把所有内容都放到背景的線程中。為了在主線程中花費更少的時間來做計算，我們隻需要繪制一些必要的标注。這可以避免使用者滑動過程中感到很卡，進而保證流暢的使用者體驗。   開始之前，我們看一下下面的圖檔：  

iOS_地圖大量标記

  左邊的螢幕截圖是地圖進行滑動前的地圖快照。這個快照中的标注就是目前mapView中的标注，我們稱這個為“before集合”。   右邊的螢幕截圖是地圖進行滑動後的地圖快照。這個快照中的标注就是從clusteredAnnotationsWithinMapRect:withZoomScale:這個函數中得到的傳回值。我們稱這個為“after集合”。   我們期望保留兩個快照中都存在的标注點（即重合的那些标注點），去除在“after集合”中不存在的那些标注點，同時添加那些新的标注點。  

     
  1.  - (void)updateMapViewAnnotationsWithAnnotations:(NSArray *)annotations        
    2.       
  2.  {        
    3.       
  3.      NSMutableSet *before = [NSMutableSet setWithArray:self.mapView.annotations];        
    4.       
  4.      NSSet *after = [NSSet setWithArray:annotations];        
    5.           
  5.      // Annotations circled in blue shared by both sets        
    6.       
  6.      NSMutableSet *toKeep = [NSMutableSet setWithSet:before];        
    7.       
  7.      [toKeep intersectSet:after];        
    8.           
  8.      // Annotations circled in green        
    9.       
  9.      NSMutableSet *toAdd = [NSMutableSet setWithSet:after];        
    10.       
  10.      [toAdd minusSet:toKeep];        
    11.           
  11.      // Annotations circled in red        
    12.       
  12.      NSMutableSet *toRemove = [NSMutableSet setWithSet:before];        
    13.       
  13.      [toRemove minusSet:after];        
    14.           
  14.      // These two methods must be called on the main thread        
    15.       
  15.      [[NSOperationQueue mainQueue] addOperationWithBlock:^{        
    16.       
  16.          [self.mapView addAnnotations:[toAdd allObjects]];        
    17.       
  17.          [self.mapView removeAnnotations:[toRemove allObjects]];        
    18.       
  18.      }];        
    19.       
  19.  }        
    20.

  這樣我們盡可能的確定在主線程上做少量的工作，進而提升地圖滑動的流暢性。   接下來我們來看下如何繪制标注，并且在标注上顯示出來旅館的個數。最後我們給标注加上點選事件，這樣使得app從頭到腳都可以表現的非常完美。   繪制标注 由于我們在地圖上并沒有完全顯示出全部旅館，是以我們需要在剩餘的這些标注上表現出真實的旅館總量。   首先建立一個圓形的标注，中間顯示合并後的個數，也就是旅館的真實總量。這個圓形的大小同樣可以反映出合并後的個數。   為了實作這個需求，我們要找出一個方程式，允許我們在1到500+的數值中生成一個縮小後的數值。用這個數值來作為标注的大小。我們将用到以下的方程式。  

iOS_地圖大量标記

  x值較低的時候f(x)增長的比較快，x在值變大的時候f(x)增長變緩慢，β值用來控制f(x)趨于1的速度。α值影響最小值（在我們的項目中，我們的最小合并值（也就是1）能占總共最大值的60%）。  

     
  1.  static CGFloat const TBScaleFactorAlpha = 0.3;        
    2.       
  2.  static CGFloat const TBScaleFactorBeta = 0.4;        
    3.           
  3.  CGFloat TBScaledValueForValue(CGFloat value)        
    4.       
  4.  {        
    5.       
  5.      return 1.0 / (1.0 + expf(-1 * TBScaleFactorAlpha * powf(value, TBScaleFactorBeta)));        
    6.       
  6.  }        
    7.           
  7.  - (void)setCount:(NSUInteger)count        
    8.       
  8.  {        
    9.       
  9.      _count = count;        
    10.           
  10.      // Our max size is (44,44)        
    11.       
  11.      CGRect newBounds = CGRectMake(0, 0, roundf(44 * TBScaledValueForValue(count)), roundf(44 * TBScaledValueForValue(count)));        
    12.       
  12.      self.frame = TBCenterRect(newBounds, self.center);        
    13.           
  13.      CGRect newLabelBounds = CGRectMake(0, 0, newBounds.size.width / 1.3, newBounds.size.height / 1.3);        
    14.       
  14.      self.countLabel.frame = TBCenterRect(newLabelBounds, TBRectCenter(newBounds));        
    15.       
  15.      self.countLabel.text = [@(_count) stringValue];        
    16.           
  16.      [self setNeedsDisplay];        
    17.       
  17.  }        
    18.

  現在标注的大小已經OK了。讓我們再來把這個标注做漂亮些。  

     
  1.  - (void)setupLabel        
    2.       
  2.  {        
    3.       
  3.      _countLabel = [[UILabel alloc] initWithFrame:self.frame];        
    4.       
  4.      _countLabel.backgroundColor = [UIColor clearColor];        
    5.       
  5.      _countLabel.textColor = [UIColor whiteColor];        
    6.       
  6.      _countLabel.textAlignment = NSTextAlignmentCenter;        
    7.       
  7.      _countLabel.shadowColor = [UIColor colorWithWhite:0.0 alpha:0.75];        
    8.       
  8.      _countLabel.shadowOffset = CGSizeMake(0, -1);        
    9.       
  9.      _countLabel.adjustsFontSizeToFitWidth = YES;        
    10.       
  10.      _countLabel.numberOfLines = 1;        
    11.       
  11.      _countLabel.font = [UIFont boldSystemFontOfSize:12];        
    12.       
  12.      _countLabel.baselineAdjustment = UIBaselineAdjustmentAlignCenters;        
    13.       
  13.      [self addSubview:_countLabel];        
    14.       
  14.  }        
    15.           
  15.  - (void)drawRect:(CGRect)rect        
    16.       
  16.  {        
    17.       
  17.      CGContextRef context = UIGraphicsGetCurrentContext();        
    18.           
  18.      CGContextSetAllowsAntialiasing(context, true);        
    19.           
  19.      UIColor *outerCircleStrokeColor = [UIColor colorWithWhite:0 alpha:0.25];        
    20.       
  20.      UIColor *innerCircleStrokeColor = [UIColor whiteColor];        
    21.       
  21.      UIColor *innerCircleFillColor = [UIColor colorWithRed:(255.0 / 255.0) green:(95 / 255.0) blue:(42 / 255.0) alpha:1.0];        
    22.           
  22.      CGRect circleFrame = CGRectInset(rect, 4, 4);        
    23.           
  23.      [outerCircleStrokeColor setStroke];        
    24.       
  24.      CGContextSetLineWidth(context, 5.0);        
    25.       
  25.      CGContextStrokeEllipseInRect(context, circleFrame);        
    26.           
  26.      [innerCircleStrokeColor setStroke];        
    27.       
  27.      CGContextSetLineWidth(context, 4);        
    28.       
  28.      CGContextStrokeEllipseInRect(context, circleFrame);        
    29.           
  29.      [innerCircleFillColor setFill];        
    30.       
  30.      CGContextFillEllipseInRect(context, circleFrame);        
    31.       
  31.  }        
    32.

  添加最後的touch事件 目前的标注可以很好的呈現出我們的資料了，讓我們最後添加一些touch事件來讓我們的app用起來更有趣。   首先，我們需要為新添加到地圖上的标注做一個動畫。如果沒有添加動畫的話，新的标注就會在地圖上突然出現，體驗效果将會大打折扣。  

     
  1.  - (void)addBounceAnnimationToView:(UIView *)view        
    2.       
  2.  {        
    3.       
  3.      CAKeyframeAnimation *bounceAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale"];        
    4.           
  4.      bounceAnimation.values = @[@(0.05), @(1.1), @(0.9), @(1)];        
    5.           
  5.      bounceAnimation.duration = 0.6;        
    6.       
  6.      NSMutableArray *timingFunctions = [[NSMutableArray alloc] init];        
    7.       
  7.      for (NSInteger i = 0; i < 4; i++) {        
    8.       
  8.          [timingFunctions addObject:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];        
    9.       
  9.      }        
    10.       
  10.      [bounceAnimation setTimingFunctions:timingFunctions.copy];        
    11.       
  11.      bounceAnimation.removedOnCompletion = NO;        
    12.           
  12.      [view.layer addAnimation:bounceAnimation forKey:@"bounce"];        
    13.       
  13.  }        
    14.           
  14.  - (void)mapView:(MKMapView *)mapView didAddAnnotationViews:(NSArray *)views        
    15.       
  15.  {        
    16.       
  16.      for (UIView *view in views) {        
    17.       
  17.          [self addBounceAnnimationToView:view];        
    18.       
  18.      }        
    19.       
  19.  }        
    20.

  接下來，我們想要根據地圖的縮放比例來改變在合并時的小單元格（cell）的大小。在地圖進行放大時，小單元格變小。是以我們需要定義一下目前地圖的縮放比例。也就是scale=mapView.bounds.size.width/mapView.visibleMapRect.size.width:  

     
  1.  NSInteger TBZoomScaleToZoomLevel(MKZoomScale scale)        
    2.       
  2.  {        
    3.       
  3.      double totalTilesAtMaxZoom = MKMapSizeWorld.width / 256.0;        
    4.       
  4.      NSInteger zoomLevelAtMaxZoom = log2(totalTilesAtMaxZoom);        
    5.       
  5.      NSInteger zoomLevel = MAX(0, zoomLevelAtMaxZoom + floor(log2f(scale) + 0.5));        
    6.           
  6.      return zoomLevel;        
    7.       
  7.  }        
    8.

  我們為每個地圖縮放的比例都定義一個常量。  

     
  1.  float TBCellSizeForZoomScale(MKZoomScale zoomScale)        
    2.       
  2.  {        
    3.       
  3.      NSInteger zoomLevel = TBZoomScaleToZoomLevel(zoomScale);        
    4.           
  4.      switch (zoomLevel) {        
    5.       
  5.          case 13:        
    6.       
  6.          case 14:        
    7.       
  7.          case 15:        
    8.       
  8.              return 64;        
    9.       
  9.          case 16:        
    10.       
  10.          case 17:        
    11.       
  11.          case 18:        
    12.       
  12.              return 32;        
    13.       
  13.          case 19:        
    14.       
  14.              return 16;        
    15.           
  15.          default:        
    16.       
  16.              return 88;        
    17.       
  17.      }        
    18.       
  18.  }        
    19.

  現在我們放大地圖，我們将看到逐漸變小的标注，直到最後我們能看到代表每個旅館的那個标注。   源代碼：thecompleteworkingversionoftheapponGitHub. https://github.com/thoughtbot/TBAnnotationClustering

iOS進階 iOS 地圖
上一篇: iOS_時間相關
下一篇: 內建雲信遇到的那些問題

繼續閱讀