原文首發於微信公衆號：jzman-blog，歡迎關注交流！
接着上一篇繼續來學習天地圖 Android SDK ，地圖開發中除了常見的定位需求，還有就是覆蓋物的添加，比如最近的項目是有關風險管控的，在地圖上就要顯示對應的風險點，下面的今天的內容：
- 單個覆蓋物
- 多個覆蓋物
- 集合覆蓋物
- 文字覆蓋物
- 總結
- 測試效果
單個覆蓋物
這裏單個覆蓋物的添加使用資源文件夾裏面的圖片作爲具體覆蓋物，下面是自定義的一個 Overlay，具體如下：
/**
* Powered by jzman.
* Created on 2018/6/25 0025.
*/
public class MOverlay extends Overlay{
private Drawable mDrawable;
private DrawableOption mDrawableOption;
private GeoPoint mGeoPoint;
public MOverlay(Context context) {
mDrawable = context.getResources().getDrawable(R.drawable.selected_marker);
mDrawableOption = new DrawableOption();
//設置錨點位置
mDrawableOption.setAnchor(0.5f,1.0f);
//設置旋轉角度
mDrawableOption.setRotate(0);
//設置狀態
mDrawableOption.setState(DrawableOption.STATE_NORMAL);
//設置多少幀刷新一次圖片資源
mDrawableOption.setPeriod(200);
}
@Override
public boolean draw(GL10 gl, MapView mapView, boolean shadow, long when) {
MapViewRender render = mapView.getMapViewRender();
render.drawDrawable(gl,mDrawableOption,mDrawable,mGeoPoint);
return true;
}
@Override
public boolean onTap(GeoPoint p, MapView mapView) {
//指定當前點擊的位置添加覆蓋物，也可以自己指定
mGeoPoint = p;
return true;
}
}然後，將該 Overlay 添加到 MapVIew 中，具體如下：
mapView.addOverlay(new MOverlay(this));
到此，添加單個覆蓋物就完成了。
多個覆蓋物
開發中經常需要在地圖上標註一組數據相關的位置，此時就需要在地圖上添加多個覆蓋物了，添加一組相似類型的覆蓋物使用到抽象類 ItemizedOverlay，下面是自定義多個覆蓋物的一個 Overlay，具體如下：
/**
* Powered by jzman.
* Created on 2018/6/25 0025.
*/
public class MItemOverlay2 extends ItemizedOverlay<OverlayItem> {
private MapView mapView;
private View view;
private TextView tvItemOverlay;
private ArrayList<OverlayItem> items;
private ArrayList<DefaultGeoPoint<MarkerBean>> points;
public MItemOverlay2(Drawable defaultMarker, ArrayList<DefaultGeoPoint<MarkerBean>> geoPoints, MapView mapView, View view) {
super(defaultMarker);
this.mapView = mapView;
this.view = view;
tvItemOverlay = view.findViewById(R.id.tvItemOverlayData);
items = new ArrayList<>();
points = geoPoints;
for (int i = 0; i < points.size(); i++) {
OverlayItem overlayItem = new OverlayItem(points.get(i),
points.get(i).getT().getTitle(),
points.get(i).getT().getSnippet());
overlayItem.setMarker(defaultMarker);
items.add(overlayItem);
}
populate();
}
/**
* 覆蓋物條目總數
* @return
*/
@Override
public int size() {
return items.size();
}
/**
* 創建覆蓋物條目
* @param i
* @return
*/
@Override
protected OverlayItem createItem(int i) {
return items.get(i);
}
/**
* 處理點擊事件
* @param index
* @return
*/
@Override
protected boolean onTap(int index) {
if (index == -1) return false;
mapView.updateViewLayout(view, new MapView.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.WRAP_CONTENT,
points.get(index),
MapView.LayoutParams.BOTTOM_CENTER));
tvItemOverlay.setText(points.get(index).getT().getTitle());
view.setVisibility(View.VISIBLE);
return true;
}
}設置點擊每個覆蓋物彈出的 View 必須已經被添加到 MapView 中，具體如下：
mapView.addView(view, new MapView.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.WRAP_CONTENT,
null,
MapView.LayoutParams.TOP_LEFT));如果沒有出現添加，則會出錯，出錯信息如下：
> java.lang.IllegalArgumentException: Given view not a child of com.tianditu.android.maps.MapView{ac3dbd7 V.E...... ........ 0,192-1080,1692 #7f070050 app:id/mapView}然後，將該 Overlay 添加到 MapVIew 中，具體如下：
Drawable drawable1 = getResources().getDrawable(R.drawable.selected_marker);
MItemOverlay2 mItemOverlay2 = new MItemOverlay2(drawable1, markers, mapView, view);
mapView.getOverlays().add(mItemOverlay2);到此，添加多個覆蓋物就完成了。
幾何覆蓋物
集合覆蓋物主要就是使用幾何圖形標註相關位置點，下面自定義了一個 Overlay，通過點擊地圖位置添加幾何覆蓋物，效果可參考文末測試效果圖，具體如下：
/**
* Powered by jzman.
* Created on 2018/6/25 0025.
*/
public class GeometricOverlay extends Overlay{
private CircleArcOption mCircleArcOption;
private GeoPoint mGeoPoint;
public GeometricOverlay() {
mCircleArcOption = new CircleArcOption();
//設置覆蓋物是否是虛線
mCircleArcOption.setDottedLine(true);
//設置填充顏色
mCircleArcOption.setFillColor(Color.GRAY);
//設置邊框顏色
mCircleArcOption.setStrokeColor(Color.BLACK);
//設置邊框寬度
mCircleArcOption.setStrokeWidth(5);
//是否使用中心點,設置true,繪製出的是扇形，反之則是圓弧
mCircleArcOption.setUseCenter(true);
//設置起始角度以及掃描角度
mCircleArcOption.setAngle(0,100);
}
@Override
public boolean draw(GL10 gl, MapView mapView, boolean shadow, long when) {
MapViewRender render = mapView.getMapViewRender();
render.drawCircleArc(gl,mCircleArcOption,mGeoPoint,1000);
return true;
}
@Override
public boolean onTap(GeoPoint p, MapView mapView) {
//指定當前點擊的位置添加覆蓋物，也可以自己指定
mGeoPoint = p;
return true;
}
}然後，將該 Overlay 添加到 MapVIew 中，具體如下：
mapView.addOverlay(new GeometricOverlay());到此，添加多個覆蓋物就完成了。
文字覆蓋物
文字覆蓋物就是在相應的位置點添加文字，下面自定義了一個 Overlay，通過點擊地圖位置添加文字覆蓋物，效果可參考文末測試效果圖，具體如下：
/**
* Powered by jzman.
* Created on 2018/6/25 0025.
*/
public class TextOverlay extends Overlay{
private FontOption mFontOption;
private GeoPoint mGeoPoint;
public TextOverlay(Context context) {
mFontOption = new FontOption();
//設置填充顏色
mFontOption.setFillColor(Color.RED);
//設置字體顏色、字體大小
mFontOption.setFontColor(Color.BLACK);
mFontOption.setFontSize(60);
//設置文字邊框寬度、邊框顏色
mFontOption.setStrokeWidth(4);
mFontOption.setStrokeColor(Color.GRAY);
//設置文字旋轉角度
mFontOption.setTextRotate(60);
//設置字體
Typeface typeface = Typeface.createFromAsset(context.getAssets(), "font/font.ttf");
mFontOption.setFontTypeface(typeface);
}
@Override
public boolean draw(GL10 gl, MapView mapView, boolean shadow, long when) {
MapViewRender render = mapView.getMapViewRender();
if (mGeoPoint!=null){
render.drawText(gl,mFontOption,"這是文字覆蓋物",mGeoPoint);
}
return true;
}
@Override
public boolean onTap(GeoPoint p, MapView mapView) {
//指定當前點擊的位置添加覆蓋物，也可以自己指定
mGeoPoint = p;
return true;
}
}然後，將該 Overlay 添加到 MapVIew 中，具體如下：
mapView.addOverlay(new TextOverlay(this));到此，添加多個覆蓋物就完成了。
總結
綜上所述，使用天地圖添加覆蓋物的一般步驟具體如下：
- 創建具體覆蓋物的 Overlay
- 初始化覆蓋物具體參數
- 重寫 draw() 方法
- 將該 Overlay 添加到 MapView 中
測試效果
可以選擇關注微信公衆號：jzman-blog 獲取最新更新，一起交流學習!
