一：说明： 针对高德地图的框选区域类的组件,可以绘制圆,矩形,多边形图形,以及可以进行回退及重置操作功能。

二：使用： npm i @zsqcli/mmapgdraw

import React, {useRef} from 'react'; import MMapdraw from '@zsqcli/mmapgdraw';

const MyComponent = () => { const childFn = useRef() const handleSave = () => { // 获取绘制的地图数据 const mapData = childFn.current.getData() } return ( <Button onClick={()=>{handleSave()}}>保存 <MMapdraw ref={childFn} draggable={true} configer={ x: 0, y: 0, clazz: '', params: {}, url: '', method: 'get', width: '380px', height: '380px', mapCenter: [116.406315, 39.908775], mapMode: '2D', mapKey: 'b4632e015f7c759ad338e6f44b404ca2', mapStyle: 'e7a049b4b7de96fb23f8b1b49e362b56', enableEdit: true, data: [{center:[116.506315, 40.008775], radius:10000, lnglat:[]},{lnglat:[[116.406315, 39.908775],[116.406315, 39.808775],[116.306315, 39.808775],[116.306315, 39.908775]]}], toolShow: ['circle', 'rectangle', 'polygon', 'back', 'clear'] } /> ) }

三：字段说明 x: y: clazz: 可添加的组件的className params: 请求的传参参数 url: 请求的url地址 method: 请求方式 width: 组件的整体宽度 height: 组件的整体高度 mapCenter: 地图的中心点 mapMode: 地图模式 mapKey: 地图Key mapStyle: 地图密钥 enableEdit: 地图图形是否可编辑 data: 数据(分圆和多边形) toolShow: 地图绘制工具栏