Превратите линию mapbox в изогнутую (безье) линию turf.js в React

Я пытаюсь найти способ превратить обычную линию карты в кривую Безье, как это предусмотрено Turf.js< /а>

Фрагменты там не особенно полезны — у них есть переменная addToMap, но не сказано, что с ней делать — и я не могу понять, как добавить строку на карту в React.

Вот как я сейчас рисую стандартную/прямую линию:

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({id: 'route', source: 'route', type: 'line', paint: {'line-width': 2, 'line-color': '#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>

reactjs javascript mapbox geojson turfjs
person crevulus    schedule 16.06.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Для тех, кто возвращается к этой теме:

Проблема заключалась в том, как я передал данные в Source. Если вы зарегистрируете в консоли данные, возвращенные curved, они не вернут целое FeatureCollection, как я сохранял в своей переменной состояния route; он просто возвращает одну функцию. Таким образом, данные должны быть переданы в Source следующим образом:

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