资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/高仿 ios 相册地图功能

高仿 ios 相册地图功能

pakolagij / 1397人阅读

摘要：本篇文章已授权微信公众号郭霖独家发布老规矩先上图最近没有什么时间，后面项目再补上详细说明百度地图新增点聚合功能。百度地图是把整个地球是按照一个平面来展开，并且通过墨卡托投影投射到坐标轴上面。上图很明显墨卡托投影把整张世界地图投影成。

本篇文章已授权微信公众号 guolin_blog （郭霖）独家发布

</>复制代码 
  1. 老规矩先上图
    最近 没有什么时间，后面项目再补上详细说明

</>复制代码 
  1. 百度地图SDK新增点聚合功能。通过该功能，可通过缩小地图层级，将定义范围内的多个标注点，聚合显示成一个标注点，解决加载大量点要素到地图上产生覆盖现象的问题，并提高性能。
本demo 修改算法流程：
</>复制代码 
  1. 加入异步添加屏幕上图片，
  2. 只加载屏幕范围内的图片
  3. 优化渲染逻辑
    大大减少运算的时间（经过测试1W张不同经纬度的图片 300-500ms 可以计算完毕）
讲解点聚合功能，整个分析过程分为三部分：
</>复制代码 
  1. 1、如何添加点聚合功能到项目中；
  2. 2、整体结构分析；
  3. 3、核心算法分析。
一、添加点聚合功能
</>复制代码 
  1. 如官网所示，添加点聚合的方法分为三步：
    1、声明点聚合管理类为全局变量，并初始化。核心代码如下图：
</>复制代码 
  1. MarkerOptions opts = new MarkerOptions().position(cluster.getPosition())
  2.             .icon(BitmapDescriptorFactory.fromBitmap(XX));
  3. Marker marker = (Marker) mMap.addOverlay(opts);
二、整体结构分析
先上一个思维导图：

</>复制代码 
  1. 如上图，点聚合有四个类
  2. 1、Cluster数据：主要是聚合后的数据类型
  3. 2、四叉树：记录初始范围内的所有图片并以四叉树的数据结构组织。核心算法需要用到的数据结构，后面再讲；
  4. 3、点聚合算法：基于四叉树的核心算法。后面讲；
  5. 4、Cluster管理：对外接口，通过调用核心算法实现点聚合功能、
</>复制代码 
  1. 整个功能的主要流程有两条：
  2. 1、添加item：Cluster管理类添加item接口  算法类添加item接口：记录所有的图片信息  四叉树类添加item接口：已四叉树的结构记录所有图片信息
  3. 2、获取聚合后的集合：Cluster管理类获取聚合接口  算法类核心算法接口：通过核心算法获取聚合后的集合
三、核心算法
</>复制代码 
  1. 首先要说一个概念：世界宽度。
    百度地图是把整个地球是按照一个平面来展开，并且通过墨卡托投影投射到xy坐标轴上面。上图：

</>复制代码 
  1. 很明显墨卡托投影把整张世界地图投影成
  2. X∈ [0,1] ; Y∈ [0,1]。
  3. 的一个正方型区域。
    X 表示的是经度，Y表示的是纬度。

（其实确认来说是投影一个上下无限延伸的长方体，只是Y属于[0,1]这个范围已经足够我们使用）上图说明：

</>复制代码 
  1. 从上面看出 -85°的纬度对应Y坐标是1，那么-90°呢，你们自己可以去算一下，是+∞ （正无穷）。
</>复制代码 
  1. 至于为什么讲这个，因为计算搜索范围的时候，所有的经纬度都需要换算成Point 来计算，是不是很方便性，而且不易出错。
    真是感叹伟人的强大！
附注
转换的公式在下面这个类里面：
</>复制代码 
  1. SphericalMercatorProjection.java
接下来说说如何通过四叉树组织数据
</>复制代码 
  1. 四叉树的基本思想是把空间递归划分为不同层次的树结构。它把已知的空间等分成四个相等的子空间，如此递归下去，直到满足当层数目量超过50，或者层级数大于40则停止分割。示意图如下：

OK，接下来说说具体流程

遍历QuadItem,只加载屏幕内的点，生成四叉树，方便搜索。

如果图片已被visitedCandidate记录，则continue下面步骤，直到需要处理的图片没有被visitedCandidates记录；

对上一次屏幕上的点QuadItem先进行处理；

根据MAX_DISTANCE_IN_DP及图片位置计算出searchBounds;

通过四叉树得到searchBounds内所有的图片；

如果图片数量为1，记录并跳到步骤2；

遍历得到的图片；

依次对得到的图片进行处理，

如果图片到中心点的距离比distanceToCluster（此图片与包含此图片的前cluster的距离）小，把图片加入结果集，并移除前Cluster拥有该图片的引用，并记录此次更小的距离，跳步骤8继续遍历剩余项。

重点源码分析：
</>复制代码 
  1. 1.聚合触发口
  2. ClusterManager.java
</>复制代码 
  1. @Override
  2.     public void onMapStatusChangeFinish(MapStatus mapStatus) {
  3.         if (mRenderer instanceof BaiduMap.OnMapStatusChangeListener) {
  4.             ((BaiduMap.OnMapStatusChangeListener) mRenderer).onMapStatusChange(mapStatus);
  5.         }
  6.         // 屏幕缩放范围太小，不进行触发聚合功能
  7.         if (mPreviousCameraPosition != null
  8.                 && Math.abs((int) mPreviousCameraPosition.zoom - (int) mapStatus.zoom) < 1
  9.                 && mPreviousCameraPosition.target.latitude == mapStatus.target.latitude
  10.                 && mPreviousCameraPosition.target.longitude == mapStatus.target.longitude) {
  11.             return;
  12.         }
  13.        //记录
  14.         mPreviousCameraPosition = mapStatus;
  15.      
  16.         //算法运算，计算出聚合后结果集，并且addMarker 到屏幕上
  17.         cluster(mapStatus.zoom,mapStatus.bound);
  18.     }
</>复制代码 
  1. 对地图进行手势操作，都会进行触发这个函数，并进行聚合操作
</>复制代码 
  1. 2.算法运算
  2. NonHierarchicalDistanceBasedAlgorithm.java
</>复制代码 
  1. @Override
  2.     public Set> getClusters(double zoom, LatLngBounds visibleBounds) {
  3.     ...
  4.     }
</>复制代码 
  1. 这个函数有点多，不过在github 上面的demo 已经注释满满，请移步github 查看。
</>复制代码 
  1. 3.渲染UI(addMarker) 
  2. class DefaultClusterRenderer {
  3.     class CreateMarkerTask {
  4.        ...
  5.     }
  6. }
</>复制代码 
  1. private void perform(MarkerModifier markerModifier) {
  2.             // Don"t show small clusters. Render the markers inside, instead.
  3.             markRemoveAndAddLock.lock();
  4.             //真正添加Marker 的地方
  5.             Marker marker = mClusterToMarker.get(cluster);
  6.             if (marker == null || (marker != null
  7.                     && mMarkerToCluster.get(marker).getSize() != cluster.getSize())) {
  8.                 //异步加载占时不添加Marker
  9.                 Integer size = onReadyAddCluster.get(cluster);
  10.                 if (size == null || size != cluster.getSize()) {
  11.                     onReadyAddCluster.put(cluster,cluster.getSize());
  12.                     onBeforeClusterRendered(cluster, new MarkerOptions()
  13.                             .position(cluster.getPosition()));
  14.                 }
  15.             }
  16.             markRemoveAndAddLock.unlock();
  17.             newClusters.add(cluster);
  18.         }

主要添加图片的是onBeforeClusterRendered 这一个函数， 我们看一下实现：

</>复制代码 
  1. public class PersonRenderer extends DefaultClusterRenderer {
  2.   DataSource> target = cancleMap1.get(cluster);
  3.         if(target != null) {
  4.             target.close();
  5.             cancleMap1.remove(target);
  6.         }
  7.         final LocalPictrue person = cluster.getItems().iterator().next();
  8.         ImageRequest imageRequest = ImageRequestBuilder
  9.                 .newBuilderWithSource(Uri.fromFile(new File(person.path)))
  10.                 .setProgressiveRenderingEnabled(false)
  11.                 .setResizeOptions(new ResizeOptions(50, 50))
  12.                 .setPostprocessor(new BadgViewPostprocessor(mContext,cluster))
  13.                 .build();
  14.         ImagePipeline imagePipeline = Fresco.getImagePipeline();
  15.         DataSource> dataSource =
  16.                 imagePipeline.fetchDecodedImage(imageRequest,mContext);
  17.         dataSource.subscribe(new BaseBitmapDataSubscriber() {
  18.             @Override
  19.             public void onNewResultImpl(@Nullable Bitmap bitmap) {
  20.                 // You can use the bitmap in only limited ways
  21.                 // No need to do any cleanup.
  22.                 if(bitmap != null && !bitmap.isRecycled()) {
  23.                     //you can use bitmap here
  24.                     setIconByCluster(person.path,cluster,
  25.                             markerOptions.icon(BitmapDescriptorFactory.fromBitmap(bitmap)));
  26.                 }
  27.                 cancleMap1.remove(cluster);
  28.             }
  29.             @Override
  30.             public void onFailureImpl(DataSource dataSource) {
  31.                 // No cleanup required here.
  32.                 System.out.println("shibai");
  33.             }
  34.         }, UiThreadImmediateExecutorService.getInstance());
  35.         cancleMap1.put(cluster, dataSource);
  36. }

很明显我这边解决了 baiduMap 在UI线程上添加图片阻塞问题， 添加强大的 fresco 第三方加载库，进行异步加载图片，接下来看图片下载完成后 执行setIconByCluster 函数：

</>复制代码 
  1. //异步回调回来的icon ，需要
  2.     public void setIconByCluster(String path, Cluster cluster, MarkerOptions markerOptions) {
  3.         markRemoveAndAddLock.lock();
  4.         Integer size = onReadyAddCluster.get(cluster);
  5.         if (size != null && cluster.getSize() == size) {
  6.             Marker marker = mClusterToMarker.get(cluster);
  7.             if (marker != null) {
  8.      //如果该图在屏幕上已经打了marker，那么替换icon即可，主要解决图片重新加载闪烁问题    
  9.               marker.setIcon(markerOptions.getIcon());
  10.             } else {
  11.             //打入新的Marker
  12.                 marker = mClusterManager.getClusterMarkerCollection().addMarker(markerOptions);
  13.             }
  14.             mMarkerToCluster.put(marker, cluster);
  15.             mClusterToMarker.put(cluster, marker);
  16.         }
  17.         markRemoveAndAddLock.unlock();
  18.     }
总结：

重点源码分析，基本上到这里结束。我们来撸一撸流程：

通过onMapStatusChangeFinish回调，去执行点聚合运算；

通过 getClusters把聚合后的结果集算出来；

通过CreateMarkerTask.perform() 把 marker打到屏幕上。

备注：
</>复制代码 
  1. 更多细节请看源代码，
    喜欢去帮忙start一下，谢谢！

github：
[https://github.com/zhangchaoj...

云服务器 GPU云服务器 ios访问相册权限 ios调用系统相册 离线地图功能 php开发地图功能

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/67435.html

相关文章

发表评论

登陆后可评论

0条评论

pakolagij

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<