之前的文章（基于Leaflet.draw的gis图形标绘实战）提过如何基于leaflet.draw插件进行基本图形的标绘。在实际项目中，你一定还会遇到以下的需求：在不需要Leaflet.draw按钮触发的事件中绘制一个矩形框，用来生成一个地理空间bbox范围，或者需要自定义绘制一条线，并获取绘制对象的Geojson。
一、如何自定义按钮，并绑定绘制的方法
其实，在不使用LeafLet.draw的前提下，你依然可以通过leaflet的api进行图形绘制。只是我们使用leaflet.draw可以更加流畅的使用绘制功能。前面的内容提过，以下代码为基本标绘的触发绑定代码。
map.addControl(newL.Control.Draw({ edit: { featureGroup: drawnItems, poly : { allowIntersection : false } }, draw: { polygon : { allowIntersection: false, showArea:true } } }));
而在一些场景中，我们只想通过一个按钮就激发绘制功能。这该如何实现呢？好在leafLet.draw本身提供了扩展。
二、功能按钮定义
<divstyle="position: absolute;top: 15px;right: 15px;z-index: 401;"><buttontype="button"onclick="drawRectangle();">绘制矩形</button><buttontype="button"onclick="getBbox();">获取bbox</button><buttontype="button"onclick="getGeojson();">获取Geojson</button><br/><buttontype="button"onclick="drawLine();">绘制线</button></div>
首先定义了四个按钮，关键代码如上所示：
三、手动开启绘制
functiondrawRectangle(){ console.log("开始绘制矩形..."); diyDrawLayers.clearLayers(); newL.Draw.Rectangle4Diy(map).enable(); }
通过enable()方法直接触发矩形绘制，我们来看下实际效果：
四、获取FeatureGroup的bbox
functiongetBbox(){ console.log("获取bbox..."); varbounds=diyDrawLayers.getBounds(); console.log("bbox==>"+bounds); console.log("_northEast==>"+bounds._northEast); console.log("_southWest==>"+bounds._southWest); }
五、获取FeatureGroup的Geojson
functiongetGeojson(){ console.log("获取getGeojson..."); console.log(diyDrawLayers.toGeoJSON()); }
六、FeatureGroup图层定义
vardiyDrawLayers=L.featureGroup().addTo(map);
通过以上几个步骤，大致完成了在不依赖leaflet.draw的前提下，直接使用按钮进行矩形绘制，同时获取绘制的矩形bbox的值（可以用来做空间查询），并获取绘制矩形的Geojson。如果文章对你有帮助，欢迎给个赞，有疑问，欢迎留言指正。
