iOS腳步地圖(仿微信小程序)

map.gif

??櫻花紅陌上,楊柳綠池邊。又到了櫻花盛開(kāi)的季節(jié),簡(jiǎn)友們有沒(méi)有出來(lái)賞花呀,哈哈。

??

年前仿做的一個(gè)好玩簡(jiǎn)單的Demo,今天分享出來(lái),一起交流學(xué)習(xí)。

項(xiàng)目主要由兩部分組成:

  • 二級(jí)聯(lián)動(dòng):主要用作展示省份地區(qū)和選擇數(shù)據(jù);
  • 地圖展示:主要繪制用戶選中的地區(qū)在地圖上的著色。

本文主要介紹繪制地圖方法,其它的可以看代碼嘍~

一、獲取地圖數(shù)據(jù)

Free SVG Maps官網(wǎng)獲取SVG地圖,這個(gè)地圖是可以通過(guò)第三庫(kù)SVGKit直接顯示的。

二、把地圖中的數(shù)據(jù)轉(zhuǎn)成路徑

把上面生成的svg地圖拖入PaintCode工具,調(diào)整對(duì)應(yīng)的開(kāi)發(fā)語(yǔ)言,就可以在代碼區(qū)域生成對(duì)應(yīng)的UIBezierPath路徑。

China SVG.png

三、生成地圖路徑Plist文件

把上面生成的路徑存到一個(gè)數(shù)組中,并歸檔,生成ChinaMapPaths.plist文件。
注意:粘貼時(shí),刪除每個(gè)UIBezierPath對(duì)象的下面部分,這里在代碼中統(tǒng)一配置。

image

四、生成各個(gè)省份Plist文件

如下所示:坐標(biāo)可以通過(guò)PaintCode獲得,點(diǎn)擊每一個(gè)分區(qū),會(huì)顯示每一個(gè)分區(qū)在總的圖上的坐標(biāo)位置。

- (void)createInfo{

    NSMutableArray *dataArr = [[NSMutableArray alloc] init];

    CGRect rect1 = CGRectMake(602,0.5, 171.7,194);
    NSValue *value1 = [NSValue valueWithCGRect:rect1];
    NSDictionary *dic1 = @{
                           @"name":@"黑龍江",
                           @"index":@(1),
                           @"rect":value1
                           };
    [dataArr addObject:dic1];

    CGRect rect2 = CGRectMake(607.4,142.6, 122, 94.5);
    NSValue *value2 = [NSValue valueWithCGRect:rect2];
    NSDictionary *dic2 = @{
                           @"name":@"吉林",
                           @"index":@(2),
                           @"rect":value2
                           };
    [dataArr addObject:dic2];

/**   省略部分  */

    NSString *document = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES)[0];
    NSString *path = [document stringByAppendingPathComponent:@"provinceInfo.plist"];
    BOOL isSucc = [NSKeyedArchiver archiveRootObject:dataArr toFile:path];
    if (isSucc) {
        NSLog(@"----成功");
    }else{
        NSLog(@"----失敗");
    }
}

五、繪制地圖

從沙盒中獲取生成的兩個(gè)文件,導(dǎo)入項(xiàng)目,使用wg剛封裝的WGMap類,就可以繪制地圖了。

奉上我的 Demo地址

參考鏈接:

教你畫(huà)中國(guó)地圖和各省市地圖
http://www.amcharts.com/svg-maps/
仿愛(ài)鮮蜂二級(jí)聯(lián)動(dòng)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容