在MapBox中获取两个点之间的方向吗？

我最近在REACT本机上使用MapBox gl，而不是使用Google地图， 我正在尝试添加一个要素，该要素在地图上显示从A点到B点的方向。

或在我的Reaction本机应用程序中使用Mapbox directions API

以下是我尝试的代码，但在挂载屏幕后，应用程序成功崩溃：d

import MapboxGL from '@react-native-mapbox-gl/maps';
import React from 'react';
import {View} from 'react-native';

MapboxGL.setAccessToken(
  '....',
);

class TwoPoints extends React.Component {
  constructor(props) {
    super(props);

    this.featureCollection = {
      type: 'FeatureCollection',
      features: [
        {
          type: 'Feature',
          id: '9d10456e-bdda-4aa9-9269-04c1667d4552',
          properties: {
            icon: 'example',
          },
          geometry: {
            type: 'Point',
            coordinates: [-73.989, 40.733],
          },
        },
        {
          type: 'Feature',
          id: '9d10456e-bdda-4aa9-9269-04c1667d4552',
          properties: {
            icon: 'airport-15',
          },
          geometry: {
            type: 'Point',
            coordinates: [-74, 40.733],
          },
        },
        {
          type: 'Feature',
          id: '9d10456e-bdda-4aa9-9269-04c1667d4552',
          properties: {
            icon: 'pin',
          },
          geometry: {
            type: 'Point',
            coordinates: [-74, 40.733],
          },
        },
      ],
    };
  }
  render() {
    return (
      <View style={{flex: 1}}>
        <MapboxGL.MapView
          ref={c => (this._map = c)}
          zoomEnabled={true}
          style={{flex: 1}}>
          <MapboxGL.ShapeSource shape={this.featureCollection}>
            <MapboxGL.SymbolLayer
              style={{iconColor: 'red'}}
              minZoomLevel={25}
            />
          </MapboxGL.ShapeSource>
        </MapboxGL.MapView>
      </View>
    );
  }
}
export default TwoPoints;

---

解决方案

您可以这样从mapbox-gl-directions导入方向：

import React, { useState, useRef, useCallback } from 'react'
import MapGL from 'react-map-gl'
import Directions from 'react-map-gl-directions'

// Ways to set Mapbox token: https://uber.github.io/react-map-gl/#/Documentation/getting-started/about-mapbox-tokens
const MAPBOX_TOKEN =
  'pk.eyJ1IjoiaGVucmlxdWVub2JyZSIsImEiOiJja3dkZ3c2YmoydzdhMzBvMGRtdWVnd3J2In0.xdCkUviv0yGpX-t8L7ZKQ'

const MapBox = () => {
  const [viewport, setViewport] = useState({
    latitude: -16.6906,
    longitude: -43.8054,
    zoom: 8
  })
  const mapRef = useRef()
  const handleViewportChange = useCallback(
    (newViewport) => setViewport(newViewport),
    []
  )

  const handleGeocoderViewportChange = useCallback((newViewport) => {
    const geocoderDefaultOverrides = { transitionDuration: 1000 }

    return handleViewportChange({
      ...newViewport,
      ...geocoderDefaultOverrides
    })
  }, [])

  return (
    <div style={{ height: '100%' }}>
      <MapGL
        ref={mapRef}
        {...viewport}
        width="100%"
        height="100%"
        mapStyle="mapbox://styles/mapbox/streets-v11"
        onViewportChange={handleViewportChange}
        mapboxApiAccessToken={MAPBOX_TOKEN}
      >
        <Directions
          mapRef={mapRef}
          mapboxApiAccessToken={MAPBOX_TOKEN}
          position="top-left"
          unit="metric"
          language="pt-BR"
        />
      </MapGL>
    </div>
  )
}

export default MapBox