Mapbox react-使用位置点列表显示路线并调整到最近的道路

如何解决Mapbox react-使用位置点列表显示路线并调整到最近的道路

我正在使用带有包装器react-map-gl的mapBox。我正在尝试用我的lat lang点数组绘制路线，我从以下地方找到了部分解决方案： https://github.com/visgl/react-map-gl/issues/591#issuecomment-454307294

问题在于显示的路线与最近的道路不匹配。

当前路线是绿线，我正尝试将其更改为类似于橙色线

解决方法

所以我发现最好的解决方案是将react-map-gl与deck.gl库一起使用。

decl.gl， react-map-gl

安装库
使用Mapbox中的Matching API创建函数：
https://docs.mapbox.com/help/tutorials/get-started-map-matching-api/#add-the-map-matching-api 使用geometries = geojson选项参数（在匹配调用的URL内）
从Matching API响应（data.matchings [0] .geometry）返回几何对象

使用新的几何对象创建GeoJsonLayer：

const layerRoute = new GeoJsonLayer({
 id: "geojson-layer",data: getMatchingGeometry(),filled: true,stroked: false,extruded: true,pickable: true,lineJointRounded: true,getRadius: 50,getElevation: 30,lineWidthScale: 20,})

将新图层添加到地图：

  return (
   <DeckGL layers={[layerRoute]} initialViewState={{ ...initialView }} controller={true}>
     <StaticMap
       height={height}
       width={width}
       mapStyle={mapboxstyle}
       mapboxApiAccessToken={API_TOKEN}
     />
   </DeckGL>)