如何在Mapbox地图上的2个点之间绘制一条直线?

时间:2019-11-18 10:18:52

标签: android kotlin mapbox

我已经在片段中加载了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)
            }
        }

1 个答案:

答案 0 :(得分:1)

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

  1. Point列表中实例化LineString对象。 LineString是GeoJson的实现

  2. 使用Feature对象实例化LineString

  3. FeatureCollection对象实例化一个Feature

  4. 使用GeoJsonSource

  5. 实例化FeatureCollection
  6. GeoJsonSource添加到地图样式

  7. 添加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)