在 React 中将 mapbox 线变成 turf.js 曲线（贝塞尔曲线）

Question

我正在尝试找到一种方法将常规 mapbox 线变成 Turf.js

提供的贝塞尔曲线

那里的代码片段不是特别有用 - 它们有一个 addToMap 变量但没有说明如何使用它 - 我似乎无法弄清楚如何将行添加到React 中的地图。

这是我目前绘制 default/straight 线的方式：

const [route] = useState<FeatureCollection<LineString>>({
type: 'FeatureCollection',
features: [
  {
    type: 'Feature',
    geometry: {
      type: 'LineString',
      coordinates: [
        [originAirport.longitude, originAirport.latitude],
        [destinationAirport.longitude, destinationAirport.latitude],
      ],
    },
    properties: {},
  },
],

}); const [lineLayer] = useState({ 编号：'route'，来源：'route'，类型：'line'，画： { 'line-width': 2, 'line-color': '#007cbf', }, });

稍后，在 return:

<Source
    id="map-line"
    type="geojson"
    data={{
      ...route,
      features: [
        {
          ...route.features[0],
          geometry: {
            ...route.features[0].geometry,
            coordinates: [
              [originAirport.longitude, originAirport.latitude],
              [destinationAirport.longitude, destinationAirport.latitude],
            ],
          },
        },
      ],
    }}
  >
    <Layer {...lineLayer} />
  </Source>

我尝试将坐标包装在 turf.bezierSpline fn 中，但失败了。找不到其他添加方式。

我正在使用 react-mapb-gl，但没有太多关于将其与 turf.js 集成的信息。我还尝试添加一个额外的源层，如下所示：

const line = turf.lineString([
  [-76.091308, 18.427501],
  [-76.695556, 18.729501],
]);

const curved = turf.bezierSpline(line);

在return:

<Source id="test" type="geojson" data={curved}>
  <Layer {...lineLayer} />
</Source>

Answer 1

对于任何回到这个话题的人：

问题出在我将数据传递给 Source 的方式上。如果您控制台记录由 curved 编辑的数据 return，它不会像我存储在 route 状态变量中那样 return 整个 FeatureCollection；它只是 return 的一项功能。所以数据应该像这样传递到 Source 中：

<Source id="test" type="geojson" data={{ ...route, features: [curved] }}>
  <Layer {...lineLayer} />
</Source>

在 React 中将 mapbox 线变成 turf.js 曲线（贝塞尔曲线）

Turn mapbox line into turf.js curved (bezier) line in React

javascript

reactjs

mapbox

geojson

turfjs