在React中将mapbox线转换为turf.js曲线(贝塞尔曲线)线

import React, { useEffect, useRef } from 'react';
import mapboxgl from 'mapbox-gl';
import * as turf from '@turf/turf';

const MapComponent = () => {
  const mapContainerRef = useRef(null);

  useEffect(() => {
    mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
    const map = new mapboxgl.Map({
      container: mapContainerRef.current,
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [lng, lat],
      zoom: 12
    });

    // 在这里进行Mapbox线到Turf.js曲线的转换
    const mapboxLine = {
      type: 'Feature',
      geometry: {
        type: 'LineString',
        coordinates: [
          [lng1, lat1],
          [lng2, lat2],
          [lng3, lat3]
        ]
      }
    };

    const turfCurve = turf.bezier(mapboxLine);

    // 将Turf.js曲线添加到地图上
    map.on('load', () => {
      map.addSource('curve', {
        type: 'geojson',
        data: turfCurve
      });

      map.addLayer({
        id: 'curve',
        type: 'line',
        source: 'curve',
        paint: {
          'line-color': '#ff0000',
          'line-width': 2
        }
      });
    });

    return () => map.remove();
  }, []);

  return <div ref={mapContainerRef} style={{ width: '100%', height: '400px' }} />;
};