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

Posted 2023-03-29

【中文标题】在 React 中将 mapbox 线变成 turf.js 曲线（贝塞尔）线

【英文标题】：Turn mapbox line into turf.js curved (bezier) line in React

【发布时间】：2021-09-01 07:59:31

【问题描述】：

我正在尝试找到一种方法将常规 mapbox 线变成 Turf.js 提供的贝塞尔曲线

那里的 sn-ps 并不是特别有用 - 他们有一个 addToMap 变量，但没有说明如何处理它 - 我似乎无法弄清楚如何将线添加到地图在反应中。

这是我目前绘制默认/直线的方式：

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

); 常量 [lineLayer] = useState( id: '路线', 来源：'路线'， 类型：'线'， 画： '线宽'：2， '线条颜色': '#007cbf', , );

稍后，在返回：

<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);

在回报中：

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

【参考方案1】：

对于任何回到此主题的人：

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

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