feat:添加MouseTool组件项目,以便支持 MouseTool 插件功能。

package.json

@@ -26,6 +26,7 @@
     "watch:marker": "lerna exec \"tsbb watch\" --scope @uiw/react-amap-marker",
     "watch:label-marker": "lerna exec \"tsbb watch\" --scope @uiw/react-amap-label-marker",
     "watch:mass-marks": "lerna exec \"tsbb watch\" --scope @uiw/react-amap-mass-marks",
+    "watch:mouse-tool": "lerna exec \"tsbb watch\" --scope @uiw/react-amap-mouse-tool",
     "watch:poly-editor": "lerna exec \"tsbb watch\" --scope @uiw/react-amap-poly-editor",
     "watch:polygon": "lerna exec \"tsbb watch\" --scope @uiw/react-amap-polygon",
     "watch:polygon-editor": "lerna exec \"tsbb watch\" --scope @uiw/react-amap-polygon-editor",

packages/amap/src/index.tsx

@@ -21,6 +21,7 @@ export * from '@uiw/react-amap-polygon-editor';
 export * from '@uiw/react-amap-poly-editor';
 export * from '@uiw/react-amap-polyline';
 export * from '@uiw/react-amap-polyline-editor';
+export * from '@uiw/react-amap-mouse-tool';
 export * from '@uiw/react-amap-rectangle';
 export * from '@uiw/react-amap-require-script';
 export * from '@uiw/react-amap-scale-control';

packages/mouse-tool/README.md

@@ -0,0 +1,95 @@
+MouseTool 绘制工具
+===
+
+MouseTool 绘制工具，可以支持绘制 Marker、Circle、Rectangle、Polyline、Polygon 等。支持AMap JS API v1.4.xxx 和 v2.0.xxx。
+参考 [AMap API](https://a.amap.com/jsapi/static/doc/20220913/index.html?v=2#mousetoolmarker)。
+```jsx
+import { MouseTool } from '@uiw/react-amap';
+// 或者单独安装使用
+import { MouseTool } from '@uiw/react-amap-mouse-tool';
+```
+
+### 基本用法
+
+注意，需要加载 `<APILoader plugin="AMap.MouseTool">`，需要加载 `AMap.MouseTool`<!--rehype:style=background: #ffe3da;color: #ff5722;--> 插件，如果点击进入当前页面，需要 `刷新`<!--rehype:style=background: #e91e63;color: #fff;--> 页面。
+
+```jsx
+<APILoader plugin="AMap.MouseTool">
+```
+<!--rehype:style=background: #fff3b7;-->
+
+
+### 绘制
+
+<!--rehype:-->
+```jsx mdx:preview
+import ReactDOM from 'react-dom';
+import React, { useState, useRef } from 'react';
+import { Map, APILoader,  MouseTool,MouseToolDrawType } from '@uiw/react-amap';
+
+const Example = () => {
+  const [active, setActive] = useState(false);
+  const [type,setType]=useState();
+  const handleDraw=(type)=>{
+    setType(type);
+    setActive(true);
+  }
+  return (
+    <>
+      <button onClick={() => handleDraw(MouseToolDrawType.MARKER)}>
+        绘制 Marker
+      </button>
+      <button onClick={() => handleDraw(MouseToolDrawType.POLYLINE)}>
+        绘制 Polyline
+      </button>
+      <button onClick={() => handleDraw(MouseToolDrawType.POLYGON)}>
+        绘制 Polygon
+      </button>
+       <button onClick={() => handleDraw(MouseToolDrawType.CIRCLE)}>
+        绘制 Circle
+      </button>
+       <button onClick={() => handleDraw(MouseToolDrawType.RECTANGLE)}>
+        绘制 Rectangle
+      </button>
+       <button onClick={() => handleDraw(MouseToolDrawType.MEASUREAREA)}>
+        绘制 MeasureArea
+      </button>
+       <button onClick={() => handleDraw(MouseToolDrawType.RULE)}>
+        绘制 Rule
+      </button>
+       <button onClick={() => handleDraw(MouseToolDrawType.RECTZOOMIN)}>
+        绘制 RectZoomIn
+      </button>
+     <button onClick={() => handleDraw(MouseToolDrawType.RECTZOOMOUT)}>
+        绘制 RectZoomOut
+      </button> 
+      <div style={{ width: '100%', height: '500px' }}>
+        <Map zoom={14} center={[116.400274, 39.905812]}>
+            <MouseTool
+              active={active}
+              type={type}
+              onDraw={(e) => {
+                setActive(false);
+                console.log('onDraw:>>',e)
+              }}
+            />
+        </Map>
+      </div>
+    </>
+  );
+}
+
+const Mount = () => (
+  <APILoader akay="a7a90e05a37d3f6bf76d4a9032fc9129" plugin="AMap.MouseTool">
+     <Example />
+  </APILoader>
+);
+
+export default Mount;
+```
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+|--------- |-------- |--------- |-------- |
+| active | 是否开启编辑功能。 | `boolean` | - |

packages/mouse-tool/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@uiw/react-amap-mouse-tool",
+  "version": "4.1.1",
+  "description": "高德地图 MouseTool 绘制工具。",
+  "homepage": "https://uiwjs.github.io/react-amap/#/mouse-tool",
+  "main": "cjs/index.js",
+  "module": "esm/index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/uiwjs/react-amap.git"
+  },
+  "author": "peidongGuo <gpd_wfe@163.com>",
+  "license": "MIT",
+  "files": [
+    "src",
+    "esm",
+    "cjs"
+  ],
+  "keywords": [
+    "react-amap",
+    "api-loader",
+    "amap",
+    "editor",
+    "polygon",
+    "mouse-tool",
+    "map",
+    "react",
+    "bdmap",
+    "types",
+    "高德",
+    "地图",
+    "高德地图"
+  ],
+  "peerDependencies": {
+    "react": ">=16.14.0",
+    "react-dom": ">=16.14.0"
+  },
+  "dependencies": {
+    "@uiw/react-amap-map": "4.1.1",
+    "@uiw/react-amap-types": "4.1.1",
+    "@uiw/react-amap-utils": "4.1.1"
+  },
+  "devDependencies": {
+    "@types/react": "~18.0.0",
+    "@types/react-dom": "~18.0.0"
+  }
+}

packages/mouse-tool/src/index.tsx

@@ -0,0 +1,75 @@
+import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+import { useEventProperties } from '@uiw/react-amap-utils';
+import { useMapContext } from '@uiw/react-amap-map';
+
+export interface MouseToolProps extends Partial<AMap.MouseTool>, AMap.MouseToolEvents {
+  active: boolean;
+  type: MouseToolDrawType; // TODO transform enum
+  drawElementOptions?: AMap.PolygonOptions | AMap.PolylineOptions | AMap.MarkerOptions | AMap.CircleOptions;
+}
+export enum MouseToolDrawType {
+  MARKER,
+  POLYLINE,
+  POLYGON,
+  CIRCLE,
+  RECTANGLE,
+  MEASUREAREA,
+  RULE,
+  RECTZOOMIN,
+  RECTZOOMOUT,
+}
+export const MouseTool = forwardRef<MouseToolProps, MouseToolProps>((props, ref) => {
+  const { active, type, drawElementOptions } = props;
+  const { map } = useMapContext();
+  const [mouseTool, setMouseTool] = useState<AMap.MouseTool>();
+  useImperativeHandle(ref, () => ({ ...props, mouseTool: mouseTool }));
+
+  useEffect(() => {
+    if (map && !mouseTool && AMap && AMap.MouseTool) {
+      const instance = new AMap.MouseTool(map);
+      setMouseTool(instance);
+    }
+  }, [map, Map, AMap.MouseTool]);
+
+  useEffect(() => {
+    if (!mouseTool) {
+      return;
+    }
+    if (!active) {
+      mouseTool.close();
+    } else {
+      switch (type) {
+        case MouseToolDrawType.MARKER:
+          mouseTool.marker(drawElementOptions ? drawElementOptions : {});
+          break;
+        case MouseToolDrawType.POLYLINE:
+          mouseTool.polyline(drawElementOptions ? drawElementOptions : ({} as any));
+          break;
+        case MouseToolDrawType.POLYGON:
+          mouseTool.polygon(drawElementOptions ? drawElementOptions : {});
+          break;
+        case MouseToolDrawType.CIRCLE:
+          mouseTool.circle(drawElementOptions ? drawElementOptions : ({} as any));
+          break;
+        case MouseToolDrawType.RECTANGLE:
+          mouseTool.rectangle(drawElementOptions ? drawElementOptions : ({} as any));
+          break;
+        case MouseToolDrawType.MEASUREAREA:
+          mouseTool.measureArea(drawElementOptions ? drawElementOptions : {});
+          break;
+        case MouseToolDrawType.RULE:
+          mouseTool.rule(drawElementOptions ? drawElementOptions : ({} as any));
+          break;
+        case MouseToolDrawType.RECTZOOMIN:
+          mouseTool.rectZoomIn(drawElementOptions ? drawElementOptions : {});
+          break;
+        case MouseToolDrawType.RECTZOOMOUT:
+          mouseTool.rectZoomOut(drawElementOptions ? drawElementOptions : {});
+          break;
+      }
+    }
+  }, [active]);
+
+  useEventProperties<AMap.MouseTool, AMap.MouseToolEvents>(mouseTool!, props, ['onDraw']);
+  return null;
+});

packages/mouse-tool/src/type.d.ts

@@ -0,0 +1 @@
+/// <reference types="@uiw/react-amap-types" />

packages/mouse-tool/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig",
+  "include": ["src", "src/**/*"],
+  "files": ["./src/type.d.ts"],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "outDir": "cjs",
+    "noEmit": false
+  }
+}

packages/poly-editor/src/type.d.ts

@@ -0,0 +1 @@
+/// <reference types="@uiw/react-amap-types" />

packages/polyline-editor/src/type.d.ts

@@ -0,0 +1 @@
+/// <reference types="@uiw/react-amap-types" />

packages/types/src/overlay.d.ts

@@ -1002,6 +1002,51 @@ declare namespace AMap {
     /** 创建一个覆盖物之后触发该事件，target即为创建对象。当editor编辑对象为空时，调用open接口，再点击一次屏幕就会创建新的覆盖物对象 */
     onAdd(data: { target: Polygon|Polyline }): void;
   }
+
+  /**
+   * MouseTool 绘制工具
+   */
+     class MouseTool extends MapEventListener<'draw'> {
+      constructor(map: AMap.Map);
+      /** 要显示的地图对象 */
+      map?: Map;
+
+      /** 开启鼠标画点标注模式。鼠标在地图上单击绘制点标注，标注样式参考MarkerOptions设置 */
+      marker(opts:MarkerOptions):void;
+
+      /** 开启鼠标画圆模式。鼠标在地图上拖动绘制相应的圆形。圆形样式参考CircleOptions设置 */
+      circle(opts:CircleOptions):void;
+
+      /** 开启鼠标画矩形模式。鼠标在地图上拉框即可绘制相应的矩形。矩形样式参考PolygonOptions设置 */
+      rectangle(opts:RectangleOptions):void;
+
+      /** 开启鼠标画折线模式。鼠标在地图上点击绘制折线，鼠标左键双击或右键单击结束绘制，折线样式参考PolylineOptions设置 */
+      polyline(opts:PolylineOptions):void;
+
+      /** 开启鼠标画多边形模式。鼠标在地图上单击开始绘制多边形，鼠标左键双击或右键单击结束当前多边形的绘制，多边形样式参考PolygonOptions设置 */
+      polygon(opts:PolygonOptions):void;
+
+      /** 开启面积量测模式。鼠标在地图上单击绘制量测区域，鼠标左键双击或右键单击结束当前量测操作，并显示本次量测结果。量测面样式参考PolygonOptions设置 */
+      measureArea(opts:PolygonOptions):void;
+
+      /** 开启距离量测模式。鼠标在地图上单击绘制量测节点，并计算显示两两节点之间的距离，鼠标左键双击或右键单击结束当前量测操作。量测线样式参考 PolylineOptions 设置 注：不能同时使用rule方法和RangTool插件进行距离量测 */
+      rule(opts:PolylineOptions):void;
+
+      /** 开启鼠标拉框放大模式。鼠标可在地图上拉框放大地图。矩形框样式参考PolygonOptions设置 */
+      rectZoomIn(opts:PolygonOptions):void;
+
+      /** 开启鼠标拉框缩小模式。鼠标可在地图上拉框缩小地图。矩形框样式参考PolygonOptions设置 */
+     rectZoomOut(opts:PolygonOptions):void;
+
+      /** 关闭当前鼠标操作。参数arg设为true时，鼠标操作关闭的同时清除地图上绘制的所有覆盖物对象；设为false时，保留所绘制的覆盖物对象。默认为false */
+      close(ifClear:Boolean=false):void;
+
+    }
+    interface MouseToolEvents {
+      /** 鼠标工具绘制覆盖物结束时触发此事件，obj对象为绘制出来的覆盖物对象。 */
+      onDraw(event: {type:string, obj: Marker|Circle|Polygon|Polyline }): void;
+    }
+
   /**
    * 用于在地图上弹出一个详细信息展示窗体，地图上只允许同时展示 `1` 个信息窗体
    */

website/src/pages/mouse-tool/index.tsx

@@ -0,0 +1,6 @@
+import Markdown from '../../components/Markdown';
+
+export default class Page extends Markdown {
+  editorUrl = '/packages/mouse-tool/README.md';
+  getMdStr = () => import('@uiw/react-amap-mouse-tool/README.md');
+}

website/src/router.tsx

@@ -94,6 +94,10 @@ export const routes = [
     path: '/circle-marker',
     component: lazy(() => import('./pages/circle-marker')),
   },
+  {
+    path: '/mouse-tool',
+    component: lazy(() => import('./pages/mouse-tool')),
+  },
   {
     path: '/weather',
     component: lazy(() => import('./pages/weather')),
@@ -210,6 +214,10 @@ export const menus = [
     label: 'PolyEditor 编辑器',
     path: '/poly-editor',
   },
+  {
+    label: 'MouseTool 绘制工具',
+    path: '/mouse-tool',
+  },
   {
     label: 'BesizerCurve 贝塞尔曲线',
     path: '/beizer-curve',