본문 바로가기

Android/Overlay with MapView

Overlay with MapView

Overlay 클래스를 사용하여 MapView 상의 지도 위에 기호나 이미지를 표현하는 예

MapView 는 Google Maps 로부터 지도를 다운로드하여 화면에 출력하는 기능을 한다.

화면에 출력된 지도위에 이미지와 같은 것을 출력하기 위해서는 com.google.android.maps.Overlay 클래스의
객체를 mapView.getOverlays()호출결과 리턴된 List<Overlay>에 add()를 사용하여 추가해주면 된다.

Google API Reference : http://code.google.com/intl/ko/android/add-ons/google-apis/reference/index.html

네비게이션에서는 지도상에 여러가지 기호나 이미지들을 보여줄 필요가 있는데, Overlay 클래스는 이런 때에 유용할 것이다.

Overlay 클래스는 KeyEvent 나 탭 이벤트를 처리하는 메소드도 있고, 지도위에 아이템을 그려주는 draw() 메소드도 가지고 있다. 개발자는 Overlay 클래스의 draw() 메소드를 오버라이드하여 원하는 아이템을 지도 위에 그리는 효과를 낼 수 있다.


Overlay 클래스 draw 메소드의 원형
draw(android.graphics.Canvas canvas, MapView mapView, boolean shadow)


Overlay 클래스의 draw()메소드 오버라이드 예

/** 지도위의 특정 위치에 도형과 문자열을 출력한다 */

public void draw(Canvas canvas, MapView mapView, boolean shadow) {
 
    super.draw(canvas, mapView, shadow);
 
    Paint paint1 = new Paint();
    Paint paint2 = new Paint();

    paint1.setARGB(255, 255, 0, 0); // a, r, g, b
    paint2.setARGB(255, 255, 0, 0);

    // 아래에서 사용된 아규먼트는 위도, 경도 정보(40.756054)에서 가운데 '.' 을 뺀 것
    GeoPoint geoPoint = new GeoPoint(40756054, -73986951);
 
    Point pt = new Point();
 
    mapView.getProjection().toPixels(geoPoint, pt); // 지리적 위치를 화면상의 픽셀위치로 변환

   //  fromPixels(int x, int y) : 화면상의 x,y 좌표로부터 지리정보(GeoPoint)를 얻는다.

   //  toPixels(GeoPoint in, android.graphics.Point out) : 지리정보(GeoPoint)를 화면상의 픽셀좌표로 변환

    // drawCircle(float cx, float cy, float radius, Paint paint) ;
    // drawLine(float startX, float startY, float stopX, float stopY, Paint paint) ;
    // drawText(String text, float x, float y, Paint paint) ;

    canvas.drawCircle(pt.x, pt.y, 20, paint1);
    canvas.drawText("강남구청역", pt.x+30, pt.y+30, paint2);   
 }

 

Android 에서 화면에 무언가를 그려주기 위해서는 다음과 같은 것들을 요구한다.

 Canvas 클래스의 drawXXX()메소드, Paint 클래스(색상정보), 도형이나 Bitmap

위와 같은 Overlay 클래스를 MyOverlay.java 에 작성했다면 MapView에 적용하기 위해서는
mapView.getOverlays()를 호출하여 java.util.List<Overlay> 를 리턴받아서 그 리스트에 MyOverlay 객체를 전달하면 된다.


MapActivity 의 onCreate() 를 다음과 같이 오버라이드 한다.

public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.main);
 mapView = (MapView) findViewById(R.id.mapview);
 mapView.setBuiltInZoomControls(true);

 // 위성사진이 출력됨, 지도식 표현이 아니라....
 mapView.setSatellite(true); // mapView.setStreetView(true) 도 테스트요

 // 아래의 위도, 경도 좌표는 '37.517180' 에서 숫자 사이의 '.' 을 제거한 표현임
 GeoPoint geoPoint=new GeoPoint(37517180,127041268); // 강남구청역
 MapController mc=mapView.getController();
 mc.animateTo(geoPoint);
 // animateTo(GeoPoint point) : 해당 지리정보(GeoPoint)로 화면을 애니메이션 이동시킨다.
// setCenter(GeoPoint point) : 해당 지리정보(GeoPoint)로 화면을 이동시킨다.
 mc.setZoom(15);

 // 지도위에 표현될 것들을 그린다
 mapView.getOverlays().add(new MyOverlay());
}

실제로 실행가능한 예제는 여기를 참조하세요.

지도위에 출력할 아이템이 리소스에 있는 이미지라면 다음과 같은 방법으로 Bitmap 클래스를 이용하여 MapView위에 표현할 수가 있다.
아래의첫번째 아규먼트,  mContext는 Activity 클래스의 레퍼런스이다.
Bitmap viewBgrnd = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.blackBgrnd);

위와같이 얻어낸 Bitmap오브젝트는 Canvas의 drawBitmap()으로 MapView의 지도위에 나타낼 수 있다.
drawBitmap(Bitmap bitmap, float left, float top, Paint paint) ;

이미지를 지도위에 출력하는 예제는 여기를 참고하세요

다수개의 아이템을 동시에 지도위에 그릴 필요가 있다면 ItemizedOverlay 클래스와 OverlayItem 클래스를 사용하면 된다.