百度地图之自定义绘制功能

我们可以在地图上绘制各种自定义的图形,包括点、折线、圆、多边形等等,尤其绘制点和折线非常实用,点可以用来标识所处的位置,折线可以用来描述走过的轨迹,结合前面GPS定位功能可以做出一些非常有意思的应用,下面应用百度Demo实现绘制的基本功能,代码如下:

Activity:

[java][/java] view plaincopy

  1. package com.home;
  2. import android.app.Activity;
  3. import android.os.Bundle;
  4. import android.view.View;
  5. import android.view.View.OnClickListener;
  6. import android.widget.Button;
  7. import com.baidu.mapapi.map.Geometry;
  8. import com.baidu.mapapi.map.Graphic;
  9. import com.baidu.mapapi.map.GraphicsOverlay;
  10. import com.baidu.mapapi.map.MapView;
  11. import com.baidu.mapapi.map.Symbol;
  12. import com.baidu.mapapi.map.TextItem;
  13. import com.baidu.mapapi.map.TextOverlay;
  14. import com.baidu.platform.comapi.basestruct.GeoPoint;
  15. /**
  16.  * 此demo用来展示如何在地图上用GraphicsOverlay添加点、线、多边形、圆 同时展示如何在地图上用TextOverlay添加文字
  17.  *
  18.  */
  19. public class GeometryActivity extends Activity implements OnClickListener {
  20.     // 地图相关
  21.     private MapView mMapView = null;
  22.     private Button resetBtn = null;
  23.     private Button clearBtn = null;
  24.     @Override
  25.     public void onCreate(Bundle savedInstanceState) {
  26.         super.onCreate(savedInstanceState);
  27.         setContentView(R.layout.activity_geometry);
  28.         CharSequence titleLable = “自定义绘制功能”;
  29.         setTitle(titleLable);
  30.         // 初始化地图
  31.         mMapView = (MapView) findViewById(R.id.bmapView);
  32.         mMapView.getController().setZoom(12.5f);
  33.         mMapView.getController().enableClick(true);
  34.         // UI初始化
  35.         clearBtn = (Button) findViewById(R.id.btn_clear);
  36.         resetBtn = (Button) findViewById(R.id.btn_reset);
  37.         clearBtn.setOnClickListener(this);
  38.         resetBtn.setOnClickListener(this);
  39.         resetBtn.setEnabled(false);
  40.         // 界面加载时添加绘制图层
  41.         addCustomElementsDemo();
  42.     }
  43.     @Override
  44.     public void onClick(View v) {
  45.         if (v == clearBtn) {
  46.             clearClick();
  47.             clearBtn.setEnabled(false);
  48.             resetBtn.setEnabled(true);
  49.         }
  50.         if (v == resetBtn) {
  51.             resetClick();
  52.             clearBtn.setEnabled(true);
  53.             resetBtn.setEnabled(false);
  54.         }
  55.     }
  56.     /**
  57.      * 清除所有图层
  58.      */
  59.     public void clearClick() {
  60.         mMapView.getOverlays().clear();
  61.     }
  62.     /**
  63.      * 添加绘制元素
  64.      */
  65.     public void resetClick() {
  66.         addCustomElementsDemo();
  67.     }
  68.     /**
  69.      * 添加点、线、多边形、圆、文字
  70.      */
  71.     public void addCustomElementsDemo() {
  72.         GraphicsOverlay graphicsOverlay = new GraphicsOverlay(mMapView);
  73.         mMapView.getOverlays().add(graphicsOverlay);
  74.         // 添加点
  75.         graphicsOverlay.setData(drawPoint());
  76.         // 添加折线
  77.         graphicsOverlay.setData(drawLine());
  78.         // 添加多边形
  79.         graphicsOverlay.setData(drawPolygon());
  80.         // 添加圆
  81.         graphicsOverlay.setData(drawCircle());
  82.         // 绘制文字
  83.         TextOverlay textOverlay = new TextOverlay(mMapView);
  84.         mMapView.getOverlays().add(textOverlay);
  85.         textOverlay.addText(drawText());
  86.         // 执行地图刷新使生效
  87.         mMapView.refresh();
  88.     }
  89.     /**
  90.      * 绘制折线,该折线状态随地图状态变化
  91.      *
  92.      * @return 折线对象
  93.      */
  94.     public Graphic drawLine() {
  95.         double mLat = 39.97923;
  96.         double mLon = 116.357428;
  97.         int lat = (int) (mLat * 1E6);
  98.         int lon = (int) (mLon * 1E6);
  99.         GeoPoint pt1 = new GeoPoint(lat, lon);
  100.         mLat = 39.94923;
  101.         mLon = 116.397428;
  102.         lat = (int) (mLat * 1E6);
  103.         lon = (int) (mLon * 1E6);
  104.         GeoPoint pt2 = new GeoPoint(lat, lon);
  105.         mLat = 39.97923;
  106.         mLon = 116.437428;
  107.         lat = (int) (mLat * 1E6);
  108.         lon = (int) (mLon * 1E6);
  109.         GeoPoint pt3 = new GeoPoint(lat, lon);
  110.         // 构建线
  111.         Geometry lineGeometry = new Geometry();
  112.         // 设定折线点坐标
  113.         GeoPoint[] linePoints = new GeoPoint[3];
  114.         linePoints[0] = pt1;
  115.         linePoints[1] = pt2;
  116.         linePoints[2] = pt3;
  117.         lineGeometry.setPolyLine(linePoints);
  118.         // 设定样式
  119.         Symbol lineSymbol = new Symbol();
  120.         Symbol.Color lineColor = lineSymbol.new Color();
  121.         lineColor.red = 255;
  122.         lineColor.green = 0;
  123.         lineColor.blue = 0;
  124.         lineColor.alpha = 255;
  125.         lineSymbol.setLineSymbol(lineColor, 10);
  126.         // 生成Graphic对象
  127.         Graphic lineGraphic = new Graphic(lineGeometry, lineSymbol);
  128.         return lineGraphic;
  129.     }
  130.     /**
  131.      * 绘制多边形,该多边形随地图状态变化
  132.      *
  133.      * @return 多边形对象
  134.      */
  135.     public Graphic drawPolygon() {
  136.         double mLat = 39.93923;
  137.         double mLon = 116.357428;
  138.         int lat = (int) (mLat * 1E6);
  139.         int lon = (int) (mLon * 1E6);
  140.         GeoPoint pt1 = new GeoPoint(lat, lon);
  141.         mLat = 39.91923;
  142.         mLon = 116.327428;
  143.         lat = (int) (mLat * 1E6);
  144.         lon = (int) (mLon * 1E6);
  145.         GeoPoint pt2 = new GeoPoint(lat, lon);
  146.         mLat = 39.89923;
  147.         mLon = 116.347428;
  148.         lat = (int) (mLat * 1E6);
  149.         lon = (int) (mLon * 1E6);
  150.         GeoPoint pt3 = new GeoPoint(lat, lon);
  151.         mLat = 39.89923;
  152.         mLon = 116.367428;
  153.         lat = (int) (mLat * 1E6);
  154.         lon = (int) (mLon * 1E6);
  155.         GeoPoint pt4 = new GeoPoint(lat, lon);
  156.         mLat = 39.91923;
  157.         mLon = 116.387428;
  158.         lat = (int) (mLat * 1E6);
  159.         lon = (int) (mLon * 1E6);
  160.         GeoPoint pt5 = new GeoPoint(lat, lon);
  161.         // 构建多边形
  162.         Geometry polygonGeometry = new Geometry();
  163.         // 设置多边形坐标
  164.         GeoPoint[] polygonPoints = new GeoPoint[5];
  165.         polygonPoints[0] = pt1;
  166.         polygonPoints[1] = pt2;
  167.         polygonPoints[2] = pt3;
  168.         polygonPoints[3] = pt4;
  169.         polygonPoints[4] = pt5;
  170.         polygonGeometry.setPolygon(polygonPoints);
  171.         // 设置多边形样式
  172.         Symbol polygonSymbol = new Symbol();
  173.         Symbol.Color polygonColor = polygonSymbol.new Color();
  174.         polygonColor.red = 0;
  175.         polygonColor.green = 0;
  176.         polygonColor.blue = 255;
  177.         polygonColor.alpha = 126;
  178.         polygonSymbol.setSurface(polygonColor, 1, 5);
  179.         // 生成Graphic对象
  180.         Graphic polygonGraphic = new Graphic(polygonGeometry, polygonSymbol);
  181.         return polygonGraphic;
  182.     }
  183.     /**
  184.      * 绘制单点,该点状态不随地图状态变化而变化
  185.      *
  186.      * @return 点对象
  187.      */
  188.     public Graphic drawPoint() {
  189.         double mLat = 39.98923;
  190.         double mLon = 116.397428;
  191.         int lat = (int) (mLat * 1E6);
  192.         int lon = (int) (mLon * 1E6);
  193.         GeoPoint pt1 = new GeoPoint(lat, lon);
  194.         // 构建点
  195.         Geometry pointGeometry = new Geometry();
  196.         // 设置坐标
  197.         pointGeometry.setPoint(pt1, 10);
  198.         // 设定样式
  199.         Symbol pointSymbol = new Symbol();
  200.         Symbol.Color pointColor = pointSymbol.new Color();
  201.         pointColor.red = 0;
  202.         pointColor.green = 126;
  203.         pointColor.blue = 255;
  204.         pointColor.alpha = 255;
  205.         pointSymbol.setPointSymbol(pointColor);
  206.         // 生成Graphic对象
  207.         Graphic pointGraphic = new Graphic(pointGeometry, pointSymbol);
  208.         return pointGraphic;
  209.     }
  210.     /**
  211.      * 绘制圆,该圆随地图状态变化
  212.      *
  213.      * @return 圆对象
  214.      */
  215.     public Graphic drawCircle() {
  216.         double mLat = 39.90923;
  217.         double mLon = 116.447428;
  218.         int lat = (int) (mLat * 1E6);
  219.         int lon = (int) (mLon * 1E6);
  220.         GeoPoint pt1 = new GeoPoint(lat, lon);
  221.         // 构建圆
  222.         Geometry circleGeometry = new Geometry();
  223.         // 设置圆中心点坐标和半径
  224.         circleGeometry.setCircle(pt1, 2500);
  225.         // 设置样式
  226.         Symbol circleSymbol = new Symbol();
  227.         Symbol.Color circleColor = circleSymbol.new Color();
  228.         circleColor.red = 0;
  229.         circleColor.green = 255;
  230.         circleColor.blue = 0;
  231.         circleColor.alpha = 126;
  232.         circleSymbol.setSurface(circleColor, 1, 3);
  233.         // 生成Graphic对象
  234.         Graphic circleGraphic = new Graphic(circleGeometry, circleSymbol);
  235.         return circleGraphic;
  236.     }
  237.     /**
  238.      * 绘制文字,该文字随地图变化有透视效果
  239.      *
  240.      * @return 文字对象
  241.      */
  242.     public TextItem drawText() {
  243.         double mLat = 39.86923;
  244.         double mLon = 116.397428;
  245.         int lat = (int) (mLat * 1E6);
  246.         int lon = (int) (mLon * 1E6);
  247.         // 构建文字
  248.         TextItem item = new TextItem();
  249.         // 设置文字位置
  250.         item.pt = new GeoPoint(lat, lon);
  251.         // 设置文件内容
  252.         item.text = “百度地图SDK”;
  253.         // 设文字大小
  254.         item.fontSize = 40;
  255.         Symbol symbol = new Symbol();
  256.         Symbol.Color bgColor = symbol.new Color();
  257.         // 设置文字背景色
  258.         bgColor.red = 0;
  259.         bgColor.blue = 0;
  260.         bgColor.green = 255;
  261.         bgColor.alpha = 50;
  262.         Symbol.Color fontColor = symbol.new Color();
  263.         // 设置文字着色
  264.         fontColor.alpha = 255;
  265.         fontColor.red = 0;
  266.         fontColor.green = 0;
  267.         fontColor.blue = 255;
  268.         // 设置对齐方式
  269.         item.align = TextItem.ALIGN_CENTER;
  270.         // 设置文字颜色和背景颜色
  271.         item.fontColor = fontColor;
  272.         item.bgColor = bgColor;
  273.         return item;
  274.     }
  275.     @Override
  276.     protected void onPause() {
  277.         mMapView.onPause();
  278.         super.onPause();
  279.     }
  280.     @Override
  281.     protected void onResume() {
  282.         mMapView.onResume();
  283.         super.onResume();
  284.     }
  285.     @Override
  286.     protected void onDestroy() {
  287.         mMapView.destroy();
  288.         super.onDestroy();
  289.     }
  290.     @Override
  291.     protected void onSaveInstanceState(Bundle outState) {
  292.         super.onSaveInstanceState(outState);
  293.         mMapView.onSaveInstanceState(outState);
  294.     }
  295.     @Override
  296.     protected void onRestoreInstanceState(Bundle savedInstanceState) {
  297.         super.onRestoreInstanceState(savedInstanceState);
  298.         mMapView.onRestoreInstanceState(savedInstanceState);
  299.     }
  300. }

布局XMl:

[html][/html] view plaincopy

  1. <?xml version=”1.0″ encoding=”utf-8″?>
  2. <LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
  3.     android:layout_width=”match_parent”
  4.     android:layout_height=”match_parent”
  5.     android:orientation=”vertical” >
  6.     <LinearLayout
  7.         android:layout_width=”match_parent”
  8.         android:layout_height=”wrap_content”
  9.         android:orientation=”horizontal” >
  10.         <Button
  11.             android:id=”@+id/btn_clear”
  12.             android:layout_width=”match_parent”
  13.             android:layout_height=”match_parent”
  14.             android:layout_margin=”10dp”
  15.             android:layout_weight=”1.0″
  16.             android:background=”@drawable/button_style”
  17.             android:text=”清除(clear)” />
  18.         <Button
  19.             android:id=”@+id/btn_reset”
  20.             android:layout_width=”match_parent”
  21.             android:layout_height=”match_parent”
  22.             android:layout_margin=”10dp”
  23.             android:layout_weight=”1.0″
  24.             android:background=”@drawable/button_style”
  25.             android:text=”重置(reset)” />
  26.     </LinearLayout>
  27.     <com.baidu.mapapi.map.MapView
  28.         android:id=”@+id/bmapView”
  29.         android:layout_width=”match_parent”
  30.         android:layout_height=”match_parent”
  31.         android:clickable=”true” />
  32. </LinearLayout>

Manifest配置跟前面一样。

附上图片效果:

标签