@czty/mmapgdraw v0.0.8

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

二：使用： npm i @czty/mmapgdraw

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

const MyComponent = () => { const childFn = useRef() const handleSave = () => { // 获取绘制的地图数据 const mapData = childFn.current.getData() } return (

<div>
  <Button onClick={()=>{handleSave()}}>保存</Button>
  <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']
    }
  />
</div>

) }

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