MouseTool 绘制工具

MouseTool 绘制工具，可以支持绘制 Marker、Circle、Rectangle、Polyline、Polygon 等。支持AMap JS API v1.4.xxx 和 v2.0.xxx。 参考 AMap API。

import { MouseTool } from '@uiw/react-amap';
// 或者单独安装使用
import { MouseTool } from '@uiw/react-amap-mouse-tool';

基本用法

注意，需要加载 ``，需要加载 AMap.MouseTool 插件，如果点击进入当前页面，需要 刷新 页面。

绘制

利用 AMap.MouseTool 绘制折线、弧线、多边形、矩形、圆形等 官方示例

> ⚠️ 注意：需要加载 AMap.MouseTool 插件，如果点击进入当前页面，需要 刷新 页面

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> handleDraw(MouseToolDrawType.MARKER)}&gt;
        绘制 Marker
      </button>
      <button> handleDraw(MouseToolDrawType.POLYLINE)}&gt;
        绘制 Polyline
      </button>
      <button> handleDraw(MouseToolDrawType.POLYGON)}&gt;
        绘制 Polygon
      </button>
       <button> handleDraw(MouseToolDrawType.CIRCLE)}&gt;
        绘制圆形 Circle
      </button>
       <button> handleDraw(MouseToolDrawType.RECTANGLE)}&gt;
        绘制矩形 Rectangle
      </button>
       <button> handleDraw(MouseToolDrawType.MEASUREAREA)}&gt;
        绘制 MeasureArea
      </button>
       <button> handleDraw(MouseToolDrawType.RULE)}&gt;
        绘制 Rule
      </button>
       <button> handleDraw(MouseToolDrawType.RECTZOOMIN)}&gt;
        绘制 RectZoomIn
      </button>
     <button> handleDraw(MouseToolDrawType.RECTZOOMOUT)}&gt;
        绘制 RectZoomOut
      </button> 
      <div style="{{">
        <map>
             {
                setActive(false);
                console.log('onDraw:&gt;&gt;',e)
              }}
            /&gt;
        </map>
      </div>
    
  );
}

const Mount = () =&gt; (
  
     
  
);

export default Mount;

Props