高德地图SDK Android版开发 11 覆盖物示例 4 线

前言

文本通过创建多个不同线宽的折线和大地曲线，介绍Polyline的使用方法。

线的属性包括是否可点击、透明度、是否虚线、颜色和纹理属性、大地曲线。

• 颜色和纹理属性包括分段颜色、纹理、分段纹理、渐变色。只能选一或不选。

为了直观显示线的属性，仅使用了CheckBox控件，多种属性只能选一通过代码实现。

界面布局

• 布局文件

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MapPolylineActivity">

    <com.amap.api.maps.MapView
        android:id="@+id/map"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@id/bottomView"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.appcompat.widget.LinearLayoutCompat
        android:id="@+id/bottomView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@id/map">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/background_dark"
            android:gravity="center_horizontal"
            android:orientation="horizontal"
            android:paddingHorizontal="10dp">

            <CheckBox
                android:id="@+id/clickable"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:checked="true"
                android:enabled="false"
                android:onClick="setMarkerFlag"
                android:text="点击"
                android:textColor="@android:color/darker_gray"
                android:textStyle="bold" />

            <CheckBox
                android:id="@+id/transparency"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:onClick="setMarkerFlag"
                android:text="透明度"
                android:textColor="@color/white"
                android:textStyle="bold" />

            <CheckBox
                android:id="@+id/dottedLine"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:onClick="setMarkerFlag"
                android:text="虚线"
                android:textColor="@color/white"
                android:textStyle="bold" />

            <CheckBox
                android:id="@+id/colors"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:onClick="setMarkerFlag"
                android:text="分段颜色"
                android:textColor="@color/yellow_800"
                android:textStyle="bold" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|center"
            android:background="@android:color/background_dark"
            android:orientation="horizontal"
            android:paddingHorizontal="10dp">

            <CheckBox
                android:id="@+id/texture"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:onClick="setMarkerFlag"
                android:text="纹理"
                android:textColor="@color/yellow_800"
                android:textStyle="bold" />

            <CheckBox
                android:id="@+id/textures"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:onClick="setMarkerFlag"
                android:text="分段纹理"
                android:textColor="@color/yellow_800"
                android:textStyle="bold" />

            <CheckBox
                android:id="@+id/gradient"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:checked="false"
                android:onClick="setMarkerFlag"
                android:text="渐变色"
                android:textColor="@color/yellow_800"
                android:textStyle="bold" />

            <CheckBox
                android:id="@+id/geodesic"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:onClick="setMarkerFlag"
                android:text="大地曲线"
                android:textColor="@color/white"
                android:textStyle="bold" />

        </LinearLayout>
    </androidx.appcompat.widget.LinearLayoutCompat>
</androidx.constraintlayout.widget.ConstraintLayout>

MapPolyline类

以下为MapPolyline类部分代码。

常量

public static final String CLICKABLE = "clickable"; // 点击
public static final String TRANSPARENCY = "transparency"; // 透明度
public static final String DOTTED_LINE = "DottedLine"; // 虚线
public static final String COLORS = "Colors"; // 分段颜色
public static final String TEXTURE = "Texture"; // 纹理
public static final String TEXTURES = "Textures"; // 分段纹理
public static final String GRADIENT = "Gradient"; // 渐变色
public static final String GEODESIC = "Geodesic"; // 大地曲线

• 渐变色

final static int COLOR_RED = 0xAAD50000;
final static int COLOR_YELLOW = 0xAAF57F17;
final static int COLOR_BLUE = 0xAA0D47A1;
final static int COLOR_GREEN = 0xAA33691E;

• 折线线宽：
  • 多个折线的宽度依次为5，10， 15， ……
  • 多个大地曲线的宽度依次为15，20，25， ……

final static int LINE_WIDTH_MIN = 5;
final static int LINE_GEODESIC_WIDTH_MIN = 15;
final static int LINE_WIDTH_STEP = 5;

成员变量

// 覆盖物列表
List<BaseOverlay> overlays = new ArrayList<>();
// 选中的状态
List<String> selectedFlags = new ArrayList<>();

List<List<LatLng>> lines = new ArrayList<>(); // 多个折线
List<List<LatLng>> geodesicLines = new ArrayList<>(); // 大地曲线坐标 仅两个点
ArrayList<BitmapDescriptor> bitmaps = new ArrayList<>(); // 纹理
List<Integer> colorValues = new ArrayList<>(); // 渐变色

初始值

• 默认选中选项

selectedFlags.add(CLICKABLE);

• 多个折线

double latSpan = 0.05;
for (int i = 0; i < 5; ++i) {
    List<LatLng> points = new ArrayList<>();
    points.add(new LatLng(39.865 + latSpan * i, 116.254));
    points.add(new LatLng(39.865 + latSpan * i, 116.304));
    points.add(new LatLng(39.825 + latSpan * i, 116.354));
    points.add(new LatLng(39.855 + latSpan * i, 116.394));
    points.add(new LatLng(39.805 + latSpan * i, 116.454));
    points.add(new LatLng(39.865 + latSpan * i, 116.504));
    points.add(new LatLng(39.805 + latSpan * i, 116.544));
    lines.add(points);
}

• 多个大地曲线（跨越180°的线和跨越-180°的线来自官方Demo）

List<LatLng> geodesicLine1 = new ArrayList<>();
geodesicLine1.add(new LatLng(36.53, 360 - 121.47, false));
geodesicLine1.add(new LatLng(22.33, 114, false));
geodesicLines.add(geodesicLine1);

/**
 *  从左到右绘制一条跨越180°的线，右边部分需要处理成超过180度
 *  正常经纬度范围是(-180°,180°)，
 *  这里为了可以超过180°第三个参数填写false，表示去除内部检查
 */
List<LatLng> geodesicLine2 = new ArrayList<>();
geodesicLine2.add(new LatLng(59.304104, 133.44508, false));
geodesicLine2.add(new LatLng(62.220912, 145.573986, false));
geodesicLine2.add(new LatLng(64.353281, 158.75758, false));
geodesicLine2.add(new LatLng(64.880724, 170.886486, false));
geodesicLine2.add(new LatLng(66.261601, 360 - 179.269764, false));
geodesicLine2.add(new LatLng(66.048417, 360 - 155.539295, false));
geodesicLine2.add(new LatLng(65.251242, 360 - 143.234608, false));
geodesicLines.add(geodesicLine2);

/**
 * 从右到左绘制一条跨越-180°的线，左边部分会超过-180°，效果和跨域180°一样
 * 也可以将点全部+360°转换成跨域180°的线
 */
List<LatLng> geodesicLine3 = new ArrayList<>();
geodesicLine3.add(new LatLng(65.251242 - 10, -143.234608, false));
geodesicLine3.add(new LatLng(66.048417 - 10, -155.539295, false));
geodesicLine3.add(new LatLng(66.261601 - 10, -179.269764, false));
geodesicLine3.add(new LatLng(64.880724 - 10, 170.886486 - 360, false));
geodesicLine3.add(new LatLng(64.353281 - 10, 158.75758 - 360, false));
geodesicLine3.add(new LatLng(62.220912 - 10, 145.573986 - 360, false));
geodesicLine3.add(new LatLng(59.304104 - 10, 133.44508 - 360, false));
geodesicLines.add(geodesicLine3);

• 纹理和颜色（纹理图来自官方Demo）

final int[] drawableIds = {
        R.drawable.map_alr,
        R.drawable.map_alr_night,
        R.drawable.custtexture,
};
for (int id : drawableIds) {
    bitmaps.add(BitmapDescriptorFactory.fromResource(id));
}

final int[] colors = {COLOR_RED, COLOR_YELLOW, COLOR_BLUE, COLOR_GREEN};
for (int color : colors)
    colorValues.add(color);

• 点击事件

initEvent();

private void initEvent() {
    map.setOnPolylineClickListener(new AMap.OnPolylineClickListener() {
        @Override
        public void onPolylineClick(Polyline polyline) {
            showToast("click polyline");
        }
    });
}

创建覆盖物

• 创建大地曲线或创建多个折线

public void addOverlays() {
    boolean isGeodesic = selectedFlags.contains(GEODESIC);
    List<List<LatLng>> showLines = isGeodesic ? geodesicLines : lines;
    int width = isGeodesic ? LINE_GEODESIC_WIDTH_MIN : LINE_WIDTH_MIN;
    for (List<LatLng> points : showLines) {
        PolylineOptions polylineOptions = new PolylineOptions()
                // 设置线段的宽度，默认为10
                .width(width)
                // 设置线段的颜色，需要传入32位的ARGB格式
                .color(COLOR_RED)
                // 设置Polyline头尾形状类型
                .lineCapType(PolylineOptions.LineCapType.LineCapRound)
                // 设置Polyline拐点衔接的形状类型
                .lineJoinType(PolylineOptions.LineJoinType.LineJoinRound)
                // 追加一批顶点到线段的坐标集合
                .addAll(points);

        setOption(polylineOptions, selectedFlags);

        // 在地图上绘制折线
        Polyline polyline = map.addPolyline(polylineOptions);
        overlays.add(polyline);

        width += LINE_WIDTH_STEP;
    }
}

• 设置折线属性

private void setOption(PolylineOptions option, List<String> flags) {
    if (flags.contains(DOTTED_LINE)) {
        // 设置是否画虚线
        option.setDottedLine(true);
        // 设置虚线形状
        // PolylineOptions.DOTTEDLINE_TYPE_SQUARE = 0;
        // PolylineOptions.DOTTEDLINE_TYPE_CIRCLE = 1;
        option.setDottedLineType(PolylineOptions.DOTTEDLINE_TYPE_CIRCLE);
    }

    if (flags.contains(TRANSPARENCY)) {
        // 设置线段的透明度0~1，默认是1,1表示不透明
        float transparency = 0.5f;
        option.transparency(transparency);
    }

    if (flags.contains(COLORS)) {
        // 设置线段的颜色
        option.colorValues(colorValues);
    }

    if (flags.contains(TEXTURE)) {
        // 设置是否使用纹理贴图画线
        option.setUseTexture(true);
        // 设置线段的纹理图，图片为2的n次方
        option.setCustomTexture(bitmaps.get(0));
    }

    if (flags.contains(TEXTURES)) {
        // 添加纹理索引
        List<Integer> indexList = new ArrayList<>();
        for (int i = 0; i < bitmaps.size(); ++i)
            indexList.add(i);

        // 设置是否使用纹理贴图画线
        option.setUseTexture(true);
        // 设置线段纹理list
        option.setCustomTextureList(bitmaps);
        // 设置线段纹理index数组
        option.setCustomTextureIndex(indexList);
    }

    if (flags.contains(GRADIENT)) {
        // 设置线段是否使用渐变色
        option.useGradient(true);
        // 设置线段的颜色
        option.colorValues(colorValues);
    }

    if (flags.contains(GEODESIC)) {
        // 设置线段是否为大地曲线
        option.geodesic(true);
    }
}

移除覆盖物

public void removeOverlay() {
    // 从地图上删除所有的覆盖物（marker，circle，polyline 等对象），
    // 但myLocationOverlay（内置定位覆盖物）除外。
//        boolean isKeepMyLocationOverlay = true;
//        map.clear(isKeepMyLocationOverlay);

    for (BaseOverlay overlay : overlays) {
        if (overlay instanceof Polyline) {
            Polyline polyline = (Polyline) overlay;
            polyline.remove();
        }
    }
    overlays.clear();
}

设置属性

public void setFlags(List<String> flags) {
    selectedFlags.clear();
    selectedFlags.addAll(flags);

    removeOverlay();
    addOverlays();
}

加载地图和释放地图

public void onMapLoaded() {
    addOverlays();
}

public void onMapDestroy() {
    removeOverlay();

    for (BitmapDescriptor bitmap : bitmaps) {
        bitmap.recycle();
    }
    bitmaps = null;
}

MapPolylineActivity类

以下是MapPolylineActivity类部分代码

控件响应事件

说明：为了直观显示线的属性，仅使用了CheckBox控件，多种属性只能选一通过代码实现。

public void setMarkerFlag(View view) {
    // 分段颜色、纹理、分段纹理、渐变色
    List<Integer> group = Arrays.asList(
            R.id.colors, R.id.texture, R.id.textures, R.id.gradient);

    boolean checked = ((CheckBox) view).isChecked();
    int id = view.getId();
    if (checked) {
        if (group.contains(id)) {
            for (int checkBoxId : group) {
                if (checkBoxId != id) {
                    ((CheckBox) findViewById(checkBoxId)).setChecked(false);
                }
            }
        }
    }

    update();
}

private void update() {
    final int[] ids = {
            R.id.clickable,
            R.id.transparency,
            R.id.dottedLine,
            R.id.colors,
            R.id.texture,
            R.id.textures,
            R.id.gradient,
            R.id.geodesic,
    };
    final String[] options = {
            MapPolyline.CLICKABLE,
            MapPolyline.TRANSPARENCY,
            MapPolyline.DOTTED_LINE,
            MapPolyline.COLORS,
            MapPolyline.TEXTURE,
            MapPolyline.TEXTURES,
            MapPolyline.GRADIENT,
            MapPolyline.GEODESIC,
    };
    List<String> flags = new ArrayList<>();
    for (int i = 0; i < ids.length; ++i) {
        CheckBox checkBox = findViewById(ids[i]);
        if (checkBox.isChecked())
            flags.add(options[i]);
    }
    mapPolyline.setFlags(flags);
}

运行效果图