React Leaflet - 绘制贝塞尔曲线

Question

我很难找到在 React leaflet map 上绘制贝塞尔曲线的插件。

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

如何做到这一点？有没有这种功能的插件

Answer 1

要绘制贝塞尔曲线 @turf/bezier-spline 包（Turfjs project 的一部分）可以使用：

Takes a line and returns a curved version by applying a Bezier spline algorithm

这是如何将它与 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 - 绘制贝塞尔曲线

React Leaflet - Draw Bezier curve

bezier

drawing

leaflet

reactjs

react-leaflet