map.gif
??櫻花紅陌上惠啄，楊柳綠池邊慎恒。又到了櫻花盛開的季節(jié)，簡友們有沒有出來賞花呀撵渡，哈哈融柬。
??
年前仿做的一個好玩簡單的Demo，今天分享出來趋距，一起交流學(xué)習(xí)粒氧。
項(xiàng)目主要由兩部分組成：
- 二級聯(lián)動：主要用作展示省份地區(qū)和選擇數(shù)據(jù)；
- 地圖展示：主要繪制用戶選中的地區(qū)在地圖上的著色节腐。
本文主要介紹繪制地圖方法外盯，其它的可以看代碼嘍~
一、獲取地圖數(shù)據(jù)
從Free SVG Maps官網(wǎng)獲取SVG地圖翼雀，這個地圖是可以通過第三庫SVGKit直接顯示的饱苟。
二、把地圖中的數(shù)據(jù)轉(zhuǎn)成路徑
把上面生成的svg地圖拖入PaintCode工具狼渊，調(diào)整對應(yīng)的開發(fā)語言箱熬，就可以在代碼區(qū)域生成對應(yīng)的UIBezierPath路徑。
China SVG.png
三囤锉、生成地圖路徑Plist文件
把上面生成的路徑存到一個數(shù)組中坦弟，并歸檔护锤，生成ChinaMapPaths.plist文件官地。
注意：粘貼時，刪除每個UIBezierPath對象的下面部分烙懦，這里在代碼中統(tǒng)一配置驱入。
image
四、生成各個省份Plist文件
如下所示：坐標(biāo)可以通過PaintCode獲得氯析，點(diǎn)擊每一個分區(qū)亏较，會顯示每一個分區(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(@"----失敗");
}
}
五掩缓、繪制地圖
從沙盒中獲取生成的兩個文件雪情，導(dǎo)入項(xiàng)目，使用wg剛封裝的WGMap類你辣，就可以繪制地圖了巡通。
奉上我的 Demo地址
參考鏈接：
教你畫中國地圖和各省市地圖
http://www.amcharts.com/svg-maps/
仿愛鮮蜂二級聯(lián)動
