如何在Android中为我的折线创建方向箭头 [英] How to create direction arrows for my polylines in android

问题描述

我需要添加的内容

PolylineOptions polyline = new PolylineOptions();
polyline.addAll(geom);
polyline.color(defaultStrokeColor).width(defaultWidth);
mapObjects.add(polyline);

此代码显示箭头吗?

推荐答案

我还看到了其他有关使用标记并旋转标记的问题/答案.但是，有一种更简单的方法可以在GoogleMap折线上显示方向箭头.

I have seen other questions/answers about this that use markers and rotate them. But there is a simpler way to have directional arrows on GoogleMap Polylines.

GoogleMap API v2通过在PolylineOptions中添加" endcap "图标来提供一种巧妙的方法.它会带入您的输入位图图标，并朝折线的方向旋转它.箭头不需要标记.并且图标旋转是自动的.只要原始箭头图标指向上"即可.

The GoogleMap API v2 provides a slick way to do this by adding an "endcap" icon to the PolylineOptions. It takes your input bitmap icon and rotates it in the direction of your Polyline. No markers necessary for the arrowheads. And the icon rotation is automatic. As long as the original arrow icon is pointed "up".

坦率地说，我很惊讶没有 ArrowCap 类.这些类确实存在: ButtCap ， RoundCap ， SquareCap ，但不是ArrowCap类.

Frankly I'm surprised that there is no ArrowCap class. These classes do exist: ButtCap, RoundCap, SquareCap, but not the ArrowCap class.

所以我们需要用我们自己的箭头图像将其塞进去.唯一的棘手问题是折线(和下一条连接的折线)使用图标的CENTER作为端点.因此，请确保您的端盖图标将其指向图像的中心.

So we need to slug it out with our own arrow image. The only slight gotcha is that the Polyline (and the next connected Polyline) use the CENTER of the icon as the endpoint. So make sure your endcap icon has it's point at the center of the image.

我在此处制作并上传了示例箭头图标图像:< >

I made and uploaded a sample arrow icon image here: <>

很抱歉，它是白色的，看上去是看不见的，但它在<之间； >符号，只需将其拖到桌面上即可.

Sorry that it's white and looks invisible, but it IS there between the < > symbols, just drag it to your desktop.

我希望能够以编程方式更改箭头的颜色，所以我创建了这个白色的PNG图像，然后使用滤色器将颜色叠加(相乘).

I wanted to be able to change the arrow color programmatically so I created this white PNG image and then used a color filter to overlay (MULTIPLY) a color onto it.

该图标是一个向上的白色箭头，指向该图像的中心.图像的上半部分为空(透明).您将要使用 Image Asset Studio (或您最喜欢的图片工具)来创建以下分辨率的mipmap图片:mdpi = 24x24，hdpi = 36x36，xhdpi = 48x48，xxhdpi = 72x72，xxxhdpi = 96x96.

The icon is a white arrow, pointing up, with the point at the CENTER of image. The top half of the image is empty (transparent). You will want to use Image Asset Studio (or your favorite image tool) to create mipmap images for these resolutions: mdpi=24x24, hdpi=36x36, xhdpi=48x48, xxhdpi=72x72, xxxhdpi=96x96.

以下是生成Polyline/PolylineOptions所需的端盖BitmapDescriptor的代码(R.mipmap.endcap是我上面包含的图像):

Here is the code to generate the endcap BitmapDescriptor needed by the Polyline/PolylineOptions (R.mipmap.endcap is the image I included above):

/**
 * Return a BitmapDescriptor of an arrow endcap icon for the passed color.
 * 
 * @param context - a valid context object
 * @param color - the color to make the arrow icon
 * @return BitmapDescriptor - the new endcap icon
 */
public BitmapDescriptor getEndCapIcon(Context context,  int color) {

    // mipmap icon - white arrow, pointing up, with point at center of image
    // you will want to create:  mdpi=24x24, hdpi=36x36, xhdpi=48x48, xxhdpi=72x72, xxxhdpi=96x96
    Drawable drawable = ContextCompat.getDrawable(context, R.mipmap.endcap);

    // set the bounds to the whole image (may not be necessary ...)
    drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());

    // overlay (multiply) your color over the white icon
    drawable.setColorFilter(color, PorterDuff.Mode.MULTIPLY);

    // create a bitmap from the drawable
    android.graphics.Bitmap bitmap = android.graphics.Bitmap.createBitmap(drawable.getIntrinsicWidth(),
            drawable.getIntrinsicHeight(), Bitmap.Config.ARGB_8888);

    // render the bitmap on a blank canvas
    Canvas canvas = new Canvas(bitmap);
    drawable.draw(canvas);

    // create a BitmapDescriptor from the new bitmap
    return BitmapDescriptorFactory.fromBitmap(bitmap);
}

下面是创建带有指向折线方向的箭头端盖的折线的代码:

And here is the code to create the Polyline with an arrow endcap that points in the direction of the Polyline:

/**
 * Draw a GoogleMap Polyline with an endcap arrow between the 2 locations.
 *
 * @param context - a valid context object
 * @param googleMap - a valid googleMap object
 * @param fromLatLng - the starting position
 * @param toLatLng - the ending position
 * @return Polyline - the new Polyline object
 */
public Polyline drawPolylineWithArrowEndcap(Context context,
                                            GoogleMap googleMap,
                                            LatLng fromLatLng,
                                            LatLng toLatLng) {

    int arrowColor = Color.RED; // change this if you want another color (Color.BLUE)
    int lineColor = Color.RED;

    BitmapDescriptor endCapIcon = getEndCapIcon(context,arrowColor);

    // have googleMap create the line with the arrow endcap
    // NOTE:  the API will rotate the arrow image in the direction of the line
    Polyline polyline = googleMap.addPolyline(new PolylineOptions()
            .geodesic(true)
            .color(lineColor)
            .width(8)
            .startCap(new RoundCap())
            .endCap(new CustomCap(endCapIcon,8))
            .jointType(JointType.ROUND)
            .add(fromLatLng, toLatLng);

    return polyline;
}

这篇关于如何在Android中为我的折线创建方向箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！