google map 地图轨迹点以画带箭头的直线连接,直观轨迹记录。




       一般我们在做地图定位或轨迹查询的时候,需要在地图上绘画各个轨迹点的marker,然后记录各marker点的经纬度坐标,通过drawLine或drawPath可以把各个点连接起来,以实现轨迹记录。

       但是我们想如果这条线能从起始点的marker到中途以及最后点的marker能有一条带箭头的直线连接起来,这样用户看起来更直观一点,一眼就能看懂起始点和终点的线路。这样就需要我们判断直线所画的方向和中途marker点的位置,然后延伸画两条小线,以实现箭头的效果。

	class LineOverlay extends Overlay {
		/**
		 * according two GeoPoint, draw a line.(use in track)
		 * must have frontGeopoint and backGeopoint  
		 */
		private GeoPoint front;
		private GeoPoint back;
		Paint paint;
		public LineOverlay() {
		}

		public LineOverlay(GeoPoint front, GeoPoint back) {
			this.front = front;
			this.back = back;
		}

		public void draw(Canvas canvas, MapView mapview, boolean shadow) {
			super.draw(canvas, mapview, shadow);
			paint = new Paint();
			paint.setColor(Color.BLUE);
			paint.setStyle(Paint.Style.FILL_AND_STROKE);
			paint.setStrokeWidth(2);
			paint.setAntiAlias(true);

			Point point_f = new Point();
			Point point_b = new Point();

			//Path path = new Path();
			mapview.getProjection().toPixels(front, point_f);
			mapview.getProjection().toPixels(back, point_b);
			// begin
			//path.moveTo(point_b.x, point_b.y);
			// end
			//path.lineTo(point_f.x, point_f.y);
			//canvas.drawPath(path, paint);
			//JudgeDrawArrow(canvas, point_b.x, point_b.y, point_f.x, point_f.y);
			JudgeDrawArrow(canvas, point_f.x, point_f.y, point_b.x, point_b.y);
		}
		
		/*
		 * x1 is the first geopoint marker point X,y1 is that Y;
		 * x2 is the second geopoint marker point X,y2 is that Y;
		 * judge and draw arrow line
		 */
	    public void JudgeDrawArrow(Canvas canvas, int x1, int y1, int x2, int y2) {
	        double arrow_height = 10; // 箭头高度  
	        double arrow_btomline = 7; // 底边的一半  
	        int x3 = 0;  
	        int y3 = 0;  
	        int x4 = 0;  
	        int y4 = 0;
	        double arctangent = Math.atan(arrow_btomline / arrow_height); // 箭头角度  
	        double arrow_len = Math.sqrt(arrow_btomline * arrow_btomline + arrow_height * arrow_height); // 箭头的长度  
	        double[] endPoint_1 = rotateVec(x2 - x1, y2 - y1, arctangent, true,  
	                arrow_len);
	        double[] endPoint_2 = rotateVec(x2 - x1, y2 - y1, -arctangent, true,  
	                arrow_len);
	        double x_3 = x2 - endPoint_1[0]; // (x_3,y_3)是第一端点  
	        double y_3 = y2 - endPoint_1[1];  
	        double x_4 = x2 - endPoint_2[0]; // (x_4,y_4)是第二端点  
	        double y_4 = y2 - endPoint_2[1];  
	        Double X3 = new Double(x_3);
	        x3 = X3.intValue();  
	        Double Y3 = new Double(y_3);  
	        y3 = Y3.intValue();  
	        Double X4 = new Double(x_4);  
	        x4 = X4.intValue();  
	        Double Y4 = new Double(y_4);  
	        y4 = Y4.intValue();  
	        // 画线  
	        canvas.drawLine(x1, y1, x2, y2,paint);  
	        // 画箭头的一半  
	        canvas.drawLine(x2, y2, x3, y3,paint);  
	        // 画箭头的另一半  
	        canvas.drawLine(x2, y2, x4, y4,paint);  
	    }  
	  
	    public double[] rotateVec(int px, int py, double ang, boolean isChlen,
	            double newLen) {  
	  
	        double rotateResult[] = new double[2];  
	        // 矢量旋转函数,参数含义分别是x分量、y分量、旋转角、是否改变长度、新长度  
	        double vx = px * Math.cos(ang) - py * Math.sin(ang);  
	        double vy = px * Math.sin(ang) + py * Math.cos(ang);  
	        if (isChlen) {  
	            double d = Math.sqrt(vx * vx + vy * vy);  
	            vx = vx / d * newLen;  
	            vy = vy / d * newLen;  
	            rotateResult[0] = vx;  
	            rotateResult[1] = vy;  
	        }  
	        return rotateResult;  
	    }
		
		
	}

构造器的两个参数分别为GeoPoint对象,(geopoint1,geopoint2)

point_f.X,Y为marker点1的屏幕坐标点,point_b.X,Y为marker点2的屏幕坐标点。

(效果图)

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 7
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值