[ios3-地圖] 如何在iOS地圖上高效的顯示大量數據 [轉]

時間  2019-11-11
標籤 ios3 ios 地圖 如何 高效 顯示 大量 數據 欄目 iOS 简体版
原文   原文鏈接
 
感謝翻譯小組成員 崩月姐姐熱心翻譯。本篇文章是咱們每週推薦優秀國外的技術類文章的其中一篇。若是您有不錯的原創或譯文，歡迎提交給咱們，更歡迎其餘朋友加入咱們的翻譯小組（聯繫qq：2408167315）。
 
如何在iOS地圖上以用戶能夠理解並樂於接受的方式來處理和顯示大量數據？這個教程將會給你們進行示例說明。
 
咱們要開發一款iOS的app應用，這個應用包含有87000個旅館的信息，每一個旅館的信息中包括有一個座標值，一個旅館名跟一個電話號碼。這款app能夠在用戶拖動、放大縮小地圖時更新旅館數據，而不須要用戶從新進行搜索。
 
爲了達到這個目的，咱們須要構造一個可快速檢索的數據結構。C語言的性能高，因此咱們用C語言來構造這個數據結構。爲了確保大量的數據不會讓用戶感到迷惑，因此咱們還須要想出一個合併數據的解決方案。最後，爲了更好的適應市場，咱們須要把app作的更完善一些。
 
完成這個教學後，你將學到這款app的全部核心內容。
 
 
數據結構
首先咱們先來分析下數據，搞清咱們要如何處理數據。旅館數據中包含了一系列的座標點（包括緯度和經度），咱們須要根據這些座標點在地圖上進行標註。地圖可 以任意的拖動並放大縮小，因此咱們不須要把全部的點都所有繪製出來，咱們只須要繪製能夠顯示在屏幕上的點。核心問題是：咱們須要查詢出顯示在屏幕上的全部 的點，因此咱們要想出一個查找算法，查找存在於一個矩形範圍內的全部點。
 
一個簡單的解決方式就是遍歷全部的點，而後判斷（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.     double x; 
  3.     double y; 
  4.     void* data; 
  5. } TBQuadTreeNodeData; 
  6. TBQuadTreeNodeData TBQuadTreeNodeDataMake(double x, double y, void* data); 
  7.  
  8. typedef struct TBBoundingBox { 
  9.     double x0; double y0; 
  10.     double xf; double yf; 
  11. } TBBoundingBox; 
  12. TBBoundingBox TBBoundingBoxMake(double x0, double y0, double xf, double yf); 
  13.  
  14. typedef struct quadTreeNode { 
  15.     struct quadTreeNode* northWest; 
  16.     struct quadTreeNode* northEast; 
  17.     struct quadTreeNode* southWest; 
  18.     struct quadTreeNode* southEast; 
  19.     TBBoundingBox boundingBox; 
  20.     int bucketCapacity; 
  21.     TBQuadTreeNodeData *points; 
  22.     int count; 
  23. } TBQuadTreeNode; 
  24. TBQuadTreeNode* TBQuadTreeNodeMake(TBBoundingBox boundary, int bucketCapacity); 
 
TBQuadTreeNodeData結構包含了座標點（緯度，經度）。void*data是一個普通的指針，用來存儲咱們須要的其餘信息，如旅館名跟電 話號碼。TBBoundingBox表明一個用於範圍查詢的長方形，也就是以前談到(xMin<=x<=xMax&& yMin<=y<=yMax)查詢的那個長方形。左上角是(xMin,yMin)，右下角是(xMax,yMax)。
 
最後，咱們看下TBQuadTreeNode結構，這個結構包含了四個指針，每一個指針分別指向這個結點的四個子節點。它還有一個外包圍框和一個數組（數組中就是那個包含一系列座標點的桶）。
 
在咱們創建完四叉樹的同時，空間上的索引也就同時造成了。這是生成四叉樹的演示動畫。
 
 
下面的代碼準確描述了以上動畫的過程：
 
  1. void TBQuadTreeNodeSubdivide(TBQuadTreeNode* node) 
  2. { 
  3.     TBBoundingBox box = node->boundingBox; 
  4.  
  5.     double xMid = (box.xf + box.x0) / 2.0; 
  6.     double yMid = (box.yf + box.y0) / 2.0; 
  7.  
  8.     TBBoundingBox northWest = TBBoundingBoxMake(box.x0, box.y0, xMid, yMid); 
  9.     node->northWest = TBQuadTreeNodeMake(northWest, node->bucketCapacity); 
  10.  
  11.     TBBoundingBox northEast = TBBoundingBoxMake(xMid, box.y0, box.xf, yMid); 
  12.     node->northEast = TBQuadTreeNodeMake(northEast, node->bucketCapacity); 
  13.  
  14.     TBBoundingBox southWest = TBBoundingBoxMake(box.x0, yMid, xMid, box.yf); 
  15.     node->southWest = TBQuadTreeNodeMake(southWest, node->bucketCapacity); 
  16.  
  17.     TBBoundingBox southEast = TBBoundingBoxMake(xMid, yMid, box.xf, box.yf); 
  18.     node->southEast = TBQuadTreeNodeMake(southEast, node->bucketCapacity); 
  19. } 
  20.  
  21. bool TBQuadTreeNodeInsertData(TBQuadTreeNode* node, TBQuadTreeNodeData data) 
  22. { 
  23.     // Bail if our coordinate is not in the boundingBox 
  24.     if (!TBBoundingBoxContainsData(node->boundingBox, data)) { 
  25.         return false; 
  26.     } 
  27.  
  28.     // Add the coordinate to the points array 
  29.     if (node->count < node->bucketCapacity) { 
  30.         node->points[node->count++] = data; 
  31.         return true; 
  32.     } 
  33.  
  34.     // Check to see if the current node is a leaf, if it is, split 
  35.     if (node->northWest == NULL) { 
  36.         TBQuadTreeNodeSubdivide(node); 
  37.     } 
  38.  
  39.     // Traverse the tree 
  40.     if (TBQuadTreeNodeInsertData(node->northWest, data)) return true; 
  41.     if (TBQuadTreeNodeInsertData(node->northEast, data)) return true; 
  42.     if (TBQuadTreeNodeInsertData(node->southWest, data)) return true; 
  43.     if (TBQuadTreeNodeInsertData(node->southEast, data)) return true; 
  44.  
  45.     return false; 
  46. } 
 
如今咱們已經完成了四叉樹的構造，咱們還須要在四叉樹上進行區域範圍查詢並返回TBQuadTreeNodeData結構。如下是區域範圍查詢的演示動畫，在淺藍區域內的是全部的標註點。當標註點被查詢到在指定的區域範圍內，則會被標註爲綠色。
 
 
如下是查詢代碼：
 
  1. typedef void(^TBDataReturnBlock)(TBQuadTreeNodeData data); 
  2.  
  3. void TBQuadTreeGatherDataInRange(TBQuadTreeNode* node, TBBoundingBox range, TBDataReturnBlock block) 
  4. { 
  5.     // If range is not contained in the node's boundingBox then bail 
  6.     if (!TBBoundingBoxIntersectsBoundingBox(node->boundingBox, range)) { 
  7.         return; 
  8.     } 
  9.  
  10.     for (int i = 0; i < node->count; i++) { 
  11.         // Gather points contained in range 
  12.         if (TBBoundingBoxContainsData(range, node->points[i])) { 
  13.             block(node->points[i]); 
  14.         } 
  15.     } 
  16.      
  17.     // Bail if node is leaf 
  18.     if (node->northWest == NULL) { 
  19.         return; 
  20.     } 
  21.  
  22.     // Otherwise traverse down the tree 
  23.     TBQuadTreeGatherDataInRange(node->northWest, range, block); 
  24.     TBQuadTreeGatherDataInRange(node->northEast, range, block); 
  25.     TBQuadTreeGatherDataInRange(node->southWest, range, block); 
  26.     TBQuadTreeGatherDataInRange(node->southEast, range, block); 
  27. } 
 
用四叉樹這種結構能夠進行快速的查詢。在一個包含成百上千條數據的數據庫中，能夠以60fps的速度查詢上百條數據。
 
 
用旅館數據來填充四叉樹
旅館的數據來自於POIplaza這個網站，並且已經格式化成csv文件。咱們要從硬盤中讀取出數據並對數據進行轉換，最後用數據來填充四叉樹。
 
建立四叉樹的代碼在TBCoordinateQuadTree類中：
 
  1. typedef struct TBHotelInfo { 
  2.     char* hotelName; 
  3.     char* hotelPhoneNumber; 
  4. } TBHotelInfo; 
  5.  
  6. TBQuadTreeNodeData TBDataFromLine(NSString *line) 
  7. { 
  8.     // Example line: 
  9.     // -80.26262, 25.81015, Everglades Motel, USA-United States, +1 305-888-8797 
  10.      
  11.     NSArray *components = [line componentsSeparatedByString:@","]; 
  12.     double latitude = [components[1] doubleValue]; 
  13.     double longitude = [components[0] doubleValue]; 
  14.  
  15.     TBHotelInfo* hotelInfo = malloc(sizeof(TBHotelInfo)); 
  16.  
  17.     NSString *hotelName = [components[2] stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceAndNewlineCharacterSet]]; 
  18.     hotelInfo->hotelName = malloc(sizeof(char) * hotelName.length + 1); 
  19.     strncpy(hotelInfo->hotelName, [hotelName UTF8String], hotelName.length + 1); 
  20.  
  21.     NSString *hotelPhoneNumber = [[components lastObject] stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceAndNewlineCharacterSet]]; 
  22.     hotelInfo->hotelPhoneNumber = malloc(sizeof(char) * hotelPhoneNumber.length + 1); 
  23.     strncpy(hotelInfo->hotelPhoneNumber, [hotelPhoneNumber UTF8String], hotelPhoneNumber.length + 1); 
  24.  
  25.     return TBQuadTreeNodeDataMake(latitude, longitude, hotelInfo); 
  26. } 
  27.  
  28. - (void)buildTree 
  29. { 
  30.     NSString *data = [NSString stringWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"USA-HotelMotel" ofType:@"csv"] encoding:NSASCIIStringEncoding error:nil]; 
  31.     NSArray *lines = [data componentsSeparatedByString:@"\n"]; 
  32.  
  33.     NSInteger count = lines.count - 1; 
  34.  
  35.     TBQuadTreeNodeData *dataArray = malloc(sizeof(TBQuadTreeNodeData) * count); 
  36.     for (NSInteger i = 0; i < count; i++) { 
  37.         dataArray[i] = TBDataFromLine(lines[i]); 
  38.     } 
  39.  
  40.     TBBoundingBox world = TBBoundingBoxMake(19, -166, 72, -53); 
  41.     _root = TBQuadTreeBuildWithData(dataArray, count, world, 4); 
  42. } 
 
如今咱們用iPhone上預加載的數據建立了一個四叉樹。接下來咱們將處理app的下一個部分：合併數據（clustering）。
 
合併數據（clustering）
如今咱們有了一個裝滿旅館數據的四叉樹，能夠用來解決合併數據的問題了。首先，讓咱們來探索下合併數據的緣由。咱們合併數據是由於咱們不想由於數據過於龐 大而使用戶迷惑。實際上有不少種方式能夠解決這個問題。GoogleMaps根據地圖的縮放等級（zoomlevel）來顯示搜索結果數據中的一部分數 據。地圖放的越大，就越能清晰的看到更細節的標註，直到你能看到全部有效的標註。咱們將採用這種合併數據的方式，只顯示出來旅館的個數，而不在地圖上顯示 出全部的旅館信息。
 
最終呈現的標註是一箇中心顯示旅館個數的小圓圈。實現的原理跟如何把圖片縮小的原理差很少。咱們先在地圖上畫一個格子。每一個格子中包含了不少個小單元格， 每一個小單元格中的全部旅館數據合併出一個標註。而後經過每一個小單元格中全部旅館的座標值的平均值來決定合併後這個標註的座標值。
 
這是以上處理的演示動畫。
 
 
如下是代碼實現過程。在TBCoordinateQuadTree類中添加了一個方法。
 
  1. - (NSArray *)clusteredAnnotationsWithinMapRect:(MKMapRect)rect withZoomScale:(double)zoomScale 
  2. { 
  3.     double TBCellSize = TBCellSizeForZoomScale(zoomScale); 
  4.     double scaleFactor = zoomScale / TBCellSize; 
  5.  
  6.     NSInteger minX = floor(MKMapRectGetMinX(rect) * scaleFactor); 
  7.     NSInteger maxX = floor(MKMapRectGetMaxX(rect) * scaleFactor); 
  8.     NSInteger minY = floor(MKMapRectGetMinY(rect) * scaleFactor); 
  9.     NSInteger maxY = floor(MKMapRectGetMaxY(rect) * scaleFactor); 
  10.  
  11.     NSMutableArray *clusteredAnnotations = [[NSMutableArray alloc] init]; 
  12.  
  13.     for (NSInteger x = minX; x <= maxX; x++) { 
  14.         for (NSInteger y = minY; y <= maxY; y++) { 
  15.  
  16.             MKMapRect mapRect = MKMapRectMake(x / scaleFactor, y / scaleFactor, 1.0 / scaleFactor, 1.0 / scaleFactor); 
  17.              
  18.             __block double totalX = 0; 
  19.             __block double totalY = 0; 
  20.             __block int count = 0; 
  21.  
  22.             TBQuadTreeGatherDataInRange(self.root, TBBoundingBoxForMapRect(mapRect), ^(TBQuadTreeNodeData data) { 
  23.                 totalX += data.x; 
  24.                 totalY += data.y; 
  25.                 count++; 
  26.             }); 
  27.  
  28.             if (count >= 1) { 
  29.                 CLLocationCoordinate2D coordinate = CLLocationCoordinate2DMake(totalX / count, totalY / count); 
  30.                 TBClusterAnnotation *annotation = [[TBClusterAnnotation alloc] initWithCoordinate:coordinate count:count]; 
  31.                 [clusteredAnnotations addObject:annotation]; 
  32.             } 
  33.         } 
  34.     } 
  35.  
  36.     return [NSArray arrayWithArray:clusteredAnnotations]; 
  37. } 
 
上面的方法在指定小單元格大小的前提下合併數據生成了最終的標註。如今咱們須要作的就是把這些標註繪製到MKMapView上。首先咱們建立一個 UIViewController的子類，而後用MKMapView做爲它的view視圖。在可視區域改變的狀況下，咱們須要實時更新標註的顯示，因此我 們要實現mapView:regionDidChangeAnimated:的協議方法。
 
  1. - (void)mapView:(MKMapView *)mapView regionDidChangeAnimated:(BOOL)animated 
  2. { 
  3.     [[NSOperationQueue new] addOperationWithBlock:^{ 
  4.         double zoomScale = self.mapView.bounds.size.width / self.mapView.visibleMapRect.size.width; 
  5.         NSArray *annotations = [self.coordinateQuadTree clusteredAnnotationsWithinMapRect:mapView.visibleMapRect withZoomScale:zoomScale]; 
  6.  
  7.         [self updateMapViewAnnotationsWithAnnotations:annotations]; 
  8.     }]; 
  9. } 
 
 
只添加必要的標註
在主線程中咱們指望儘量花費較少時間來作運算，這意味着咱們要儘量的把全部內容都放到後臺的線程中。爲了在主線程中花費更少的時間來作計算，咱們只須要繪製一些必要的標註。這能夠避免用戶滑動過程當中感到很卡，從而保證流暢的用戶體驗。
 
開始以前，咱們看一下下面的圖片：
 
 
左邊的屏幕截圖是地圖進行滑動前的地圖快照。這個快照中的標註就是目前mapView中的標註，咱們稱這個爲「before集合」。
 
右邊的屏幕截圖是地圖進行滑動後的地圖快照。這個快照中的標註就是從clusteredAnnotationsWithinMapRect:withZoomScale:這個函數中獲得的返回值。咱們稱這個爲「after集合」。
 
咱們指望保留兩個快照中都存在的標註點（即重合的那些標註點），去除在「after集合」中不存在的那些標註點，同時添加那些新的標註點。
 
  1. - (void)updateMapViewAnnotationsWithAnnotations:(NSArray *)annotations 
  2. { 
  3.     NSMutableSet *before = [NSMutableSet setWithArray:self.mapView.annotations]; 
  4.     NSSet *after = [NSSet setWithArray:annotations]; 
  5.  
  6.     // Annotations circled in blue shared by both sets 
  7.     NSMutableSet *toKeep = [NSMutableSet setWithSet:before]; 
  8.     [toKeep intersectSet:after]; 
  9.  
  10.     // Annotations circled in green 
  11.     NSMutableSet *toAdd = [NSMutableSet setWithSet:after]; 
  12.     [toAdd minusSet:toKeep]; 
  13.  
  14.     // Annotations circled in red 
  15.     NSMutableSet *toRemove = [NSMutableSet setWithSet:before]; 
  16.     [toRemove minusSet:after]; 
  17.  
  18.     // These two methods must be called on the main thread 
  19.     [[NSOperationQueue mainQueue] addOperationWithBlock:^{ 
  20.         [self.mapView addAnnotations:[toAdd allObjects]]; 
  21.         [self.mapView removeAnnotations:[toRemove allObjects]]; 
  22.     }]; 
  23. } 
 
這樣咱們儘量的確保在主線程上作少許的工做，從而提高地圖滑動的流暢性。
 
接下來咱們來看下如何繪製標註，而且在標註上顯示出來旅館的個數。最後咱們給標註加上點擊事件，這樣使得app從頭到腳均可以表現的很是完美。
 
繪製標註
因爲咱們在地圖上並無徹底顯示出所有旅館，因此咱們須要在剩餘的這些標註上表現出真實的旅館總量。
 
首先建立一個圓形的標註，中間顯示合併後的個數，也就是旅館的真實總量。這個圓形的大小一樣能夠反映出合併後的個數。
 
爲了實現這個需求，咱們要找出一個方程式，容許咱們在1到500+的數值中生成一個縮小後的數值。用這個數值來做爲標註的大小。咱們將用到如下的方程式。
 
 
x值較低的時候f(x)增加的比較快，x在值變大的時候f(x)增加變緩慢，β值用來控制f(x)趨於1的速度。α值影響最小值（在咱們的項目中，咱們的最小合併值（也就是1）能佔總共最大值的60%）。
 
  1. static CGFloat const TBScaleFactorAlpha = 0.3; 
  2. static CGFloat const TBScaleFactorBeta = 0.4; 
  3.  
  4. CGFloat TBScaledValueForValue(CGFloat value) 
  5. { 
  6.     return 1.0 / (1.0 + expf(-1 * TBScaleFactorAlpha * powf(value, TBScaleFactorBeta))); 
  7. } 
  8.  
  9. - (void)setCount:(NSUInteger)count 
  10. { 
  11.     _count = count; 
  12.  
  13.     // Our max size is (44,44) 
  14.     CGRect newBounds = CGRectMake(0, 0, roundf(44 * TBScaledValueForValue(count)), roundf(44 * TBScaledValueForValue(count))); 
  15.     self.frame = TBCenterRect(newBounds, self.center); 
  16.  
  17.     CGRect newLabelBounds = CGRectMake(0, 0, newBounds.size.width / 1.3, newBounds.size.height / 1.3); 
  18.     self.countLabel.frame = TBCenterRect(newLabelBounds, TBRectCenter(newBounds)); 
  19.     self.countLabel.text = [@(_count) stringValue]; 
  20.  
  21.     [self setNeedsDisplay]; 
  22. } 
 
如今標註的大小已經OK了。讓咱們再來把這個標註作漂亮些。
 
  1. - (void)setupLabel 
  2. { 
  3.     _countLabel = [[UILabel alloc] initWithFrame:self.frame]; 
  4.     _countLabel.backgroundColor = [UIColor clearColor]; 
  5.     _countLabel.textColor = [UIColor whiteColor]; 
  6.     _countLabel.textAlignment = NSTextAlignmentCenter; 
  7.     _countLabel.shadowColor = [UIColor colorWithWhite:0.0 alpha:0.75]; 
  8.     _countLabel.shadowOffset = CGSizeMake(0, -1); 
  9.     _countLabel.adjustsFontSizeToFitWidth = YES; 
  10.     _countLabel.numberOfLines = 1; 
  11.     _countLabel.font = [UIFont boldSystemFontOfSize:12]; 
  12.     _countLabel.baselineAdjustment = UIBaselineAdjustmentAlignCenters; 
  13.     [self addSubview:_countLabel]; 
  14. } 
  15.  
  16. - (void)drawRect:(CGRect)rect 
  17. { 
  18.     CGContextRef context = UIGraphicsGetCurrentContext(); 
  19.  
  20.     CGContextSetAllowsAntialiasing(context, true); 
  21.  
  22.     UIColor *outerCircleStrokeColor = [UIColor colorWithWhite:0 alpha:0.25]; 
  23.     UIColor *innerCircleStrokeColor = [UIColor whiteColor]; 
  24.     UIColor *innerCircleFillColor = [UIColor colorWithRed:(255.0 / 255.0) green:(95 / 255.0) blue:(42 / 255.0) alpha:1.0]; 
  25.  
  26.     CGRect circleFrame = CGRectInset(rect, 4, 4); 
  27.  
  28.     [outerCircleStrokeColor setStroke]; 
  29.     CGContextSetLineWidth(context, 5.0); 
  30.     CGContextStrokeEllipseInRect(context, circleFrame); 
  31.  
  32.     [innerCircleStrokeColor setStroke]; 
  33.     CGContextSetLineWidth(context, 4); 
  34.     CGContextStrokeEllipseInRect(context, circleFrame); 
  35.  
  36.     [innerCircleFillColor setFill]; 
  37.     CGContextFillEllipseInRect(context, circleFrame); 
  38. } 
 
添加最後的touch事件
目前的標註能夠很好的呈現出咱們的數據了，讓咱們最後添加一些touch事件來讓咱們的app用起來更有趣。
 
首先，咱們須要爲新添加到地圖上的標註作一個動畫。若是沒有添加動畫的話，新的標註就會在地圖上忽然出現，體驗效果將會大打折扣。
 
  1. - (void)addBounceAnnimationToView:(UIView *)view 
  2. { 
  3.     CAKeyframeAnimation *bounceAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale"]; 
  4.  
  5.     bounceAnimation.values = @[@(0.05), @(1.1), @(0.9), @(1)]; 
  6.  
  7.     bounceAnimation.duration = 0.6; 
  8.     NSMutableArray *timingFunctions = [[NSMutableArray alloc] init]; 
  9.     for (NSInteger i = 0; i < 4; i++) { 
  10.         [timingFunctions addObject:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]]; 
  11.     } 
  12.     [bounceAnimation setTimingFunctions:timingFunctions.copy]; 
  13.     bounceAnimation.removedOnCompletion = NO; 
  14.  
  15.     [view.layer addAnimation:bounceAnimation forKey:@"bounce"]; 
  16. } 
  17.  
  18. - (void)mapView:(MKMapView *)mapView didAddAnnotationViews:(NSArray *)views 
  19. { 
  20.     for (UIView *view in views) { 
  21.         [self addBounceAnnimationToView:view]; 
  22.     } 
  23. } 
 
接下來，咱們想要根據地圖的縮放比例來改變在合併時的小單元格（cell）的大小。在地圖進行放大時，小單元格變小。因此咱們須要定義一下當前地圖的縮放 比例。也就是scale=mapView.bounds.size.width/mapView.visibleMapRect.size.width:
 
  1. NSInteger TBZoomScaleToZoomLevel(MKZoomScale scale) 
  2. { 
  3.     double totalTilesAtMaxZoom = MKMapSizeWorld.width / 256.0; 
  4.     NSInteger zoomLevelAtMaxZoom = log2(totalTilesAtMaxZoom); 
  5.     NSInteger zoomLevel = MAX(0, zoomLevelAtMaxZoom + floor(log2f(scale) + 0.5)); 
  6.  
  7.     return zoomLevel; 
  8. } 
 
咱們爲每一個地圖縮放的比例都定義一個常量。
 
  1. float TBCellSizeForZoomScale(MKZoomScale zoomScale) 
  2. { 
  3.     NSInteger zoomLevel = TBZoomScaleToZoomLevel(zoomScale); 
  4.  
  5.     switch (zoomLevel) { 
  6.         case 13: 
  7.         case 14: 
  8.         case 15: 
  9.             return 64; 
  10.         case 16: 
  11.         case 17: 
  12.         case 18: 
  13.             return 32; 
  14.         case 19: 
  15.             return 16; 
  16.  
  17.         default: 
  18.             return 88; 
  19.     } 
  20. } 
 
如今咱們放大地圖，咱們將看到逐漸變小的標註，直到最後咱們能看到表明每一個旅館的那個標註。
 
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程