百度地图SDK Android版开发 9 覆盖物示例3批量点、海量点、点聚合
前言
前文介绍了如何在地图上添加一个Overlay，本文重点介绍如何批量添加和删除，海量点和点聚合的功能。
- 批量操作：一次性向地图上大批量添加Overlay的接口和一次性清除地图上的所有覆盖物（Overlay对象和infoWindow）的接口。
- 海量点：支持海量点图层绘制，用于批量展现坐标点数据，并支持点击事件。
- 点聚合：支持通过缩小地图层级，将定义范围内的大量标注点聚合显示成一个标注点。
相关的类和接口
批量添加和删除
百度地图BaiduMap地图类除了提供添加一个覆盖物的接口外，还提供了批量添加和删除的接口：
addOverlay接口可以向地图添加点、线、面、弧、圆和文本覆盖物。addOverlays接口可以一次性向地图上添加大批量的点、线、面等覆盖物。clear接口则一次性清除地图上的所有覆盖物（Overlay对象和infoWindow）。setOnMarkerClickListener和removeMarkerClickListener接口可以添加和移除Marker单击事件。
| 类型 | 方法 | 说明 |
|---|---|---|
| Overlay | addOverlay(OverlayOptions options) | 向地图添加一个 Overlay |
| List< Overlay > | addOverlays(List< OverlayOptions > options) | 向地图添加多个 Overlay |
| void | clear() | 清空地图所有的 Overlay 覆盖物以及 InfoWindow |
| void | setOnMarkerClickListener(BaiduMap.OnMarkerClickListener listener) | 设置地图 Marker 覆盖物点击事件监听者 自3.4.0版本起可设置多个监听对象， 停止监听时调用removeMarkerClickListener移除监听对象 |
| void | removeMarkerClickListener(BaiduMap.OnMarkerClickListener listener) | 移除一个地图 Marker 覆盖物点击事件监听者 |
海量点
MultiPoint海量点覆盖物，通过MultiPointOption类来设置海量点图层的属性。
- 部分覆盖物类关系图：
- 部分覆盖物选项类关系图：
BaiduMap类
百度地图SDKBaiduMap地图类与海量点相关的接口：
-
addOverlay接口可以向地图添加海量点。 -
setOnMultiPointClickListener接口设置海量点单击事件
| 类型 | 方法 | 说明 |
|---|---|---|
| void | setOnMultiPointClickListener(BaiduMap.OnMultiPointClickListener listener) | 设置地图 MultiPoint 覆盖物点击事件监听者 |
BaiduMap.OnMultiPointClickListener接口
// 地图MultiPoint覆盖物点击事件监听接口
public interface OnMultiPointClickListener {
/**
* 地图 MultiPoint 覆盖物点击事件监听函数
* @param point 被点击的 MultiPoint
* @param item 被点击的 MultiPointItem
* @return
*/
boolean onMultiPointClick(MultiPoint point, MultiPointItem item);
}
MultiPointOption 海量点选项
- getter
| 类型 | 方法 | 说明 |
|---|---|---|
| BitmapDescriptor | getIcon() | 获取 MultiPoint 覆盖物图标 |
| List< MultiPointItem > | getMultiPointItems() | 获取 MultiPoint 覆盖物数据集合 |
| float | getAnchorX() | 获取 MultiPoint 覆盖物水平方向锚点比例 |
| float | getAnchorY() | 获取 MultiPoint 覆盖物垂直方向锚点比例 |
| int | getPointSizeHeight() | 获取 MultiPoint 覆盖物纹理点的高度 |
| int | getPointSizeWidth() | 获取 MultiPoint 覆盖物纹理点的宽度 |
| boolean | isVisible() | 获取MultiPoint 覆盖物可见性 |
- setter
| 类型 | 方法 | 说明 |
|---|---|---|
| MultiPointOption | setIcon(BitmapDescriptor icon) | 设置 MultiPoint 覆盖物的图标 （必填） |
| MultiPointOption | setMultiPointItems(List< MultiPointItem > multiPointItems) | 添加海量点数据集合（必填） |
| MultiPointOption | setPointSize(int pointSizeWidth, int pointSizeHeight) | 纹理渲染大小，默认为icon图片大小 |
| MultiPointOption | setAnchor(float anchorX, float anchorY) | 设置 MultiPoint 覆盖物的锚点比例， 默认（0.5f, 0.5f）水平居中，垂直下对齐 |
| MultiPointOption | setClickable(boolean isClickable) | 设置MultiPoint是否可点击 |
| MultiPointOption | visible(boolean visible) | 设置MultiPoint 覆盖物可见性，默认 true 显示 |
MultiPointItem 海量点单个点对象
| 类型 | 方法 | 说明 |
|---|---|---|
MultiPointItem(LatLng point) | MultiPoint覆盖物单个点构造函数 | |
| LatLng | getPoint() | 获取MultiPoint覆盖物单个点经纬度 |
| String | getTitle() | 获取MultiPoint覆盖物单个点标题 |
| void | setTitle(String title) | 设置MultiPoint覆盖物单个点标题 |
点聚合
百度地图SDK点聚合部分已开放源码，位于Demo的clusterutil包中，可以下载后自行修改使用。
相关代码文件清单：
com/baidu
└── mapapi
└── clusterutil
├── MarkerManager.java
├── clustering
│ ├── Cluster.java
│ ├── ClusterItem.java
│ ├── ClusterManager.java
│ ├── algo
│ │ ├── Algorithm.java
│ │ ├── NonHierarchicalDistanceBasedAlgorithm.java
│ │ ├── PreCachingAlgorithmDecorator.java
│ │ └── StaticCluster.java
│ └── view
│ ├── ClusterRenderer.java
│ └── DefaultClusterRenderer.java
├── projection
│ ├── Bounds.java
│ ├── Point.java
│ └── SphericalMercatorProjection.java
├── quadtree
│ └── PointQuadTree.java
└── ui
├── IconGenerator.java
├── RotationLayout.java
└── SquareTextView.java
相关资源文件清单：
└── res
├── layout
│ └── text_bubble.xml
├── raw
│ └── locations.json
└── values
└── styles.xml
示例
界面布局
- 布局文件
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MapMarkersActivity">
<com.baidu.mapapi.map.MapView
android:id="@+id/bmapView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:clickable="true"
app:layout_constraintBottom_toTopOf="@id/bottomView"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.LinearLayoutCompat
android:id="@+id/bottomView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="@id/bmapView">
<RadioGroup
android:id="@+id/RadioGroup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/background_dark"
android:gravity="center_horizontal"
android:orientation="horizontal"
android:paddingHorizontal="10dp">
<RadioButton
android:id="@+id/bulk"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:checked="true"
android:onClick="setMarkerFlag"
android:text="批量点"
android:textColor="@color/white"
android:textStyle="bold" />
<RadioButton
android:id="@+id/multiPoint"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="setMarkerFlag"
android:text="海量点"
android:textColor="@color/white"
android:textStyle="bold" />
<RadioButton
android:id="@+id/cluster"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="setMarkerFlag"
android:text="点聚合"
android:textColor="@color/white"
android:textStyle="bold" />
<RadioButton
android:id="@+id/clear"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="setMarkerFlag"
android:text="清除"
android:textColor="@color/white"
android:textStyle="bold" />
</RadioGroup>
</androidx.appcompat.widget.LinearLayoutCompat>
</androidx.constraintlayout.widget.ConstraintLayout>
MapMarks类
- 以下是
MapMarks部分代码。
常量
public static final String BULK = "Bulk"; // 批量点
public static final String MULTI_POINT = "MultiPoint"; // 海量点
public static final String CLUSTER = "Cluster"; // 点聚合
成员变量
// 覆盖物列表
List<Overlay> overlays = new ArrayList<>();
// 海量点选中高亮
Marker selectedMarker;
// 点聚合管理类
ClusterManager<MyClusterItem> clusterManager;
// 选中的状态
List<String> selectedFlags = new ArrayList<>();
// 气泡图标
ArrayList<BitmapDescriptor> bitmaps = new ArrayList<>();
// 点图标
BitmapDescriptor dotBitmap;
// Marker点击事件
BaiduMap.OnMarkerClickListener bulkMarkerClickListener;
// 海量点点击事件
BaiduMap.OnMultiPointClickListener multiPointClickListener;
初始化
- 初始化点聚合管理类
// 初始化点聚合管理类
clusterManager = new ClusterManager<>(context, map);
// 设置地图监听，当地图状态发生改变时，进行点聚合运算
map.setOnMapStatusChangeListener(clusterManager);
selectedFlags.add(BULK);
int[] drawableIds = BubbleIcons.Number;
for (int drawableId : drawableIds) {
BitmapDescriptor bitmap = BitmapDescriptorFactory.fromResource(drawableId);
bitmaps.add(bitmap);
}
dotBitmap = BitmapDescriptorFactory.fromResource(CircleIcons.BLueDot[0]);
创建覆盖物
public void addMarkers() {
if (selectedFlags.isEmpty())
return;
for (String flag : selectedFlags) {
switch (flag) {
case BULK:
addBulk();
break;
case MULTI_POINT:
addMultiPoint();
break;
case CLUSTER:
addCluster();
break;
}
}
}
批量点
- 创建OverlayOptions的集合
- 在地图上批量添加覆盖物
- 设置Marker单击事件
private void addBulk() {
// 构造大量坐标数据
List<LatLng> points = new ArrayList<>();
points.add(new LatLng(39.97923, 116.357428));
points.add(new LatLng(39.94923, 116.397428));
points.add(new LatLng(39.97923, 116.437428));
points.add(new LatLng(39.92353, 116.490705));
points.add(new LatLng(40.023537, 116.289429));
points.add(new LatLng(40.022211, 116.406137));
// 创建OverlayOptions的集合
List<OverlayOptions> optionsList = new ArrayList<>();
for (int i = 0; i < points.size(); ++i) {
// 创建OverlayOptions属性
OverlayOptions option = new MarkerOptions()
.position(points.get(i))
.icon(bitmaps.get(i));
// 将OverlayOptions添加到list
optionsList.add(option);
}
// 在地图上批量添加
List<Overlay> newOverlays = map.addOverlays(optionsList);
overlays.addAll(newOverlays);
// Marker单击事件
if (bulkMarkerClickListener == null) {
bulkMarkerClickListener = new BaiduMap.OnMarkerClickListener() {
// marker被点击时回调的方法
// 若响应点击事件，返回true，否则返回false
// 默认返回false
@Override
public boolean onMarkerClick(Marker marker) {
showToast("点击 marker");
return true;
}
};
}
map.setOnMarkerClickListener(bulkMarkerClickListener);
}
海量点
- 加载大量点数据（参考自官网示例Demo）
- 设置海量点数据
- 添加海量点覆盖物
- 设置海量点单击事件
private void addMultiPoint() {
// 加载大量点(参考官网示例Demo)
List<LatLng> points = getLocations();
ArrayList<MultiPointItem> items = new ArrayList<>();
for (int i = 0; i < points.size(); i++) {
// 创建覆盖物单个点对象
MultiPointItem item = new MultiPointItem(points.get(i));
items.add(item);
}
// 设置海量点数据
MultiPointOption option = new MultiPointOption();
option.setMultiPointItems(items);
option.setIcon(dotBitmap);
// 添加海量点覆盖物
MultiPoint multiPoint = (MultiPoint) map.addOverlay(option);
overlays.add(multiPoint);
// 海量点单击事件
if (multiPointClickListener == null) {
multiPointClickListener = new BaiduMap.OnMultiPointClickListener() {
@Override
public boolean onMultiPointClick(MultiPoint point, MultiPointItem item) {
if (selectedMarker != null)
selectedMarker.remove();
MarkerOptions markerOptions = new MarkerOptions();
markerOptions.position(item.getPoint());
markerOptions.icon(bitmaps.get(0));
selectedMarker = (Marker) map.addOverlay(markerOptions);
return true;
}
};
map.setOnMultiPointClickListener(multiPointClickListener);
}
}
点聚合
private void addCluster() {
List<LatLng> points = new ArrayList<>();
points.add(new LatLng(39.963175, 116.400244));
points.add(new LatLng(39.942821, 116.369199));
points.add(new LatLng(39.939723, 116.425541));
points.add(new LatLng(39.906965, 116.401394));
points.add(new LatLng(39.956965, 116.331394));
points.add(new LatLng(39.886965, 116.441394));
points.add(new LatLng(39.996965, 116.411394));
List<MyClusterItem> items = new ArrayList<>();
for (int i = 0; i < points.size(); i++) {
// 创建覆盖物单个点对象
items.add(new MyClusterItem(points.get(i), bitmaps.get(i)));
}
clusterManager.addItems(items);
clusterManager.cluster();
// 点聚合单击事件
map.setOnMarkerClickListener(clusterManager);
clusterManager.setOnClusterClickListener(new ClusterManager.OnClusterClickListener<MyClusterItem>() {
@Override
public boolean onClusterClick(Cluster<MyClusterItem> cluster) {
showToast("有" + cluster.getSize() + "个点");
return true;
}
});
clusterManager.setOnClusterItemClickListener(new ClusterManager.OnClusterItemClickListener<MyClusterItem>() {
@Override
public boolean onClusterItemClick(MyClusterItem item) {
showToast("点击单个Item");
return true;
}
});
}
- 实现
ClusterItem类
// ClusterItem接口的实现类
public static class MyClusterItem implements ClusterItem {
LatLng position;
BitmapDescriptor bitmap;
public MyClusterItem(LatLng position, BitmapDescriptor bitmap) {
this.position = position;
this.bitmap = bitmap;
}
@Override
public LatLng getPosition() {
return position;
}
@Override
public BitmapDescriptor getBitmapDescriptor() {
return bitmap;
}
}
移除覆盖物
public void removeOverlay() {
// 批量删除添加的多个 Overlay
//map.removeOverLays(overlays);
// 清空地图所有的 Overlay 覆盖物以及 InfoWindow
// map.clear();
// 删除覆盖物
for (Overlay overlay : overlays) {
overlay.remove();
}
overlays.clear();
if (selectedMarker != null)
selectedMarker.remove();
selectedMarker = null;
// 删除点聚合
clusterManager.clearItems();
clusterManager.cluster();
// 避免批量与点聚合单击事件冲突
map.removeMarkerClickListener(bulkMarkerClickListener);
map.removeMarkerClickListener(clusterManager);
}
设置属性
public void setFlags(String flag) {
selectedFlags.clear();
if (flag != null)
selectedFlags.add(flag);
removeOverlay();
addMarkers();
}
加载地图和移除地图
public void onMapLoaded() {
addMarkers();
}
public void onMapDestroy() {
removeOverlay();
for (BitmapDescriptor bitmap : bitmaps) {
bitmap.recycle();
}
bitmaps = null;
if (dotBitmap != null)
dotBitmap.recycle();
}
MapMarkersActivity类
- 以下是
MapMarkersActivity类部分代码
控件响应事件
public void setMarkerFlag(View view) {
boolean checked = ((RadioButton) view).isChecked();
if (!checked)
return;
int id = view.getId();
String flag;
if (id == R.id.bulk)
flag = MapMarkers.BULK;
else if (id == R.id.multiPoint)
flag = MapMarkers.MULTI_POINT;
else if (id == R.id.cluster)
flag = MapMarkers.CLUSTER;
else if (id == R.id.clear)
flag = null;
else
return;
mapMarkers.setFlags(flag);
}
运行效果图
| 批量点 | 海量点 | 点聚合 |
|---|---|---|
 |  |  |
 |  |
6821
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
