百度地图之标注物聚合

喜欢ヅ旅行 2022-01-09 08:11 514阅读 0赞

在博客《[百度地图查询视野范围内的建筑物][Link 1]》当中描述了如何查询视野范围内的建筑物，可以减少地图加载标注物的数量，提升速度。但是当地图的zoom级很小时，会出现标注物重叠的现象，不是很美观，所以下面的文章将介绍地图标注物如何根据zoom的大小聚合显示。

俗话说站在巨人的肩膀上将事半功倍，在写android的百度地图标注物聚合时，我在网上也进行了大量的查询，发现标注物聚合的算法很早就有人写了，不过他们是js或者是Google地图c\#版的。借鉴他们的想法，我写了android的这版代码与大家一起分享。

一、牛人们的想法

下面是我参考的有关的博客，下面将一一列举

1.MarkerCluster之百度地图版  [http://hi.baidu.com/liongg/item/d8adece188fbfb11585dd89f][http_hi.baidu.com_liongg_item_d8adece188fbfb11585dd89f]

2.Marker Cluster面面观 http://hi.baidu.com/liongg/item/a380cc95bd70c2bdcd80e581

3.GoogleMap标注物聚合解决办法 http://www.svennerberg.com/2009/01/handling-large-amounts-of-markers-in-google-maps/

4.百度地图官网上已经有JS版的标注物聚合实例与原文件，建议看百度地图上的代码，规范且函数注释明确。

百度地图javascript开源库：  http://developer.baidu.com/map/library.htm

![Image 1][]

![SouthEast][]

二、我的思路

1.下面以一个流程图来表述我的想法。

![SouthEast 1][]

2.下面贴出代码

//cluster聚合器类 package com.zhl.map; import java.util.ArrayList; import java.util.List; import android.graphics.Bitmap; import android.graphics.Point; import android.graphics.drawable.BitmapDrawable; import android.util.Log; import android.view.LayoutInflater; import android.view.View; import android.widget.TextView; import baidumapsdk.demo.R; import com.baidu.mapapi.cloud.Bounds; import com.baidu.mapapi.map.MapView; import com.baidu.mapapi.map.OverlayItem; import com.baidu.mapapi.utils.DistanceUtil; import com.baidu.platform.comapi.basestruct.GeoPoint; import com.zhl.activity.MarkerClusterActivity; import com.zhl.util.MapUtils; public class Cluster{ private MarkerClusterActivity mMarkCluster; private MapView mMapView; private int mMinClusterSize; private Boolean isAverageCenter; private int mGridSize; private double mDistance; private List<ClusterMarker> mMarkers; public Cluster(MarkerClusterActivity markCluster,MapView mapView ,int minClusterSize,Boolean isAverageCenter ,int mGridSize,double mDistance) { this.mMarkCluster = markCluster; this.mMapView = mapView; this.mMinClusterSize = minClusterSize; this.isAverageCenter = isAverageCenter; this.mGridSize = mGridSize; this.mDistance = mDistance; mMarkers = new ArrayList<ClusterMarker>(); } public List<OverlayItem> createCluster(List<OverlayItem> markerList){ this.mMarkers.clear(); List<OverlayItem> itemList = new ArrayList<OverlayItem>(); for(int i=0;i<markerList.size();i++){ addCluster(markerList.get(i)); } for(int i=0;i<mMarkers.size();i++){ ClusterMarker cm = mMarkers.get(i); setClusterDrawable(cm); OverlayItem oi = new OverlayItem(cm.getmCenter(),cm.getTitle(),cm.getSnippet()); oi.setMarker(cm.getMarker()); itemList.add(oi); } return itemList; } private void addCluster(OverlayItem marker){ GeoPoint markGeo = marker.getPoint(); if(mMarkers.size()==0){ ClusterMarker clusterMarker = new ClusterMarker(marker.getPoint(), marker.getTitle(), marker.getSnippet()); clusterMarker.setMarker(marker.getMarker()); clusterMarker.AddMarker(marker, isAverageCenter); Bounds bound = new Bounds(markGeo.getLatitudeE6(),markGeo.getLongitudeE6(),markGeo.getLatitudeE6(),markGeo.getLongitudeE6()); bound = MapUtils.getExtendedBounds(mMapView, bound, mGridSize); clusterMarker.setmGridBounds(bound); mMarkers.add(clusterMarker); }else{ ClusterMarker clusterContain = null; double distance = mDistance; for(int i=0;i<mMarkers.size();i++){ ClusterMarker clusterMarker = mMarkers.get(i); GeoPoint center = clusterMarker.getmCenter(); double d = DistanceUtil.getDistance(center, marker.getPoint()); if(d<distance){ distance = d; clusterContain = clusterMarker; } } if(clusterContain == null||!isMarkersInCluster(markGeo, clusterContain.getmGridBounds())){ ClusterMarker clusterMarker = new ClusterMarker(marker.getPoint(), marker.getTitle(), marker.getSnippet()); clusterMarker.AddMarker(marker, isAverageCenter); clusterMarker.AddMarker(marker, isAverageCenter); Bounds bound = new Bounds(markGeo.getLatitudeE6(),markGeo.getLongitudeE6(),markGeo.getLatitudeE6(),markGeo.getLongitudeE6()); bound = MapUtils.getExtendedBounds(mMapView, bound, mGridSize); clusterMarker.setmGridBounds(bound); mMarkers.add(clusterMarker); }else{ clusterContain.AddMarker(marker, isAverageCenter); } } } private void setClusterDrawable(ClusterMarker clusterMarker){ View drawableView = LayoutInflater.from(mMarkCluster).inflate( R.layout.drawable_mark, null); TextView text = (TextView) drawableView.findViewById(R.id.drawble_mark); int markNum = clusterMarker.getmMarkers().size(); if(markNum>=2){ text.setText(markNum+""); if(markNum<11){ text.setBackgroundResource(R.drawable.m0); }else if(markNum>10&&markNum<21){ text.setBackgroundResource(R.drawable.m1); }else if(markNum>20&&markNum<31){ text.setBackgroundResource(R.drawable.m2); }else if(markNum>30&&markNum<41){ text.setBackgroundResource(R.drawable.m3); }else{ text.setBackgroundResource(R.drawable.m4); } Bitmap bitmap = MapUtils.convertViewToBitmap(drawableView); clusterMarker.setMarker(new BitmapDrawable(bitmap)); }else{ } } private Boolean isMarkersInCluster(GeoPoint markerGeo,Bounds bound){ if(markerGeo.getLatitudeE6()>bound.leftBottom.getLatitudeE6() &&markerGeo.getLatitudeE6()<bound.rightTop.getLatitudeE6() &&markerGeo.getLongitudeE6()>bound.rightTop.getLongitudeE6() &&markerGeo.getLongitudeE6()<bound.leftBottom.getLongitudeE6()){ return true; } return false; } }

3.工程demo代码下载，[地图标注物聚合.zip][.zip]

4.下面是程序的实例图片

![SouthEast 2][]![SouthEast 3][]![SouthEast 4][]![SouthEast 5][]

[Link 1]: http://blog.csdn.net/fengshuiyue/article/details/9155463
[http_hi.baidu.com_liongg_item_d8adece188fbfb11585dd89f]: http://hi.baidu.com/liongg/item/d8adece188fbfb11585dd89f
[Image 1]: 
[SouthEast]: /images/20220109/a8e0e60134f1487c81ac97ce0d5a7529.png
[SouthEast 1]: /images/20220109/0e775d81f4914ae68eeb340e713e5825.png
[.zip]: http://download.csdn.net/detail/fengshuiyue/5754703
[SouthEast 2]: https://img-blog.csdn.net/20130715091626171?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZmVuZ3NodWl5dWU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 3]: https://img-blog.csdn.net/20130715091640343?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZmVuZ3NodWl5dWU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 4]: https://img-blog.csdn.net/20130715091651390?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZmVuZ3NodWl5dWU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 5]: /images/20220109/841751793281464dae4ecd693537f0e0.png