欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

MapBoxMap 之 LineLayer

程序员文章站 2022-06-15 09:29:06
LineLayer:是向地图上添加线的,常用于实现轨迹功能。准备工作:1.一组坐标点List routeCoordinates;2.这里初始化GeoJsonSource的时候,构造第二参数填入,new GeoJsonOptions().withLineMetrics(true),.GeoJsonSource geoJsonSource = new GeoJsonSource(LINE_SOURCE_ID, new GeoJsonOptions().wit.....

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);

一、绘制纯颜色的线

MapBoxMap 之 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)
        );
    }

二、绘制渐变色的线

MapBoxMap 之 LineLayer

 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
                )));
    }

三、绘制图片的线

MapBoxMap 之 LineLayer

    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