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)