Question

我很难找到一个在反应传单地图上绘制Bezier曲线的插件。

对于绘制形状，我们使用npm包react-leaflet-draw，但是在此插件中，没有用于绘制贝塞尔曲线的选项。

这怎么办？有没有用于这种功能的插件。

Answer 1

要绘制Bezier样条线@turf/bezier-spline程序包（Turfjs project的一部分），可以使用以下程序包：

采用一条直线并通过应用Bezier spline返回弯曲的版本算法

以下是如何将其与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>
  );
};

这里是a demo

React Leaflet-绘制贝塞尔曲线

1 个答案: