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

Question

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

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

当前路线是绿线，我正在尝试将其更改为橙线

Answer 1

我找到的最佳解决方案是将 react-map-gl 与 deck.gl 库一起使用。

decl.gl, react-map-gl

安装库
使用来自 Mapbox 的匹配 API 创建一个函数：
https://docs.mapbox.com/help/tutorials/get-started-map-matching-api/#add-the-map-matching-api 使用 geometries=geojson 选项参数（在匹配调用的 URL 内）
return 来自匹配 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>)

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

Mapbox react - Display route with adjustments to nearest road using list of location points

mapbox

reactjs

mapbox-gl

react-map-gl