Just My Life & My Work

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

最近想要在地圖上繪製路徑,研究過後發現非常簡單,將有經緯度的資料準備好,透過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下載「微笑單車管家」喔:)~

隨意留個言吧:)~

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Google photo

您的留言將使用 Google 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

標籤雲

%d 位部落客按了讚: