React Leaflet - Нарисуйте кривую Безье

Question

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

Для рисования фигур мы используем пакетpm-leaflet-draw npm, но в этом плагине нетопция для рисования кривой Безье.

Как это можно сделать?Есть ли какой-нибудь плагин для такого рода подвигов.

Answer 1

Чтобы нарисовать пакет Безье-сплайна @turf/bezier-spline (часть проекта Turfjs ), который:

берет линию и возвращает изогнутую версию, применяя Алгоритм Безье алгоритм

Вот инструкция, как интегрировать его с React-Leaflet:

• установить модуль: $ npm install @turf/bezier-spline
• вычислить точки кривой Безье с помощью функции bezierSpline и нарисовать ее с помощью GeoJSON компонента

Пример

const MapExample = props => {

  const line = helpers.lineString([
    [52.5069704,13.2846501],
    [47.3775499,8.4666755],
    [51.5287718,-0.2416804],
  ].map(latLng => [latLng[1],latLng[0]]));

  const curved = bezierSpline(line);

  return (
    <Map center={props.center} zoom={props.zoom}>
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      />
      <GeoJSON
        data={curved}
      />
    </Map>
  );
};

Здесь демо