map

地图标记动态聚合的 实现 上海泰尼⺴⽹网络科技 来⾃自《朋友地图》的核⼼心技术 移动项⺫⽬目经理 陈勇辉 Mac端主程 孟繁维 12年9月5⽇日星期三 12年9月5⽇日星期三 问题的产⽣生 • 点太多（会卡） • 杂乱 • 点不到 12年9月5⽇日星期三 问题的解决 • 开源⽅ • 问题：巨慢，没有动画，只有闪动 • https://github.com/yinkou/OCMapView • https://github.com/RVLVR/REVClusterMap • https://github.com/vicpenap/VPPMap • WWDC 2011的讲座《Visualizing Information Geographically with MapKit》 • 聚合 12年9月5⽇日星期三 算法实现 选定处理区域 12年9月5⽇日星期三 算法实现 划分⺴⽹网格 12年9月5⽇日星期三 算法实现 计算中⼼心点 按照与中⼼心点距离排序 选取最近点作为代点 12年9月5⽇日星期三 算法实现 6 动画将标注点移动⾄至代表点 12年9月5⽇日星期三 新的问题 • 性能（300个点，卡顿） • 要求（5000个点，流畅） 12年9月5⽇日星期三 第⼀一次改进 • 分析 • 双重循环 • 计算中⼼心太慢 • 改进 • 后台计算 • 中⼼心计算变为随机取点（复杂度降为 常数时间） 12年9月5⽇日星期三 结果 • 对5000样本，算法最慢也在1秒内 • 但整体还是有卡顿 12年9月5⽇日星期三 第⼆二次改进 • 分析 • 注意⼒力从算法调整到动画效率 • 改进 • 连续缩放，取消中间过程 • 动画从多次提交变为批量提交 • 剪枝 12年9月5⽇日星期三 整合提交 动画 提交 动画 提交 动画 提交 动画 动画 提交 动画 12年9月5⽇日星期三 剪枝 12年9月5⽇日星期三 结果 • 从21秒（最慢）－>1秒内完成 12年9月5⽇日星期三 效果 12年9月5⽇日星期三 圈选 12年9月5⽇日星期三 实现 12年9月5⽇日星期三 实现 在地图上覆盖⼀一个UIView 12年9月5⽇日星期三 实现 画圈 12年9月5⽇日星期三 实现 把圈映射为MapView的多边形对象 获取外接矩形 ⽤用外接矩形获取点数据，⽤用多边形来过滤数据 12年9月5⽇日星期三 Mac版的实现 • 本以为很简单 • 结果发现了⼤大问题 12年9月5⽇日星期三 没有MapKit • 开源 MacMapKit • https://github.com/Oomph/MacMapKit 12年9月5⽇日星期三 MacMapKit的问题 • 坐标转换 • latlngToWorldPoint worldPointToLatLng viewRectToWorldRect viewPointToWorldPoint • 范围查询 • annotationsInMapRect • 更新图⽚片 • update:forImageUrl: 12年9月5⽇日星期三 扩展 • ⽤用JS调⽤用GoogleMap API实现功能 • Cocoa代码调⽤用⾃自⼰己的JS函数 12年9月5⽇日星期三 Cocoa调⽤用JS • WebScriptObject *webScriptObject = [webView windowScriptObject]; • NSString *json = [webScriptObject callWebScriptMethod:@"latLngToWorldPoi nt" withArguments:args]; 12年9月5⽇日星期三 问题 • 划分⺴⽹网格根据可⻅见区域划分 • 移动地图时，会造成聚合结合变化 12年9月5⽇日星期三 ⺴⽹网格划分 划分⺴⽹网格 12年9月5⽇日星期三 • 开源 • iOS • Mac MapKit 12年9月5⽇日星期三