feat: 新增绘制控件DrawControl

.eslintignore

@@ -6,3 +6,4 @@ dist
 es
 lib
 docs-dist
+iconfont.js

.prettierignore

@@ -10,3 +10,4 @@ dist
 es
 lib
 docs-dist
+iconfont.js

docs/docs/control.md

@@ -0,0 +1,79 @@
+---
+title: 控件
+order: 7
+---
+
+# 绘制控件 DrawControl
+
+## 说明
+
+`DrawControl` 基于 L7 的 Control，用于在地图上展示绘制控件，可以通过控件操控不同类型绘制的开关以及清空等操作。
+
+<img src="https://gw.alipayobjects.com/mdn/rms_2591f5/afts/img/A*uP8AQJ-uBVEAAAAAAAAAAAAAARQnAQ" width="200"/>
+
+## 示例
+
+```tsx | pure
+import { DrawControl } from '@antv/l7-draw';
+
+// 实例化 DrawControl 实例
+const drawControl = new DrawControl(scene, {
+  // DrawControl 参数
+  defaultActiveType: 'point',
+});
+
+// 将 Control 添加至地图中
+scene.addControl(drawControl);
+```
+
+## 配置
+
+options 配置是 Draw 实例化的时候，作为第二个参数传入，所有的 options 配置均不是必传项。
+
+| 名称                  | 说明                              | 类型                                | 默认值                                                                                                                  | 示例                                      |
+| --------------------- | --------------------------------- | ----------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- |
+| drawConfig            | 绘制按钮及绘制参数配置            | [DrawBtnConfig](#drawbtnconfig)     | { <br />point: true,<br />line: true,<br />polygon: true,<br />rect: true,<br />circle: true,<br />clear: true,<br /> } | [配置展示按钮](/example/control/draw)     |
+| commonDrawOptions     | 各个绘制类实例化时候的通用配置    | 详情见各个绘制类的配置              | `{}`                                                                                                                    | [通用 Draw 配置](/example/control/common) |
+| defaultActiveType     | 默认激活的绘制类型                | [DrawType](#drawtype) `&#124; null` | `null`                                                                                                                  | [快速开始](/example/control/start)        |
+| className             | 控件 `DOM` 的 `class`             | `string`                            | `''`                                                                                                                    | -                                         |
+| style                 | 控件 `DOM` 的 `style`             | `string`                            | `''`                                                                                                                    | -                                         |
+| buttonClassName       | 控件中按钮 `DOM` 的 `class`       | `string`                            | `''`                                                                                                                    | -                                         |
+| activeButtonClassName | 控件中按钮激活时 `DOM` 的 `class` | `string`                            | `''`                                                                                                                    | -                                         |
+
+### DrawBtnConfig
+
+```ts
+type DrawBtnConfig = {
+  point?: boolean | DeepPartial<IPointDrawerOptions>;
+  line?: boolean | DeepPartial<ILineDrawerOptions>;
+  polygon?: boolean | DeepPartial<IPolygonDrawerOptions>;
+  rect?: boolean | DeepPartial<IRectDrawerOptions>;
+  circle?: boolean | DeepPartial<ICircleDrawerOptions>;
+  clear?: boolean;
+};
+```
+
+### DrawType
+
+```ts
+type DrawType = 'point' | 'line' | 'polygon' | 'rect' | 'circle';
+```
+
+## 方法
+
+| 名称          | 说明                                                             | 类型                                   |
+| ------------- | ---------------------------------------------------------------- | -------------------------------------- |
+| getActiveType | 获取当前激活的绘制类型                                           | `() => DrawType &#124; null`           |
+| setActiveType | 设置当前激活的绘制类型，若当前传入的绘制类型已经激活则会取消激活 | `(DrawType &#124; null) => void`       |
+| getDrawData   | 获取绘制数据                                                     | `() => Record<DrawType, Feature[]>`    |
+| getTypeDraw   | 获取参数类型对应的 `Draw`                                        | `(type: DrawType) => Draw &#124; null` |
+| clearDrawData | 清除绘制数据                                                     | `() => void`                           |
+
+## 事件
+
+[监听事件示例](/example/control/event)
+
+| 名称                                        | 说明                     | 类型                                               |
+| ------------------------------------------- | ------------------------ | -------------------------------------------------- |
+| ControlEvent.DrawChange &#124; 'drawChange' | 当激活绘制变化时触发     | `(type: DrawType &#124; null) => void;`            |
+| ControlEvent.DataChange &#124; 'dataChange' | 当绘制数据发生更改时触发 | `(drawData: Record<DrawType, Feature[]>) => void;` |

docs/example/common/helper.md

@@ -4,7 +4,7 @@ order: 3
 group:
   path: /common
   title: 通用配置
-  order: 6
+  order: 7
 ---
 
 <code src="./helper.tsx" compact="true" defaultShowCode="true"></code>

docs/example/control/add.md

@@ -0,0 +1,10 @@
+---
+title: 添加/移除 Control
+order: 2
+group:
+  path: /control
+  title: 绘制控制条
+  order: 6
+---
+
+<code src="./add.tsx" compact="true" defaultShowCode="true"></code>

docs/example/control/add.tsx

@@ -0,0 +1,65 @@
+import { Scene } from '@antv/l7';
+import { DrawControl } from '@antv/l7-draw';
+import { GaodeMapV2 } from '@antv/l7-maps';
+import React, { useEffect, useState } from 'react';
+import { Button } from 'antd';
+
+const id = String(Math.random());
+
+const Demo: React.FC = () => {
+  const [scene, setScene] = useState<Scene | null>(null);
+  const [drawControl, setDrawControl] = useState<DrawControl | null>(null);
+
+  useEffect(() => {
+    const newScene = new Scene({
+      id,
+      map: new GaodeMapV2({
+        center: [120.151634, 30.244831],
+        pitch: 0,
+        style: 'dark',
+        zoom: 10,
+      }),
+    });
+    newScene.on('loaded', () => {
+      setScene(newScene);
+    });
+  }, []);
+
+  /**
+   * 添加 DrawControl
+   */
+  const onAdd = () => {
+    if (!scene) {
+      return;
+    }
+    // 实例化 DrawControl
+    const newDrawControl = new DrawControl(scene, {});
+    // 将 Control 添加至地图中
+    scene.addControl(newDrawControl);
+    setDrawControl(newDrawControl);
+  };
+
+  /**
+   * 移除 DrawControl
+   */
+  const onRemove = () => {
+    if (!scene || !drawControl) {
+      return;
+    }
+    scene.removeControl(drawControl);
+  };
+
+  return (
+    <div>
+      <div style={{ marginBottom: 6 }}>
+        <Button style={{ marginRight: 6 }} onClick={onAdd}>
+          添加 Control
+        </Button>
+        <Button onClick={onRemove}>移除 Control</Button>
+      </div>
+      <div id={id} style={{ height: 400, position: 'relative' }} />
+    </div>
+  );
+};
+
+export default Demo;

docs/example/control/common.md

@@ -0,0 +1,10 @@
+---
+title: 通用 Draw 配置
+order: 3
+group:
+  path: /control
+  title: 绘制控制条
+  order: 6
+---
+
+<code src="./common.tsx" compact="true" defaultShowCode="true"></code>

docs/example/control/common.tsx

@@ -0,0 +1,73 @@
+import { Scene } from '@antv/l7';
+import { DrawControl } from '@antv/l7-draw';
+import { GaodeMapV2 } from '@antv/l7-maps';
+import React, { useEffect, useState } from 'react';
+import { ControlEvent } from '../../../src';
+
+const id = String(Math.random());
+
+const Demo: React.FC = () => {
+  // const [circleDrawer, setCircleDrawer] = useState<DrawCircle | null>(null);
+
+  useEffect(() => {
+    const scene = new Scene({
+      id,
+      map: new GaodeMapV2({
+        center: [120.151634, 30.244831],
+        pitch: 0,
+        style: 'dark',
+        zoom: 10,
+      }),
+    });
+    scene.on('loaded', () => {
+      const overwriteStyle = {
+        color: '#a03dff',
+      };
+      // 实例化 DrawControl
+      const drawControl = new DrawControl(scene, {
+        // 支持传入所有 Draw 的通用配置，会在各个 Draw 实例化时传入
+        commonDrawOptions: {
+          editable: false,
+          style: {
+            point: {
+              normal: overwriteStyle,
+              hover: overwriteStyle,
+              active: overwriteStyle,
+            },
+            line: {
+              normal: overwriteStyle,
+              hover: overwriteStyle,
+              active: overwriteStyle,
+            },
+            polygon: {
+              normal: overwriteStyle,
+              hover: overwriteStyle,
+              active: overwriteStyle,
+            },
+            midPoint: {
+              normal: overwriteStyle,
+            },
+            dashLine: {
+              normal: overwriteStyle,
+            },
+            text: {
+              normal: overwriteStyle,
+              active: overwriteStyle,
+            },
+          },
+        },
+      });
+
+      // 将 Control 添加至地图中
+      scene.addControl(drawControl);
+    });
+  }, []);
+
+  return (
+    <div>
+      <div id={id} style={{ height: 400, position: 'relative' }} />
+    </div>
+  );
+};
+
+export default Demo;

docs/example/control/draw.md

@@ -0,0 +1,10 @@
+---
+title: 配置展示按钮
+order: 4
+group:
+  path: /control
+  title: 绘制控制条
+  order: 6
+---
+
+<code src="./draw.tsx" compact="true" defaultShowCode="true"></code>

docs/example/control/draw.tsx

@@ -0,0 +1,54 @@
+import { Scene } from '@antv/l7';
+import { DrawControl } from '@antv/l7-draw';
+import { GaodeMapV2 } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+const id = String(Math.random());
+
+const Demo: React.FC = () => {
+  // const [circleDrawer, setCircleDrawer] = useState<DrawCircle | null>(null);
+
+  useEffect(() => {
+    const scene = new Scene({
+      id,
+      map: new GaodeMapV2({
+        center: [120.151634, 30.244831],
+        pitch: 0,
+        style: 'dark',
+        zoom: 10,
+      }),
+    });
+    scene.on('loaded', () => {
+      // 实例化 DrawControl
+      const drawControl = new DrawControl(scene, {
+        defaultActiveType: 'point',
+        drawConfig: {
+          // 支持设置展示的绘制按钮，并传入绘制类实例化时的 options
+          point: {
+            autoActive: false,
+            editable: false,
+            style: {
+              point: {
+                normal: {
+                  color: '#6F17FF',
+                },
+              },
+            },
+          },
+          clear: true,
+        },
+      });
+
+      // 将 Control 添加至地图中
+      scene.addControl(drawControl);
+    });
+  }, []);
+
+  return (
+    <div>
+      <div id={id} style={{ height: 400, position: 'relative' }} />
+    </div>
+  );
+};
+
+export default Demo;

docs/example/control/event.md

@@ -0,0 +1,10 @@
+---
+title: 监听事件
+order: 10
+group:
+  path: /control
+  title: 绘制控制条
+  order: 6
+---
+
+<code src="./event.tsx" compact="true" defaultShowCode="true"></code>

docs/example/control/event.tsx

@@ -0,0 +1,47 @@
+import { Scene } from '@antv/l7';
+import { DrawControl, ControlEvent } from '@antv/l7-draw';
+import { GaodeMapV2 } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+const id = String(Math.random());
+
+const Demo: React.FC = () => {
+  // const [circleDrawer, setCircleDrawer] = useState<DrawCircle | null>(null);
+
+  useEffect(() => {
+    const scene = new Scene({
+      id,
+      map: new GaodeMapV2({
+        center: [120.151634, 30.244831],
+        pitch: 0,
+        style: 'dark',
+        zoom: 10,
+      }),
+    });
+    scene.on('loaded', () => {
+      // 实例化 DrawControl
+      const drawControl = new DrawControl(scene, {
+        defaultActiveType: 'point',
+      });
+
+      // 将 Control 添加至地图中
+      scene.addControl(drawControl);
+
+      drawControl.on(ControlEvent.DrawChange, (newType) => {
+        console.log('当前激活的绘制发生更改', newType);
+      });
+
+      drawControl.on(ControlEvent.DataChange, (newData) => {
+        console.log('当前绘制数据发生更改', newData);
+      });
+    });
+  }, []);
+
+  return (
+    <div>
+      <div id={id} style={{ height: 400, position: 'relative' }} />
+    </div>
+  );
+};
+
+export default Demo;

docs/example/control/start.md

@@ -0,0 +1,10 @@
+---
+title: 快速使用
+order: 1
+group:
+  path: /control
+  title: 绘制控制条
+  order: 6
+---
+
+<code src="./start.tsx" compact="true" defaultShowCode="true"></code>