天地圖之添加覆蓋物

原文首發於微信公衆號：jzman-blog，歡迎關注交流！

接着上一篇繼續來學習天地圖 Android SDK ，地圖開發中除了常見的定位需求，還有就是覆蓋物的添加，好比最近的項目是有關風險管控的，在地圖上就要顯示對應的風險點，下面的今天的內容：

1. 單個覆蓋物
2. 多個覆蓋物
3. 集合覆蓋物
4. 文字覆蓋物
5. 總結
6. 測試效果

單個覆蓋物

這裏單個覆蓋物的添加使用資源文件夾裏面的圖片做爲具體覆蓋物，下面是自定義的一個 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));
複製代碼

到此，添加多個覆蓋物就完成了。

總結

綜上所述，使用天地圖添加覆蓋物的通常步驟具體以下：

1. 建立具體覆蓋物的 Overlay
2. 初始化覆蓋物具體參數
3. 重寫 draw() 方法
4. 將該 Overlay 添加到 MapView 中

測試效果

能夠選擇關注微信公衆號：jzman-blog 獲取最新更新，一塊兒交流學習!