天地图にオーバーレイを追加する

最近多少还是会有一点焦虑，其实很大一部分原因是考虑的比较多罢了，适当的放弃一些东西，一切就会变的明朗起来。

接着上一篇继续来学习天地图 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 に追加

テスト効果#

天地图にオーバーレイを追加することはこれで終了です。