本文将通过编码的方式讲解如何引入Leaflet.draw组件，并绘制点、线、面、圆对象，同时可以计算线的距离，面积，圆半径和点的经纬度等信息。通过本文可了解基本操作，可以基于leaflet扩展相关的绘制组件，为空间检索等功能奠定基础。
本文需要使用的组件：
1、Leaflet.js
2、Leaflet.draw.js 地址：https://github.com/Leaflet/Leaflet.draw
第一步、到github上下载相应的组件包
第二步、在页面上引入绘制组件
<scriptsrc="libs/leaflet-src.js"></script><linkrel="stylesheet"href="libs/leaflet.css"/><scriptsrc="../../src/Leaflet.draw.js"></script><scriptsrc="../../src/Leaflet.draw.cn.js"></script><scriptsrc="../../src/Leaflet.Draw.Event.js"></script><linkrel="stylesheet"href="../../src/leaflet.draw.css"/><scriptsrc="../../src/Toolbar.js"></script><scriptsrc="../../src/Tooltip.js"></script><scriptsrc="../../src/ext/GeometryUtil.js"></script><scriptsrc="../../src/ext/LatLngUtil.js"></script><scriptsrc="../../src/ext/LineUtil.Intersect.js"></script><scriptsrc="../../src/ext/Polygon.Intersect.js"></script><scriptsrc="../../src/ext/Polyline.Intersect.js"></script><scriptsrc="../../src/ext/TouchEvents.js"></script><scriptsrc="../../src/draw/DrawToolbar.js"></script><scriptsrc="../../src/draw/handler/Draw.Feature.js"></script><scriptsrc="../../src/draw/handler/Draw.SimpleShape.js"></script><scriptsrc="../../src/draw/handler/Draw.Polyline.js"></script><scriptsrc="../../src/draw/handler/Draw.Marker.js"></script><scriptsrc="../../src/draw/handler/Draw.Circle.js"></script><scriptsrc="../../src/draw/handler/Draw.CircleMarker.js"></script><scriptsrc="../../src/draw/handler/Draw.Polygon.js"></script><scriptsrc="../../src/draw/handler/Draw.Rectangle.js"></script><scriptsrc="../../src/edit/EditToolbar.js"></script><scriptsrc="../../src/edit/handler/EditToolbar.Edit.js"></script><scriptsrc="../../src/edit/handler/EditToolbar.Delete.js"></script><scriptsrc="../../src/Control.Draw.js"></script><scriptsrc="../../src/edit/handler/Edit.Poly.js"></script><scriptsrc="../../src/edit/handler/Edit.SimpleShape.js"></script><scriptsrc="../../src/edit/handler/Edit.Rectangle.js"></script><scriptsrc="../../src/edit/handler/Edit.Marker.js"></script><scriptsrc="../../src/edit/handler/Edit.CircleMarker.js"></script><scriptsrc="../../src/edit/handler/Edit.Circle.js"></script>
第三步、定义map及layerGroup对象
varmap=L.map('map').setView([28.234863, 112.944946], 9); //底图varosm=L.tileLayer('http://localhost:8086/data/basemap_nowater/1_10_tms/{z}/{x}/{y}.jpg', { maxZoom: 13, minZoom:1, attribution: '本地影像', id: 'mapbox/streets-v11', tileSize: 256, zoomOffset: -1 }); vardrawnItems=L.featureGroup().addTo(map); osm.addTo(map); L.control.layers({ '本地影像': osm.addTo(map) }, { '绘制': drawnItems }, { position: 'topleft', collapsed: false }).addTo(map);
请注意以上代码中drawItems对象很重要，绘制图层需要跟这个对象进行绑定完成对象的绘制，同时定义了一个controls对象对图层进行显示控制。
第四步、map和绘制图层绑定
map.addControl(newL.Control.Draw({ edit: { featureGroup: drawnItems, poly : { allowIntersection : false } }, draw: { polygon : { allowIntersection: false, showArea:true } } }));
第五步、事件绑定
定义绘制对象创建的时候的回调事件，可以获取绘制的图形做一些输出
// Object created - bind popup to layer, add to feature groupmap.on(L.Draw.Event.CREATED, function(event) { varlayer=event.layer; varcontent=getPopupContent(layer); if (content!==null) { layer.bindPopup(content); } drawnItems.addLayer(layer); });
通过以上的步骤，可以完成绘制对象的基本功能，最终效果图如下：
细心的朋友会发现，绘制的提示语句是英文的（国际化操作），如何变成中文的呢？经过查找，在Leaflet.draw.js文件中定义了相关操作描述，我们可以新增一个中文js文件来覆盖默认的提示文件，如Leaflet.draw.cn.js，内容如下：
toolbar: { // #TODO: this should be reorganized where actions are nested in actions// ex: actions.undo or actions.cancelactions: { title: '取消绘制', text: '取消' }, finish: { title: '完成绘制', text: '完成' }, undo: { title: '删除最后一个点', text: '删除最后一个点' }, buttons: { polyline: '绘制一条线', polygon: '绘制一个多边形', rectangle: '绘制一个矩形', circle: 'Draw a circle', marker: 'Draw a marker', circlemarker: 'Draw a circlemarker' } }
通过这种方式就可以完成汉化处理，其它语言也是同样的办法处理即可。
