feat: 新增组件 AMapMouseTool

src/components/AMapMouseTool/AMapMouseTool.tsx

@@ -0,0 +1,65 @@
+import {
+  forwardRef,
+  useEffect,
+  useState,
+  useImperativeHandle,
+} from 'react';
+
+import useAMap from '../../hooks/useAMap';
+import useAMapEventBinder from '../../hooks/useAMapEventBinder';
+
+import type { AMapMouseToolProps } from './interface';
+
+/**
+ *
+ * Origin Docs See:
+ * https://lbs.amap.com/api/javascript-api/reference/plugin#AMap.MouseTool
+ *
+ */
+const AMapMouseTool = forwardRef<AMap.MouseTool, AMapMouseToolProps>(
+  ({
+    type, options, onCompleted,
+  }, ref) => {
+    const { __AMAP__: AMap, map } = useAMap();
+    const [curInstance, setInstance] = useState<AMap.MouseTool | null>(null);
+
+    useEffect(() => {
+      if (!AMap || !map) return;
+
+      const init = () => {
+        const instance = new AMap.MouseTool(map);
+        setInstance(instance);
+      };
+
+      if (AMap.MouseTool) {
+        init();
+      } else {
+        AMap.plugin(['AMap.MouseTool'], init);
+      }
+    }, [AMap, map]);
+
+    useImperativeHandle(ref, () => curInstance!, [curInstance]);
+
+    useAMapEventBinder(curInstance, 'draw', onCompleted);
+
+    useEffect(() => {
+      let clearEffect;
+      if (!curInstance) return clearEffect;
+
+      clearEffect = () => curInstance.close(false);
+
+      curInstance[type]((options ?? {}) as { [k: string]: any });
+
+      return clearEffect;
+    }, [curInstance, options, type]);
+
+    return null;
+  },
+);
+
+AMapMouseTool.defaultProps = {
+  options: {},
+  onCompleted: undefined,
+};
+
+export default AMapMouseTool;

src/components/AMapMouseTool/index.ts

@@ -0,0 +1,2 @@
+export * from './interface';
+export { default } from './AMapMouseTool';

src/components/AMapMouseTool/interface.ts

@@ -0,0 +1,23 @@
+export type AMapMouseToolProps = {
+  type:
+  | 'marker'
+  | 'circle'
+  | 'rectangle'
+  | 'polyline'
+  | 'polygon'
+  | 'measureArea'
+  | 'rule'
+  | 'rectZoomIn'
+  | 'rectZoomOut';
+  options?:
+  | AMap.MarkerOptions
+  | AMap.PolylineOptions
+  | AMap.PolygonOptions
+  | AMap.RectangleOptions
+  | AMap.CircleOptions
+  | AMap.PolylineOptions
+  | AMap.PolygonOptions
+  | AMap.PolygonOptions
+  | AMap.PolygonOptions;
+  onCompleted?: (e: any) => void;
+};

src/components/AMapMouseTool/stories/AMapMouseTool.stories.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { actions } from '@storybook/addon-actions';
+
+import { AMapMouseTool, AMapMouseToolProps } from 'index';
+import { withAMapContainer } from '../../AMapMap/stories/AMapMap.stories';
+
+const eventHandler = actions('onCompleted');
+
+export default {
+  title: 'Components/Tools/AMapMouseTool',
+  decorators: [withAMapContainer],
+  args: {
+    type: 'polygon',
+    options: {
+      strokeColor: 'red',
+      strokeWeight: 4,
+    },
+    onCompleted: eventHandler.onCompleted,
+  },
+  argTypes: {
+    type: {
+      description: '工具类型',
+      type: { required: true, summary: 'string ' },
+      control: {
+        type: 'select',
+        options: [
+          'marker',
+          'circle',
+          'rectangle',
+          'polyline',
+          'polygon',
+          'measureArea',
+          'rule',
+          'rectZoomIn',
+          'rectZoomOut',
+        ],
+      },
+    },
+    options: {
+      description: '额外参数',
+      type: { summary: 'object' },
+    },
+    onCompleted: {
+      description: '鼠标工具绘制覆盖物结束时触发此事件，obj对象为绘制出来的覆盖物对象',
+      type: { summary: '(event: AMap.Event<"draw">) => void' },
+    },
+  },
+} as Meta;
+
+const Template: Story<AMapMouseToolProps> = (args) => (
+  <AMapMouseTool {...args} />
+);
+
+export const CommonUse = Template.bind({});
+CommonUse.args = {
+  type: 'polygon',
+  options: {
+    strokeColor: 'red',
+    strokeWeight: 4,
+  },
+  onCompleted: eventHandler.onCompleted,
+};

src/index.ts

@@ -17,3 +17,5 @@ export {
   AMapGeoJSONGetOverlayCallback,
   AMapGeoJSONProps,
 } from './components/AMapGeoJSON';
+
+export { default as AMapMouseTool, AMapMouseToolProps } from './components/AMapMouseTool';