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

1. 安装库

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

3. 从Matching 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>)