feat: 新增 useDraw 用于对接 L7Draw (#20)

* feat: 1.新增 useDraw 用于对接 L7Draw

* fix: 1.修复 Draw 存在初始值时，drawData 未同步问题

* feat: 1.新增 useLayerGroup 方法

* feat: 1.去除Hook useDrawGroup

Co-authored-by: yanxiong <[email protected]>

package.json

@@ -33,6 +33,8 @@
   },
   "dependencies": {
     "@antv/l7-composite-layers": "^0.1.0-alpha.0",
+    "@antv/l7-draw": "^3.0.0-alpha.15",
+    "@types/geojson": "^7946.0.8",
     "ahooks": "^3.3.13",
     "classnames": "^2.3.1"
   },

src/components/Draw/types.ts

@@ -0,0 +1,20 @@
+import type {
+  DeepPartial,
+  ICircleDrawerOptions,
+  ILineDrawerOptions,
+  IPointDrawerOptions,
+  IPolygonDrawerOptions,
+  IRectDrawerOptions,
+} from '@antv/l7-draw';
+import type { Feature, LineString, Point, Polygon } from 'geojson';
+
+export type FeatureData = Feature<Point> | Feature<LineString> | Feature<Polygon>;
+export type DrawData = FeatureData[];
+
+export type PartialDrawPointOptions = DeepPartial<IPointDrawerOptions>;
+export type PartialDrawLineOptions = DeepPartial<ILineDrawerOptions>;
+export type PartialDrawPolygonOptions = DeepPartial<IPolygonDrawerOptions>;
+export type PartialDrawRectOptions = DeepPartial<IRectDrawerOptions>;
+export type PartialDrawCircleOptions = DeepPartial<ICircleDrawerOptions>;
+
+export type DrawType = 'point' | 'line' | 'polygon' | 'rect' | 'circle';

src/components/Draw/use-draw/constant.ts

@@ -0,0 +1,10 @@
+import { DrawCircle, DrawLine, DrawPoint, DrawPolygon, DrawRect } from '@antv/l7-draw';
+import type { DrawType } from '../types';
+
+export const DRAW_TYPE_MAP: Record<DrawType, any> = {
+  point: DrawPoint,
+  line: DrawLine,
+  polygon: DrawPolygon,
+  rect: DrawRect,
+  circle: DrawCircle,
+};

src/components/Draw/use-draw/demos/default.tsx

@@ -0,0 +1,52 @@
+import { LarkMap, useDraw } from '@antv/larkmap';
+import React, { useEffect } from 'react';
+
+/**
+ * useDraw 必须在 LarkMap 的子孙组件中调用
+ */
+const Draw = () => {
+  const { enable, drawData } = useDraw({
+    type: 'point',
+    options: {
+      initData: [
+        {
+          type: 'Feature',
+          properties: {
+            // @ts-ignore
+            isActive: true,
+          },
+          geometry: {
+            type: 'Point',
+            coordinates: [120.14339447021486, 30.25313608393673],
+          },
+        },
+      ],
+    },
+  });
+
+  useEffect(() => {
+    enable();
+  }, [enable]);
+
+  useEffect(() => {
+    console.log(drawData);
+  }, [drawData]);
+
+  return <></>;
+};
+
+const Default = () => {
+  return (
+    <LarkMap
+      mapType="GaodeV1"
+      mapOptions={{
+        style: 'dark',
+      }}
+      style={{ height: '500px' }}
+    >
+      <Draw />
+    </LarkMap>
+  );
+};
+
+export default Default;

src/components/Draw/use-draw/index.md

@@ -0,0 +1,44 @@
+---
+order: 4
+toc: content
+group:
+  title: 绘制组件
+---
+
+# useDraw
+
+## 介绍
+
+用 Hook 的方式操作和管理 [L7Draw](https://antv.vision/l7-draw-2.0-site/docs/draw/point) 中的绘制实例，以及实例上的数据和方法，该 Hook 需放到容器组件内部才能使用。
+
+## 默认示例
+
+<code src="./demos/default.tsx" compact defaultShowCode></code>
+
+## API
+
+```tsx | pure
+const { draw } = useDraw({
+  type: DrawType,
+  options: DrawOptions,
+});
+```
+
+## Params
+
+| 参数 | 说明 | 类型 |
+| --- | --- | --- |
+| type | L7 Draw 中的绘制类型字符串 | `'point' &#124; 'line' &#124; 'polygon' &#124; 'rect' &#124; 'circle'` |
+| options | type 对应绘制类的 `options` 参数 | [Options](https://antv.vision/l7-draw-2.0-site/docs/draw/point#%E9%85%8D%E7%BD%AE) |
+
+## Result
+
+| 返回值      | 说明               | 类型                                                                             |
+| ----------- | ------------------ | -------------------------------------------------------------------------------- |
+| draw        | 绘制类 Draw 实例   | `DrawPoint &#124; DrawLine &#124; DrawPolygon &#124; DrawRect &#124; DrawCircle` |
+| drawData    | 绘制数据           | `Feature[]`                                                                      |
+| setDrawData | 设置绘制数据的方法 | `(newData: Feature[]) => void`                                                   |
+| getDrawData | 获取绘制数据的方法 | `() => Feature[]`                                                                |
+| isEnable    | 当前 Draw 是否激活 | `boolean`                                                                        |
+| enable      | 启用绘制           | `() => void`                                                                     |
+| disable     | 禁用绘制           | `() => void`                                                                     |

src/components/Draw/use-draw/index.ts

@@ -0,0 +1,87 @@
+import type { Scene } from '@antv/l7';
+import type { BaseMode } from '@antv/l7-draw';
+import { DrawerEvent, DrawEvent } from '@antv/l7-draw';
+import { useUpdateEffect } from 'ahooks';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useScene } from '../../LarkMap/hooks';
+import type { DrawData } from '../types';
+import { DRAW_TYPE_MAP } from './constant';
+import type { UseDrawParams } from './types';
+
+const createDrawInstance: (scene: Scene, config: Pick<UseDrawParams, 'type' | 'options'>) => BaseMode | null = (
+  scene,
+  { type, options },
+) => {
+  const Draw = DRAW_TYPE_MAP[type];
+  if (!Draw) {
+    return null;
+  }
+  return new Draw(scene, options);
+};
+
+export const useDraw = ({ type, options }: UseDrawParams) => {
+  const scene = useScene();
+  const [draw, setDraw] = useState<BaseMode | null>(() => createDrawInstance(scene, { type, options }));
+  // @ts-ignore
+  const [drawData, setDrawData] = useState<DrawData>(() => draw.getData());
+  const [isEnable, setIsEnable] = useState(false);
+
+  const onDrawEnable = useCallback(() => setIsEnable(true), []);
+  const onDrawDisable = useCallback(() => setIsEnable(false), []);
+
+  useUpdateEffect(() => {
+    if (scene) {
+      if (draw) {
+        draw.off(DrawEvent.enable, onDrawEnable);
+        draw.off(DrawEvent.disable, onDrawDisable);
+        draw.destroy();
+        setIsEnable(false);
+      }
+
+      const newDraw = createDrawInstance(scene, {
+        type,
+        options,
+      });
+      newDraw.on(DrawEvent.enable, onDrawEnable);
+      newDraw.on(DrawEvent.disable, onDrawDisable);
+      setDraw(newDraw);
+      // @ts-ignore
+      setDrawData(draw.getData());
+    }
+  }, [type, scene, JSON.stringify(options)]);
+
+  useEffect(() => {
+    const onChange = (data: DrawData) => {
+      setDrawData(data);
+    };
+
+    draw?.on(DrawEvent.change, onChange);
+    return () => {
+      draw?.off(DrawerEvent.change, onChange);
+    };
+  }, [draw]);
+
+  const syncDrawData = useCallback(
+    (newData: DrawData) => {
+      draw?.setData(newData);
+      setDrawData(newData);
+    },
+    [draw],
+  );
+
+  const drawFuncObj = useMemo(() => {
+    return {
+      enable: draw.enable.bind(draw),
+      disable: draw.disable.bind(draw),
+      getDrawData: draw.getData.bind(draw),
+    };
+  }, [draw]);
+
+  return {
+    draw,
+    drawData,
+    setDrawData: syncDrawData,
+    isEnable,
+    ...drawFuncObj,
+  };
+};

src/components/Draw/use-draw/types.ts

@@ -0,0 +1,29 @@
+import type {
+  PartialDrawCircleOptions,
+  PartialDrawLineOptions,
+  PartialDrawPointOptions,
+  PartialDrawPolygonOptions,
+  PartialDrawRectOptions,
+} from '../types';
+
+export type UseDrawParams =
+  | {
+      type: 'point';
+      options: PartialDrawPointOptions;
+    }
+  | {
+      type: 'line';
+      options: PartialDrawLineOptions;
+    }
+  | {
+      type: 'polygon';
+      options: PartialDrawPolygonOptions;
+    }
+  | {
+      type: 'rect';
+      options: PartialDrawRectOptions;
+    }
+  | {
+      type: 'circle';
+      options: PartialDrawCircleOptions;
+    };

src/index.ts

@@ -31,6 +31,11 @@ export { MarkerProps } from './components/Marker/types';
 export { Popup } from './components/Popup';
 export { PopupProps } from './components/Popup/types';
 
+/**
+ * 绘制组件
+ */
+export { useDraw } from './components/Draw/use-draw';
+
 /**
  * 版本号
  * */