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

Question

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

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

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

Answer 1

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

decl.gl , react-map-gl

1. 安装库

2. 使用 Mapbox 中的匹配 API 创建函数：
   https ://docs.mapbox.com/help/tutorials/get-started-map-matching-api/#add-the-map-matching-api 使用 geometries=geojson 选项参数（在匹配调用的 URL 内）

3. 从匹配 API 响应返回几何对象 (data.matchings[0].geometry)

4. 使用新的几何对象创建 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,})
   

5. 将新图层添加到您的地图：

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