本文将通过编码的方式讲解如何引入Leaflet.draw组件，并绘制点、线、面、圆对象，同时可以计算线的距离，面积，圆半径和点的经纬度等信息。通过本文可了解基本操作，可以基于leaflet扩展相关的绘制组件，为空间检索等功能奠定基础。
本文需要使用的组件：
1、Leaflet.js
2、Leaflet.draw.js 地址：https://github.com/Leaflet/Leaflet.draw
言归正传，开始进入正题
第一步、到github上下载相应的组件包
第二步、在页面上引入绘制组件
<script src="libs/leaflet-src.js"></script>
<link rel="stylesheet" href="libs/leaflet.css"/>
<script src="../../src/Leaflet.draw.js"></script>
<script src="../../src/Leaflet.draw.cn.js"></script>
<script src="../../src/Leaflet.Draw.Event.js"></script>
<link rel="stylesheet" href="../../src/leaflet.draw.css"/>
<script src="../../src/Toolbar.js"></script>
<script src="../../src/Tooltip.js"></script>
<script src="../../src/ext/GeometryUtil.js"></script>
<script src="../../src/ext/LatLngUtil.js"></script>
<script src="../../src/ext/LineUtil.Intersect.js"></script>
<script src="../../src/ext/Polygon.Intersect.js"></script>
<script src="../../src/ext/Polyline.Intersect.js"></script>
<script src="../../src/ext/TouchEvents.js"></script>
<script src="../../src/draw/DrawToolbar.js"></script>
<script src="../../src/draw/handler/Draw.Feature.js"></script>
<script src="../../src/draw/handler/Draw.SimpleShape.js"></script>
<script src="../../src/draw/handler/Draw.Polyline.js"></script>
<script src="../../src/draw/handler/Draw.Marker.js"></script>
<script src="../../src/draw/handler/Draw.Circle.js"></script>
<script src="../../src/draw/handler/Draw.CircleMarker.js"></script>
<script src="../../src/draw/handler/Draw.Polygon.js"></script>
<script src="../../src/draw/handler/Draw.Rectangle.js"></script>
<script src="../../src/edit/EditToolbar.js"></script>
<script src="../../src/edit/handler/EditToolbar.Edit.js"></script>
<script src="../../src/edit/handler/EditToolbar.Delete.js"></script>
<script src="../../src/Control.Draw.js"></script>
<script src="../../src/edit/handler/Edit.Poly.js"></script>
<script src="../../src/edit/handler/Edit.SimpleShape.js"></script>
<script src="../../src/edit/handler/Edit.Rectangle.js"></script>
<script src="../../src/edit/handler/Edit.Marker.js"></script>
<script src="../../src/edit/handler/Edit.CircleMarker.js"></script>
<script src="../../src/edit/handler/Edit.Circle.js"></script>第三步、定义map及layerGroup对象
var map = L.map('map').setView([28.234863, 112.944946], 9);
//底图
var osm = 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
});
var drawnItems = 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(new L.Control.Draw({
edit: {
featureGroup: drawnItems,
poly : {
allowIntersection : false
}
},
draw: {
polygon : {
allowIntersection: false,
showArea:true
}
}
}));第五步、事件绑定，定义绘制对象创建的时候的回调事件，可以获取绘制的图形做一些输出
// Object created - bind popup to layer, add to feature group
map.on(L.Draw.Event.CREATED, function(event) {
var layer = event.layer;
var content = 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.cancel
actions: {
title: '取消绘制',
text: '取消'
},
finish: {
title: '完成绘制',
text: '完成'
},
undo: {
title: '删除最后一个点',
text: '删除最后一个点'
},
buttons: {
polyline: '绘制一条线',
polygon: '绘制一个多边形',
rectangle: '绘制一个矩形',
circle: 'Draw a circle',
marker: 'Draw a marker',
circlemarker: 'Draw a circlemarker'
}
}通过这种方式就可以完成汉化处理，其它语言也是同样的办法处理即可。
