react-amap-v2/docs/components/tools/overlay-editor.md

高德地图 v2.0 react 组件

---
group:
  title: 基础工具
  order: 10
order: 1
---

# OverlayEditor

## 快速入门

此处给出了最简单示例

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

export default () => {
  const [value, setValue] = useState([
    {
      type: 'circle',
      center: [121.460284, 31.254014],
      radius: 10000,
    },
    {
      type: 'rectangle',
      bounds: {
        southWest: [121.581134, 31.083632],
        northEast: [121.796741, 30.963594],
      },
    },
  ]);

  useEffect(() => {
    console.log('onChange', value);
  }, [value]);

  return (
    <Map>
      <OverlayEditor
        strokeColor="#2ACCE3"
        strokeWeight={5}
        fillColor="#2ACCE3"
        fillOpacity={0.2}
        value={value}
        onChange={value => {
          setValue(value);
        }}
      />
    </Map>
  );
};
```