Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@lbh7/react-amap-mouse-tool) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

MouseTool 绘制工具

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

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

基本用法

注意，需要加载 <APILoader plugin="AMap.MouseTool">，需要加载 AMap.MouseTool 插件，如果点击进入当前页面，需要 刷新 页面。

<APILoader plugin="AMap.MouseTool">

绘制

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

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

import ReactDOM from 'react-dom';
import React, { useState, useRef } from 'react';
import { Map, APILoader,  MouseTool,MouseToolDrawType } from '@lbh7/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]} dragEnable={false}>
            <MouseTool
              active={active}
              type={type}
              onDraw={(e) => {
                setActive(false);
                console.log('onDraw:>>',e)
              }}
            />
        </Map>
      </div>
    </>
  );
}

const Mount = () => (
  <APILoader akey="a7a90e05a37d3f6bf76d4a9032fc9129" plugin="AMap.MouseTool">
     <Example />
  </APILoader>
);

export default Mount;

Props

参数	说明	类型	默认值
active	是否开启编辑功能。	`boolean`	-
type	绘制类型	`MouseToolDrawType`	-
drawElementOptions	绘制元素的参数	`AMap.PolygonOptions	AMap.PolylineOptions
onDraw	绘制结束的回调函数	`(event: MouseToolDrawedEvent): void;`
ifClear	鼠标操作关闭的同时清除地图上绘制的所有覆盖物对象	`false`