Just My Life & My Work

[iOS] 在地圖上繪圖 (Draw on Map)

2020 年 07 月 17 日

一直以來我很喜歡地圖應用，可以大範圍看到資訊的廣度，像是垃圾車經過的地點或微笑單車租借站的地點。

最近想要在地圖上繪製路徑，研究過後發現非常簡單，將有經緯度的資料準備好，透過MapKit來繪製即可！

看到下方程式碼展示，就知道如何實現囉～

遵循MKMapViewDelegate，在rendererForOverlay指定要繪製線條的顏色與粗細。

/**
 Theme: Draw on Map
 IDE: Xcode 11
 Language: Objective C
 Date: 108/07/07
 Author: HappyMan
 Blog: https://cg2010studio.com/
 */

-(void)setupData
{
    CLLocationCoordinate2D coordinateArray[[pointArr count]];
    for (int i = 0; i < [pointArr count]; i++) {
        
        // Ex: 121.381670999968 25.0741819965287
        float longitude = [[[pointArr[i] componentsSeparatedByString:@" "] firstObject] floatValue];
        float latitude = [[[pointArr[i] componentsSeparatedByString:@" "] lastObject] floatValue];

        coordinateArray[i] = CLLocationCoordinate2DMake(latitude, longitude);
    }
    MKPolyline *pl = [MKPolyline polylineWithCoordinates:coordinateArray count:[pointArr count]];
    
    [stationMapView setVisibleMapRect:[pl boundingMapRect]]; //If you want the route to be visible

    [stationMapView addOverlay:pl];
}

#pragma mark - MKMapViewDelegate
-(MKOverlayRenderer *)mapView:(MKMapView *)mapView rendererForOverlay:(id<MKOverlay>)overlay
{
    if ([overlay isKindOfClass:[MKPolyline class]])
    {
        MKPolylineRenderer *aView = [[MKPolylineRenderer alloc] initWithPolyline:(MKPolyline *)overlay];

            aView.fillColor = [UIColor redColor];
            aView.strokeColor = [UIColor blueColor];
            aView.lineWidth = 3;

        return aView;
    }

    return nil;
}

我所使用的開放資料是來自「公共運輸整合資訊流通服務平臺」(Public Transport Data eXchange，PTX)，資料品質相當優良～

在此我指定顏色為藍色、粗細為3。

最近在進行Side Project，想把自行車路線功能繪製出來，以下分別是台北市和新北市的自行車路線，看來台北市規劃的相當完整，到處都有適合騎車的自行車路線。

若你有興趣的話，可以去App Store下載「微笑單車管家」喔：）～

分類：

iOS, 教學

發表留言

Tagged with:

隨意留個言吧：）～

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料。

標籤雲