亲宝软件园·资讯

展开

Android Mapbox 绘制

yxc​​​​​​​ 人气:1

前言

当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<Point>,
        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<Point>,
                   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>): 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<String, Bitmap>) {
    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<Expression> 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<number>`, 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)
                }
            )

加载全部内容

相关教程
猜你喜欢
用户评论