6.0.3 • Published 1 month ago
@uiw/react-amap-mouse-tool v6.0.3
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';
基本用法
注意,需要加载 <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 '@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]} 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 | AMap.MarkerOptions | AMap.CircleOptions | {} |
onDraw | 绘制结束的回调函数 | (event: MouseToolDrawedEvent): void; | |
ifClear | 鼠标操作关闭的同时清除地图上绘制的所有覆盖物对象 | false |
6.0.3
1 month ago
6.0.2
3 months ago
6.0.1
5 months ago
6.0.0
5 months ago
5.0.6
10 months ago
5.0.5
10 months ago
5.0.10
9 months ago
5.0.11
9 months ago
5.0.12
8 months ago
5.0.13
8 months ago
5.0.14
8 months ago
5.0.15
7 months ago
5.0.16
7 months ago
5.0.17
7 months ago
5.0.18
6 months ago
5.0.19
6 months ago
5.0.20
5 months ago
5.0.21
5 months ago
5.0.9
9 months ago
5.0.8
10 months ago
5.0.7
10 months ago
5.0.4
11 months ago
5.0.3
11 months ago
5.0.2
11 months ago
5.0.1
1 year ago
5.0.0
1 year ago
4.5.3
1 year ago
4.6.0
1 year ago
4.5.0
1 year ago
4.4.1
1 year ago
4.4.0
1 year ago
4.5.2
1 year ago
4.5.1
1 year ago
4.4.2
1 year ago
4.3.1
1 year ago
4.3.0
1 year ago
4.2.2
1 year ago
4.2.1
1 year ago
4.2.0
1 year ago
4.1.1
1 year ago