如何使用 Mapbox 绘制箭头

Question

使用 Mapbox Android SDK 和 Annotation 插件，是否可以在线条上添加箭头？如果没有，有什么方法可以建议一条线的方向吗？理想情况下，我希望有两个标记，它们之间有一个箭头，这样用户就知道要朝哪个方向行驶。

Answer 1

不幸的是，Mapbox Lines 不支持此功能。但是，使用新的 Mapbox API v7 和 Annotations 插件，您可以执行以下操作来获得您需要的内容。1. 使用 LineManager 在 Mapview 上绘制一条线2. 以度为单位计算 Line 的方位角 3. 按计算的度数旋转可绘制箭头（可绘制可以是向上的箭头）4. 使用在 Mapview 上绘制符号符号管理器。该符号将放置在线的中间，并用作旋转的可绘制对象的图像只需将此代码放在 Mapview 活动中的任何位置public void createLineAndArrow(){&nbsp;&nbsp;&nbsp; //Declare the coordinates of the two points of the line&nbsp; float latitude1&nbsp; = 34.1f;&nbsp; float longitude1 = 33.2f;&nbsp; float latitude2&nbsp; = 35f;&nbsp; float longitude2 = 34.5f;&nbsp; //Calculate bearing of line&nbsp; double lat1Rad = Math.toRadians(latitude1);&nbsp; double lat2Rad = Math.toRadians(latitude2);&nbsp; double deltaLonRad = Math.toRadians(longitude2 - longitude1);&nbsp; double y = Math.sin(deltaLonRad) * Math.cos(lat2Rad);&nbsp; double x = Math.cos(lat1Rad) * Math.sin(lat2Rad) - Math.sin(lat1Rad) *&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Math.cos(lat2Rad) * Math.cos(deltaLonRad);&nbsp; double bearing =&nbsp; (Math.toDegrees(Math.atan2(y,x))+360)%360;&nbsp; //Draw the Line&nbsp; List<LatLng> lineVertices = new ArrayList<>();&nbsp; lineVertices.add(new LatLng(latitude1,longitude1));&nbsp; lineVertices.add(new LatLng(latitude2,longitude2));&nbsp; LineOptions lineOptions = new LineOptions().withLatLngs(lineVertices)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .withLineColor(ColorUtils.colorToRgbaString(Color.MAGENTA))&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .withLineWidth(3f);&nbsp; LineManager lineManager = new LineManager(mapView, mapboxMap,mapboxMap.getStyle());&nbsp; lineManager.create(lineOptions);&nbsp; //Rotate the drawable&nbsp; Bitmap bmapOriginal = BitmapFactory.decodeResource(getResources(),&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; R.drawable.arrowup);&nbsp; final Bitmap bmap = bmapOriginal.copy(Bitmap.Config.ARGB_8888, true);&nbsp; Matrix matrix = new Matrix();&nbsp; matrix.postRotate((float)bearing);&nbsp; Bitmap rotatedBitmap = Bitmap.createBitmap(bmap , 0, 0, bmap.getWidth(),&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;bmap.getHeight(), matrix, true);&nbsp; Drawable d = new BitmapDrawable(getResources(), rotatedBitmap);&nbsp; //Add the drawable to the selected mapbox style&nbsp; mapboxMap.getStyle().addImage("rotatedImage",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; BitmapUtils.getBitmapFromDrawable(d),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; true);&nbsp;//Draw the Symbol in the middle of the Line&nbsp;SymbolOptions symbolOptions = new SymbolOptions().withIconImage("rotatedImage")&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .withGeometry(Point.fromLngLat((longitude2+longitude1)/2,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (latitude2+latitude1)/2));&nbsp;SymbolManager symbolManager = new SymbolManager(mapView, mapboxMap,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;mapboxMap.getStyle());&nbsp;symbolManager.create(symbolOptions);}&nbsp;&nbsp;

Answer 2

Mapbox 不支持开箱即用的箭头，但您可以尝试使用/Line#setPattern将添加到地图的图像名称作为参数。您可以在此处阅读有关该图案图像要求的更多信息。否则，您需要通过在地图上正确定位和旋转箭头图形 (a ) 来推出自定义解决方案。您可以使用样式属性和公开方法进行设置。Style#addImageMapboxMap#addImageSymbolsymbol-placementicon-rotation-alignmentSymbolManager