当前位置：主页 > android教程 > Android Mapbox 绘制

Android基于Mapbox V10 绘制LineGradient轨迹

发布：2023-03-02 18:30:01 59

给大家整理了相关的编程文章，网友宋弘雅根据主题投稿了本篇教程内容，涉及到Android、Mapbox、V10、Mapbox、V10、绘制LineGradient轨迹、Android Mapbox 绘制相关内容，已被312网友关注，内容中涉及的知识点可以在下方直接下载获取。

Android Mapbox 绘制

前言

当Mapbox升级到V10(我直接到当前的最新V10.3)版本后，就可以就此实现自己想要实现的功能。

官方文档（docs.mapbox.com/android/map…）上的一些case就不在重复了

UISettings:

PreV10 通过MapView 拿到UISettings，然后控制相关属性，V10 UISettings已经被移除了，不再统一管理，比较分散。

参见相关属性的控制：

mMapView.compass.visibility = false
mMapView.logo.enabled = false
mMapView.attribution.enabled = false
mMapView.gestures.updateSettings { null }//控制无法触摸

PreV10 与 V10 的Camera 相关的animation (涉及到用到的Point，PreV10 之前有LatLn, Point 两个类，当时还觉得为啥弄两个，比较冗余，V10里面拿掉了LatLn保留Point，注意的是Point构造时 longitude为第一个prarams. )

普通的 camera

fun moveCamera(
        mapView: MapView,
        originalList: List,
        paddingStart: Double,
        paddingTop: Double,
        paddingEnd: Double,
        paddingBottom: Double
    ) {
        if (originalList.isEmpty()) {
            return
        }
        val mapboxMap = mapView.getMapboxMap()
        val camera = mapboxMap.cameraForCoordinates(originalList, EdgeInsets(paddingTop, paddingStart, paddingBottom, paddingEnd))
        mapView.camera.flyTo(camera)
//        mapboxMap.setCamera(camera)
    }

camera动画之后，animationEnd 后的回调需求时，传入animationOptions给 easeTo()，如下实现：

fun easeCamera(mapView:MapView, originalList: List,
                   margin: Double,
                   duration: Long,
                   actionAfter: (() -> Unit)? = null){
        if (originalList.isEmpty()) {
            return
        }
        val animationOptions = MapAnimationOptions.mapAnimationOptions {
            duration(duration)
//            owner(MapAnimationOwnerRegistry.GESTURES)
            animatorListener(object : AnimatorListenerAdapter() {
                override fun onAnimationEnd(animation: Animator?) {
                    actionAfter?.invoke()
                }
            })
        }
        val mapboxMap = mapView.getMapboxMap()
        val camera = mapboxMap.cameraForCoordinates(originalList, EdgeInsets(margin, margin, margin, margin))
        mapView.camera.easeTo(camera, animationOptions)
    }

LatlngBounds:

Pre10 之前的类，并且可以通过 List 创建一个 LatlngBounds, 然后 getCenter(), V10中直接拿掉了 LatLngBounds, 也就没有获取List 对应的 getCenter()了，没有仔细地去找API是否有相对应的替代，直接自己用扩展实现了一下：

@JvmStatic
fun getCenter(originalList: List): Point? {
  if (originalList.isEmpty()) {
    return null
  }
  if (originalList.size < 2) {
    return originalList[0]
  }
  val multiPoint = MultiPoint.fromLngLats(originalList)
  val boundingBox = multiPoint.createBoundingBoxFromPoints()
  return boundingBox?.getCenter()
}

涉及到两个类 BoundingBox 及 MultiPoint，在两个类上添加扩展方法：

/**
** 通过 southwest、northeast 两个点构建 BoundingBox 对象
**/
fun MultiPoint.createBoundingBoxFromPoints(): BoundingBox?{
    val coordinates = coordinates()
    if (coordinates.size > 1){
        var minLat: Double = MAX_LATITUDE
        var minLon: Double = MAX_LONGITUDE
        var maxLat: Double = MIN_LATITUDE
        var maxLon: Double = MIN_LONGITUDE

        for (gp in coordinates) {
            val latitude: Double = gp.latitude()
            val longitude: Double = gp.longitude()
            minLat = Math.min(minLat, latitude)
            minLon = Math.min(minLon, longitude)
            maxLat = Math.max(maxLat, latitude)
            maxLon = Math.max(maxLon, longitude)
        }
        val southwest = Point.fromLngLat(minLon, minLat)
        val northeast = Point.fromLngLat(maxLon, maxLat)
        return BoundingBox.fromPoints(southwest, northeast)
    }
    return null
}

/**
** 扩展BoundingBox getCenter()方法。
**/
fun BoundingBox.getCenter(): Point {
    val centerLon = (southwest().longitude() + northeast().longitude())/2.0
    val centerLat = (southwest().latitude() + northeast().latitude())/2.0
    return Point.fromLngLat(centerLon, centerLat)
}

Style设定Layer

V10 添加了DSL build 添加 source、layer，相对而言source、layer都比较集中在builder{}的 block里，实际应用中通常source、layer 的添加都是分离的，动态的，通过sourceID， layerId 找到对应的 source、layer然后修改里面的内容, 发现 addLayerBelow(layer, layId) 该方法不好使，Crash了，暂且不用它了。 SymbolLayer 相比之前的api接口，少了一个 style.addImages(imagesMap), 不再支持一次性添加多个Image，添加一个简单的扩展函数即可。

fun Style.addImages(imageMap: Map) {
    imageMap.forEach { (t, u) ->
        addImage(t, u)
    }
}

创建SymbolLayer 及 Source (Feature)的case

 private fun createSymbolLayer(
        layerId: String,
        sourceId: String,
        isChangeStyle: Boolean,
        offsetY: Float
    ): SymbolLayer {
        return symbolLayer(layerId, sourceId){
            iconImage(PROPERTY_ICON_NAME_PATTERN)
            iconAllowOverlap(true)
            iconSize(if (isChangeStyle) 1.0 else 0.0)
            iconIgnorePlacement(true)
            iconOffset(listOf(0.0, offsetY.toDouble()))
        }
    }
// 控制iconSize 大小是方便做动画。

private fun createSymbolBitmap(latLng: Point, markerStr: String, markerParams: MarkerParams?) {
        val feature = Feature.fromGeometry(Point.fromLngLat(latLng.longitude(), latLng.latitude()))
        val bitmap = createMarkerBitmap(mContext, markerParams!!)
        feature.addStringProperty(PROPERTY_ICON_NAME, markerStr)
        imagesMap[markerStr] = bitmap
        markerCoordinates.add(feature)
    }

添加对应的 source, Layer

style.addSource(
                geoJsonSource(END_SOURCE_ID){
                    featureCollection(FeatureCollection.fromFeatures(markerCoordinates))
                }
            )

style.addLayer(endSymbolLayer)

绘制轨迹LineLayer

同样添加Layer前需要添加 source， List 构建 FeatureCollection, 如下：

mMapView.getMapboxMap().getStyle()?.addSource(
    geoJsonSource(sourceId){
        featureCollection(
            FeatureCollection.fromFeatures(
                arrayOf(
                    Feature.fromGeometry(
                        LineString.fromLngLats(points)
                    )
                )
            )
        )
        lineMetrics(true) // 注意这里，绘制LineGradient 需要添加这行代码。
    }
)

添加单色的 LineLayer

mMapView.getMapboxMap().getStyle()?.addLayer(
                lineLayer(layerId, sourceId){
                    lineDasharray(listOf(0.01, 2.0))
                    lineCap(LineCap.ROUND)
                    lineJoin(LineJoin.ROUND)
                    lineWidth(TRACE_WIDTH.toDouble())
                    lineColor(pathColor)
                }
            )

绘制LineGradient, 先聊 Pre10的方案

 /**
   * Defines a gradient with which to color a line feature. Can only be used with GeoJSON sources that specify `"lineMetrics": true`.
   *
   * @param expression an expression statement
   * @return property wrapper around an expression statement
   */
  public static PropertyValue lineGradient(Expression expression) {
    return new PaintPropertyValue<>("line-gradient", expression);
  }

 /**
  Produces continuous, smooth results by interpolating between pairs of input and output values ("stops"). The `input` may be any numeric expression (e.g., `["get", "population"]`). Stop inputs must be numeric literals in strictly ascending order. The output type must be `number`, `array`, or `color`.
Example usage:
 FillLayer fillLayer = new FillLayer("layer-id", "source-id");
 fillLayer.setProperties(
     fillColor(
       interpolate(
         exponential(0.5f), zoom(),
         stop(1.0f, color(Color.RED)),
         stop(5.0f, color(Color.BLUE)),
         stop(10.0f, color(Color.GREEN))
       )
     )
 );
 
     
Params:
interpolation – type of interpolation
number – the input expression
stops – pair of input and output values
Returns:
expression
See Also:
Style specification
   */
  public static Expression interpolate(@NonNull Interpolator interpolation,
                                       @NonNull Expression number, Stop... stops) {
    return interpolate(interpolation, number, Stop.toExpressionArray(stops));
  }

以上只需创建 Expression.Stop[] stops，根据List 中每个Point 的配速对应的色值，传入即可，绘制LineGradient。

V10 中不再有 Expression 下的Stop类，所以无从谈起创建Stop[] 了，从官方的demo里看 , 最后跟了不定的 stop{}, 可以看见是一个可变参数，所以打算构建一个 stop{} 的数据。

 private fun createHeatmapLayer(): HeatmapLayer {
    return heatmapLayer(
      HEATMAP_LAYER_ID,
      EARTHQUAKE_SOURCE_ID
    ) {
      maxZoom(9.0)
      sourceLayer(HEATMAP_LAYER_SOURCE)
      // Begin color ramp at 0-stop with a 0-transparancy color
      // to create a blur-like effect.
      heatmapColor(
        interpolate {
          linear()
          heatmapDensity()
          stop {
            literal(0)
            rgba(33.0, 102.0, 172.0, 0.0)
          }
          stop {
            literal(0.2)
            rgb(103.0, 169.0, 207.0)
          }
          stop {
            literal(0.4)
            rgb(209.0, 229.0, 240.0)
          }
          stop {
            literal(0.6)
            rgb(253.0, 219.0, 240.0)
          }
          stop {
            literal(0.8)
            rgb(239.0, 138.0, 98.0)
          }
          stop {
            literal(1)
            rgb(178.0, 24.0, 43.0)
          }
        }
      )
      ...
      ...
    }
 }

其实 stop{} 的源码如下，所以需要提供一个高阶函数的数组

    fun stop(block: ExpressionBuilder.() -> Unit) {
      this@ExpressionBuilder.apply(block)
    }

//给Expression.InterpolatorBuilder 添加一个 stops()的扩展方法即可
fun Expression.InterpolatorBuilder.stops(stopList:Array<(Expression.ExpressionBuilder.() -> Unit)?>){
    stopList.forEach { stop ->
        stop?.let {
            apply(it)
        }
    }
}

//将以上的扩展方法作为参数传入 构建 Expression的最后一个参数，
var colorExpression = Expression.interpolate{
                linear()
                lineProgress()
                stops(colorStops)
            }

//最后将 colorExpression 应用到构建lineLayer的 lineGradient(colorExpression) 作为参数即可，大功告成
mMapView.getMapboxMap().getStyle()?.addLayer(
                lineLayer(layerId, sourceId){
                    lineCap(LineCap.ROUND)
                    lineJoin(LineJoin.ROUND)
                    lineWidth(5.0)
                  lineGradient(colorExpression)
                }
            )

到此这篇关于Android基于Mapbox V10 绘制LineGradient轨迹的文章就介绍到这了,更多相关Android Mapbox 绘制内容请搜索码农之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持码农之家！

上一篇：Android文件存储SharedPreferences源码解析
下一篇：Android开发之Gradle 进阶Tasks深入了解

参考资料

Android性能优化之线程监控与线程统一详解

发布：2023-03-10

这篇文章主要为大家介绍了Android性能优化之线程监控与线程统一详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

Android开发RecyclerView实现折线图效果

发布：2023-03-09

这篇文章主要为大家详细介绍了Android开发RecyclerView实现折线图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

Android文件存储SharedPreferences源码解析

发布：2023-03-02

SharedPreferences是安卓平台上一个轻量级的存储类，用来保存应用的一些常用配置，比如Activity状态，Activity暂停时，将此activity的状态保存到SharedPereferences中；当Activity重载，系统回调方法onSaveInstanceState时，再从SharedPreferences中将值取出