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)