react-amap-v2/docs/components/overlay/bezier-curve.md

高德地图 v2.0 react 组件

---
order: 5
---

# BezierCurve

## 快速入门

此处给出了最简单示例

```tsx
import React, { useState } from 'react';
import { Map, BezierCurve } from 'react-amap-v2';

import Paper from '@material-ui/core/Paper';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Switch from '@material-ui/core/Switch';

export default () => {
  const [editable, setEditable] = useState(false);

  return (
    <Map zoom={14} center={[116.397637, 39.900001]}>
      <Paper
        color="text.primary"
        style={{
          zIndex: 10,
          position: 'absolute',
          top: 20,
          right: 20,
          padding: '0 10px',
        }}
      >
        <FormControlLabel
          control={
            <Switch
              checked={editable}
              onChange={e => setEditable(e.target.checked)}
            />
          }
          label="可编辑"
        />
      </Paper>
      <BezierCurve
        editable={editable}
        fillColor="#52c41a"
        strokeWeight={6}
        editorEvents={{
          end: data => {
            console.log('结束编辑', data);
          },
        }}
        path={[
          //每个弧线段有两种描述方式
          [116.37, 39.91], //起点
          //第一段弧线
          [116.380298, 39.907771, 116.38, 39.9], //控制点，途经点
          //第二段弧线
          [116.385298, 39.907771, 116.4, 39.9], //控制点，途经点//弧线段有两种描述方式1
          //第三段弧线
          [
            //弧线段有两种描述方式2
            [116.392872, 39.887391], //控制点
            [116.40772, 39.909252], //控制点
            [116.41, 39.89], //途经点
          ],
          //第四段弧线
          [116.423857, 39.889498, 116.422312, 39.899639, 116.425273, 39.902273],
          //控制点，控制点，途经点，每段最多两个控制点
        ]}
      />
    </Map>
  );
};
```