如何在本机上在地图框地图上绘制导航线？

问题描述

我正在尝试使用mapBox-sdk从npm包中获取react-native的导航方向：

“ @ mapBox / mapBox-sdk”：“ ^ 0.11.0”

为了渲染mapBox-sdk返回的方向，我使用以下npm包：

“ @ react-native-mapBox-gl / maps”：“ ^ 8.1.0-rc.8”，

我用于检索路线的代码：

import MapBoxGL from '@react-native-mapBox-gl/maps'
// MapBox SDK related package
import MapBoxDirectionsFactory from '@mapBox/mapBox-sdk/services/directions'
import { linestring as makeLinestring } from '@turf/helpers'
import GeoLocationService from '../../services/geolocation/GeoLocationService';
import GeoLocationCore from '@react-native-community/geolocation'

const accesstoken = "ACESS_TOKEN_FROM_MAPBox_API_DASHBOARD"
const directionsClient = MapBoxDirectionsFactory({accesstoken})


  constructor(props) {
    super(props);
    this.state = {
        longitude: 0,latitude: 0,orderLongitude: 0,orderLatitude: 0,route: null,};
  }

async componentDidMount() {
      
      const {route} = this.props

      // Lets say route.params contains the below object:
      // { "longitude": "33.981982","latitude": "-6.851599"}
      console.log("Params from other screen: ",route.params)

      MapBoxGL.setAccesstoken(accesstoken)
      MapBoxGL.setConnected(true);
      MapBoxGL.setTelemetryEnabled(true);
      const permission = await MapBoxGL.requestAndroidLocationPermissions();

      let latitude,longitude;
      if(Platform.OS == "android") {
          GeoLocationService.requestLocationPermission().then(() => {
            GeoLocationCore.getCurrentPosition(
                info => {
                    const { coords } = info
    
                    latitude = coords.latitude
                    longitude = coords.longitude
                    
                    //this.setState({longitude: coords.longitude,latitude: coords.latitude})
                    this.setState({longitude: -6.873795,latitude: 33.990777,orderLongitude: route.params.longitude,orderLatitude: route.params.latitude})
                    console.log("your lon: ",longitude)
                    console.log("your lat",latitude)
                    this.getDirections([-6.873795,33.990777],[route.params.longitude,route.params.latitude])

                },error => console.log(error),{
                    enableHighAccuracy: false,//timeout: 2000,maximumAge: 3600000
                }
            )
        })
      }
  }

  getDirections = async (startLoc,destLoc) => {
      const reqOptions = {
        waypoints: [
          {coordinates: startLoc},{coordinates: destLoc},],profile: 'driving',geometries: 'geojson',};
      const res = await directionsClient.getDirections(reqOptions).send()
      //const route = makeLinestring(res.body.routes[0].geometry.coordinates)
      const route = makeLinestring(res.body.routes[0].geometry.coordinates)
      console.log("Route: ",JSON.stringify(route))
      this.setState({route: route})
      
  }

我用于渲染mapBox-sdk提取的道路的代码：

  renderRoadDirections = () => {
    const { route } = this.state
    return route ? (
      <MapBoxGL.ShapeSource id="routeSource" shape={route.geometry}>
        <MapBoxGL.LineLayer id="routeFill" aboveLayerID="customerAnnotation" style={{lineColor: "#ff8109",linewidth: 3.2,lineCap: MapBoxGL.LineJoin.Round,lineOpacity: 1.84}} />
      </MapBoxGL.ShapeSource>
    ) : null;
  };

我用于呈现地图和路线的代码：

render() {
   return (
       <View style={{ flex: 1 }}>
         <MapBoxGL.MapView
                ref={(c) => this._map = c}
                style={{flex: 1,zIndex: -10}}
                styleURL={MapBoxGL.StyleURL.Street}
                zoomLevel={10}
                showUserLocation={true}
                userTrackingMode={1}
                centerCoordinate={[this.state.longitude,this.state.latitude]}
                logoEnabled={true}
                >
                    {this.renderRoadDirections()}
            <MapBoxGL.Camera
                zoomLevel={10}
                centerCoordinate={[this.state.longitude,this.state.latitude]}
                animationMode="flyTo"
                animationDuration={1200}
            />
        </MapBoxGL.MapView>
       </View>
    )
}

现在，当我尝试渲染GeoJson时，重新获得了未在地图上显示的道路线，因此我认为我的GeoJson可能出了点问题，并从此处对其进行了测试，但看起来不错：

https://geojsonlint.com/

我测试过的GeoJson看起来还不错：

{"type":"Feature","properties":{},"geometry":{"type":"Linestring","coordinates":[[-6.880611,33.9916],[-6.882194,33.990166],[-6.882439,33.99015],[-6.882492,33.990028],[-6.882405,33.98991],[-6.878006,33.990299],[-6.87153,33.990978],[-6.871386,33.990925],[-6.871235,33.991016],[-6.869793,33.991165],[-6.870523,33.990292]]}}

我要实现的示例：

我的代码使道路路线未显示在地图上可能出了什么问题？

解决方法

找到了导致<LineLayer/>未在地图上显示的原因，并从以下行中删除了属性aboveLayerID：

<MapboxGL.LineLayer id="routeFill" aboveLayerID="customerAnnotation" style={{lineColor: "#ff8109",lineWidth: 3.2,lineCap: MapboxGL.LineJoin.Round,lineOpacity: 1.84}} /> 

它变成：

<MapboxGL.LineLayer id="routeFill" style={{lineColor: "#ff8109",lineOpacity: 1.84}} />

结果：