如何在 Mapbox 地图上的 2 个点之间画一条直线？

Question

我已经在我的 Fragment 中加载了一个 Mapbox 地图：

xml

<com.mapbox.mapboxsdk.maps.MapView
    android:id="@+id/mapView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    mapbox:mapbox_cameraZoomMax="@integer/maxZoom"
    mapbox:mapbox_cameraZoom="@integer/defaultZoom"
    mapbox:mapbox_cameraZoomMin="@integer/minZoom"
    mapbox:mapbox_uiRotateGestures="false"
    mapbox:mapbox_uiTiltGestures="false"
    mapbox:mapbox_uiScrollGestures="false"
    mapbox:mapbox_uiDoubleTapGestures="false" />

片段

    /** Initialise Mapbox **/
        mapView = view.findViewById(R.id.mapView)
        mapView?.onCreate(savedInstanceState)
        val destinationMarker = ContextCompat.getDrawable(activity, R.drawable.dest_logo) ?: return
        mapView?.getMapAsync { mapboxMap ->
            this.mapboxMap = mapboxMap
            this.mapboxMap.setStyle(Style.MAPBOX_STREETS) { style ->
                style.addImage("destination", destinationMarker)
                showUserLocation(style)
                resetCamera()
            }
        }

@SuppressWarnings("MissingPermission")
private fun showUserLocation(style: Style){
    // If permissions are granted, show/get user user1location. Else, return to TurnOnLocationActivity
    if (PermissionsManager.areLocationPermissionsGranted(activity)){
        val activity = activity ?: return
        val locationComponentOptions = LocationComponentOptions.builder(activity)
            .bearingTintColor(Color.WHITE)
            .accuracyAlpha(0.1f)
            .build()

        val locationComponentActivationOptions = LocationComponentActivationOptions
            .builder(activity, style)
            .locationComponentOptions(locationComponentOptions)
            .useDefaultLocationEngine(true)
            .build()
        val mapView = mapView ?: return returnToLoginPage()
        if (!style.isFullyLoaded) return returnToLoginPage()
        symbolManager = SymbolManager(mapView, mapboxMap, style)
        locationComponent = mapboxMap.locationComponent
        locationComponent?.activateLocationComponent(locationComponentActivationOptions)
        locationComponent?.isLocationComponentEnabled = true
        locationComponent?.cameraMode = CameraMode.TRACKING
        locationComponent?.renderMode = RenderMode.COMPASS
        return createLocationEngine()
    } else {
        Toast.makeText(context, "Permissions not granted", Toast.LENGTH_LONG).show()
        return returnToLocationPage()
    }

}

@SuppressWarnings("MissingPermission")
private fun createLocationEngine(){
    // Get current user1location
    val activity = activity ?: return
    locationEngine = LocationEngineProvider.getBestLocationEngine(activity)
    // After user1location has been loaded, configure mapBox settings
    mapboxMap.uiSettings.isCompassEnabled = false
}

我想在地图上的 2 Point 之间画一条直线。假设我有 -37.791890, 145.119387 和 -37.790597, 145.116213 作为我的 2 点 - 我将如何画一条直线？

编辑

FeatureCollection 没有出现：

/** Initialise Mapbox **/
        mapView = view.findViewById(R.id.mapView)
        mapView?.onCreate(savedInstanceState)
        val destinationMarker = ContextCompat.getDrawable(activity, R.drawable.dest_logo) ?: return
        mapView?.getMapAsync { mapboxMap ->
            this.mapboxMap = mapboxMap
            this.mapboxMap.setStyle(Style.MAPBOX_STREETS) { style ->
                style.addImage("destination", destinationMarker)
                val routeCoordinates: List<Point> = listOf(Point.fromLngLat(145.152088, -37.759647))
                val lineString = LineString.fromLngLats(routeCoordinates)
                val feature = Feature.fromGeometry(lineString)
                val featureCollection = FeatureCollection.fromFeature(feature)
                val geoJsonSource = GeoJsonSource("line-source", featureCollection)
                style.addSource(geoJsonSource)
            }
        }

Answer 1

Line 是 Mapbox 的 Feature 子类之一，因此添加 Line 的过程与任何其他功能几乎相同：

实例化 Point 列表中的 LineString 对象。 LineString 是 GeoJson
使用 LineString 对象实例化一个 Feature
从Feature对象实例化一个FeatureCollection
使用FeatureCollection

GeoJsonSource

将GeoJsonSource添加到地图样式
添加一个LineLayer到地图样式

List<Point> routeCoordinates;
...

LineString lineString = LineString.fromLngLats(coordinates);
Feature feature = Feature.fromGeometry(lineString);

FeatureCollection featureCollection = FeatureCollection.fromFeature(feature);
GeoJsonSource geoJsonSource = new GeoJsonSource("line-source", featureCollection);
style.addSource(geoJsonSource);

style.addLayer(new LineLayer("linelayer", "line-source").withProperties(
PropertyFactory.lineDasharray(new Float[] {0.01f, 2f}),
PropertyFactory.lineCap(Property.LINE_CAP_ROUND),
PropertyFactory.lineJoin(Property.LINE_JOIN_ROUND),
PropertyFactory.lineWidth(5f),
PropertyFactory.lineColor(Color.parseColor("#e55e5e"))
));

这可以在您的 map.setStyle() lambda 中完成。

或者，如果您有以下格式的 json（LineString 使用此格式）：

 {
   "TYPE": "LineString",
   "coordinates": [
     [100.0, 0.0],
     [101.0, 1.0]
   ]
 }

你可以跳到第三步，从这个json:

构造一个FeatureCollection

FeatureCollection.fromJson(stringJson)

如何在 Mapbox 地图上的 2 个点之间画一条直线？

How can you draw a straight line between 2 Points on a Mapbox map?

android

kotlin

mapbox