鼠标绘制工具

截屏2022-03-01 下午4.20.35.png

引入脚本

首先，需要在你的index.html模板页面头部加载百度地图JavaScript API代码，密钥可去百度地图开放平台官网申请

<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>

引入MapGl库

npm install react-bmapgl

DrawingManager工具类代码

<Map
        style={{ height: 'calc(100vh - 38px - 48px - 64px)' }}
        ref={(r) => {
          mapRef.current = r;
        }}
        center={{ lng: 116.402544, lat: 39.928216 }}
        zoom={13}
      >
        <DrawingManager
          style={{
            top: 130,
            left: 32,
            position: 'absolute',
            width: 360,
            zIndex: 100,
          }}
          enableLimit
          enableCalculate
          onOverlaycomplete={(e, info) => {
            console.log(e, info);
          }}
          map={mapRef.current}
        />
      </Map>