MapBoxMap 之 LineLayer

LineLayer：是向地图上添加线的，常用于实现轨迹功能。

view on github

本文是介绍了LineLayer 3种绘制方法，由于其属性众多，实现时需要注意是否设置的属性有冲突的，一般表现就是绘制出来的线变黑了????。

准备工作：

这里基本都是固定的套路了。

1.一组坐标点 

List<Point> routeCoordinates;

2.这里初始化GeoJsonSource的时候，构造第二参数填入，new GeoJsonOptions().withLineMetrics(true),.

GeoJsonSource geoJsonSource = new GeoJsonSource(LINE_SOURCE_ID, new GeoJsonOptions().withLineMetrics(true)); style.addSource(geoJsonSource);

3.这里初始化FeatureCollection的时候，使用LineString.fromLngLats(routeCoordinates))}创建Feature

FeatureCollection featureCollection = FeatureCollection.fromFeatures( new Feature[]{Feature.fromGeometry(LineString.fromLngLats(routeCoordinates))});

geoJsonSource.setGeoJson(featureCollection);

4.稍后会只用到的image
   Drawable drawable = getResources().getDrawable(R.drawable.ic_track_road);
   style.addImage(LINE_IMAGE_ID, drawable);

5.LineLayer

 LineLayer  lineLayer = new LineLayer(LINE_LAYER_ID, LINE_SOURCE_ID);
        style.addLayer(lineLayer);

一、绘制纯颜色的线

private void drawNormalLine(Style style) {
        if (style == null) return;

        //Source
        featureCollection = FeatureCollection.fromFeatures(
                new Feature[]{Feature.fromGeometry(LineString.fromLngLats(routeCoordinates))});
        geoJsonSource.setGeoJson(featureCollection);
        //Layer
        lineLayer.setProperties(
                /*
                 * 线帽
                 * 布局 属性。 可选的枚举。一，，。默认为"butt"。 "butt""round""square"
                 * 行尾的显示。
                 *
                 * "butt"：
                 * 端部带有正方形的笔帽，绘制到直线的确切端点。
                 *
                 * "round"：
                 * 具有圆形末端的盖，该圆形末端以线宽的一半的半径超出线的端点绘制，并以线的端点为中心。
                 *
                 * "square"：
                 * 端部带有正方形的笔帽，该笔帽以超出线宽一半的距离画出线的端点。
                 */
                lineCap(Property.LINE_CAP_BUTT),
                //线条的绘制颜色
                PropertyFactory.lineColor(Color.RED),
                //行宽 以像素为单位。
                lineWidth(14f),
                /*
                 * 线连接
                 * 布局 属性。 可选的枚举。一，，。默认为"miter"。 "bevel" "round" "miter"
                 * 连接时显示线。
                 *
                 * "bevel"：
                 * 具有平方根末端的连接，该末端在线宽的一半处超出线的端点。
                 *
                 * "round"：
                 * 具有圆形末端的连接，该末端以线宽度的一半的半径超出线的端点绘制，并以线的端点为中心。
                 *
                 * "miter"：
                 * 具有尖角的角的连接，其外侧超出路径的端点，直到它们汇合为止。
                 */
                lineJoin(Property.LINE_JOIN_MITER),
                /*
                 * 填充翻译锚 可选的枚举 "map" "viewport" 之一。默认为"map"。需要设置line-translate。
                 * "map"：填充相对于地图进行转换。
                 * "viewport"：填充相对于视口平移。
                 */
                PropertyFactory.lineTranslateAnchor(Property.LINE_TRANSLATE_ANCHOR_MAP),
                //可见性
                PropertyFactory.visibility(Property.VISIBLE)
        );
    }

二、绘制渐变色的线

 private void drawLineGradient(Style style) {
        if (style == null) return;
        //Source
        featureCollection = FeatureCollection.fromFeature(Feature.fromGeometry(LineString.fromLngLats(routeCoordinates)));
        geoJsonSource.setGeoJson(featureCollection);
        //Layer
        lineLayer.setProperties(
                lineCap(Property.LINE_CAP_ROUND),
                lineJoin(Property.LINE_JOIN_ROUND),
                lineWidth(14f),
                //线梯度 定义用于为线要素着色的渐变。只能与指定的GeoJSON源一起使用"lineMetrics": true。
                lineGradient(interpolate(
                        linear(), lineProgress(),
                        stop(0f, rgb(6, 1, 255)), // blue
                        stop(0.1f, rgb(59, 118, 227)), // royal blue
                        stop(0.3f, rgb(7, 238, 251)), // cyan
                        stop(0.5f, rgb(0, 255, 42)), // lime
                        stop(0.7f, rgb(255, 252, 0)), // yellow
                        stop(1f, rgb(255, 30, 0)) // red
                )));
    }

三、绘制图片的线

    private void drawImageLine(Style style) {
        if (style == null) return;

        //Source
        featureCollection = FeatureCollection.fromFeatures(
                new Feature[]{Feature.fromGeometry(LineString.fromLngLats(routeCoordinates))});
        geoJsonSource.setGeoJson(featureCollection);
        //Layer
        lineLayer.setProperties(
                lineCap(Property.LINE_CAP_ROUND),
                lineJoin(Property.LINE_JOIN_ROUND),
                lineWidth(14f),
                //填充模式  可选的resolveImage。 Sprite中用于绘制图像填充的图像名称。对于无缝图案，图像的宽度和高度必须是两倍（2、4、8，...，512）。请注意，仅在整数缩放级别会评估与缩放相关的表达式。
                PropertyFactory.linePattern(LINE_IMAGE_ID)
        );
    }

注意：这切换为图片时，一时加载不过来，需要内心等一会儿，然后用手指缩放地图查看是否切换成功。

本文地址：https://blog.csdn.net/Mr_theSun/article/details/108445274