反应传单绘制Bezier曲线

Question

我有一些困难，以找到一个插件绘制贝塞尔曲线上的反应传单地图。

对于绘制形状，我们使用的npm包反应传单绘制，但在这个插件，没有选择绘制贝塞尔曲线。

这是怎么做到的？有没有这种特性的插件。

Answer 1

要绘制Bezier样条@turf/bezier-spline包(Turfjs项目的一部分)，可以使用以下方法：

获取一条线，并通过应用Bezier样条算法返回曲线版本

以下是如何将其与React-Leaflet集成的说明

• 安装模块：$ npm install @turf/bezier-spline
• 利用bezierSpline函数计算Bézier曲线点，通过GeoJSON组件绘制Bézier曲线点

示例

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

这是演示