一，安装插件
npm i leaflet-draw --save
二，引入插件
import "leaflet-draw";
import "leaflet-draw/dist/leaflet.draw.css";
三，使用插件
leaflet-draw的插件使用有两种方法。
1. 作为工具栏控件加入到地图种使用
//添加绘制图层
const drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
//添加绘制控件
const drawControl = new L.Control.Draw({
draw:{
//绘制线
polyline:true,
//绘制多边形
polygon:true,
//绘制矩形
rectangle:true,
//绘制圆
circle:true,
//绘制标注
marker:true,
//绘制圆形标注
circlemarker:true
},
edit:{
//绘制图层
featureGroup:drawnItems,
//图形编辑控件
edit:true,
//图形删除控件
remove:true,
}
});
//添加绘制控件
map.addControl(drawControl);
2. 不使用工具栏直接绘制图层。
// 图层绘制
new L.Draw.Polyline(map, drawControl.options.polyline).enable()
new L.Draw.Polygon(map, drawControl.options.polygon).enable()
new L.Draw.Rectangle(map, drawControl.options.rectangle).enable()
new L.Draw.Circle(map, drawControl.options.circle).enable()
new L.Draw.Marker(map, drawControl.options.marker).enable()
new L.Draw.CircleMarker(map, drawControl.options.circlemarker).enable()
// 图层编辑
L.polyline(latlngs).editing.enable() // new L.Edit.Poly(layer).enable()
L.polygon(latlngs).editing.enable() // new L.Edit.Poly(layer).enable()
L.rectangle(latlngs).editing.enable() // new L.Edit.Rectangle(layer).enable()
L.circle(latlng).editing.enable() // new L.Edit.Circle(layer).enable()
L.marker(latlng).editing.enable() // new L.Edit.Marker(layer).enable()
L.circleMarker(latlng).editing.enable() // new L.Edit.CircleMarker(layer).enable()
// 图层组批量编辑
const drawnItems = new L.FeatureGroup();
new L.EditToolbar.Edit(map, {
featureGroup:drawnItems,
selectedPathOptions: drawControl.options.edit.selectedPathOptions
}).enable();
// 图层组批量删除
const drawnItems = new L.FeatureGroup();
new L.EditToolbar.Delete(map, {
featureGroup: drawnItems
}).enable();
3. 图层事件
插件推荐使用L.Draw.Event.EVENTNAME常数，也可以直接使用draw:eventname
L.Draw.Event.CREATED = 'draw:created'; // 当一个新的图层被创建时触发
L.Draw.Event.EDITED = 'draw:edited'; // 当图层编辑完成时触发
L.Draw.Event.DELETED = 'draw:deleted'; // 当图层删除完成时触发
L.Draw.Event.DRAWSTART = 'draw:drawstart'; // 当图层开始绘制时触发
L.Draw.Event.DRAWSTOP = 'draw:drawstop';// 当图层绘制完成时触发
L.Draw.Event.DRAWVERTEX = 'draw:drawvertex'; // 当图层绘制拐点时触发
L.Draw.Event.EDITSTART = 'draw:editstart'; // 使用L.EditToolbar.Edit或者用户单击编辑工具按钮启动编辑模式时触发。
L.Draw.Event.EDITMOVE = 'draw:editmove'; // 当用户移动矩形、圆形或标记图层时触发
L.Draw.Event.EDITRESIZE = 'draw:editresize'; // 当用户编辑矩形或圆形图层的大小时触发
L.Draw.Event.EDITVERTEX = 'draw:editvertex';// 当图用户编辑图层拐点时触发
L.Draw.Event.EDITSTOP = 'draw:editstop'; // 当图层编辑完成时触发
L.Draw.Event.DELETESTART = 'draw:deletestart'; // 使用L.EditToolbar.Delete或者用户单击删除工具按钮启动编辑模式时触发。
L.Draw.Event.DELETESTOP = 'draw:deletestop';// 当图层删除完成时触发
L.Draw.Event.TOOLBAROPENED = 'draw:toolbaropened';// 打开工具栏时触发
L.Draw.Event.TOOLBARCLOSED = 'draw:toolbarclosed';// 关闭工具栏时触发
L.Draw.Event.MARKERCONTEXT = 'draw:markercontext';// 当右击标记时触发
ps: 如果发现draw:drawstart一直不触发，查看一下L.Draw.Event.DRAWSTART是不是在enable()方法执行之前监听的。
四，插件多语言
1. 部分修改
L.drawLocal.extend({
draw: {
toolbar: {
buttons: {
polygon: '绘制一个多边形'
}
}
}
});
2.完全修改
L.drawLocal = {
draw: {
toolbar: {
actions: {
title: '取消绘图',
text: '取消',
},
finish: {
title: '完成绘图',
text: '完成',
},
undo: {
title: '删除最后绘制的点',
text: '删除最后的点',
},
buttons: {
polyline: '绘制一个多段线',
polygon: '绘制一个多边形',
rectangle: '绘制一个矩形',
circle: '绘制一个圆',
marker: '绘制一个标记',
circlemarker: '绘制一个圆形标记',
},
},
handlers: {
circle: {
tooltip: {
start: '单击并拖动以绘制圆',
},
radius: 'Radius',
},
circlemarker: {
tooltip: {
start: '单击“地图”以放置圆标记',
},
},
marker: {
tooltip: {
start: '单击“地图”以放置标记',
},
},
polygon: {
tooltip: {
start: '单击开始绘制形状',
cont: '单击继续绘制形状',
end: '单击第一个点关闭此形状',
},
},
polyline: {
error: '<strong>错误:</strong>形状边缘不能交叉！',
tooltip: {
start: '单击开始绘制线',
cont: '单击以继续绘制线',
end: '单击“最后一点”以结束线',
},
},
rectangle: {
tooltip: {
start: '单击并拖动以绘制矩形',
},
},
simpleshape: {
tooltip: {
end: '释放鼠标完成绘图',
},
},
},
},
edit: {
toolbar: {
actions: {
save: {
title: '保存更改',
text: '保存',
},
cancel: {
title: '取消编辑，放弃所有更改',
text: '取消',
},
clearAll: {
title: '清除所有图层',
text: '清除所有',
},
},
buttons: {
edit: '编辑图层',
editDisabled: '无可编辑的图层',
remove: '删除图层',
removeDisabled: '无可删除的图层',
},
},
handlers: {
edit: {
tooltip: {
text: '拖动控制柄或标记以编辑要素',
subtext: '单击“取消”撤消更改',
},
},
remove: {
tooltip: {
text: '单击要删除的要素',
},
},
},
},
};
五，插件说明
1.L.Draw继承关系
Draw.Polyline继承Draw.Feature
Draw.Polygon继承Draw.Polyline
Draw.SimpleShape继承Draw.Feature
Draw.Rectangle继承Draw.SimpleShape
Draw.Circle继承Draw.SimpleShape
Draw.Marker继承Draw.Feature
Draw.CircleMarker继承Draw.Marker
2. L.DrawToolbar和L.EditToolbar上对应的就是第一种方法种工具栏的处理逻辑
