leaflet知识点：leaflet.draw的使用指南

一，安装插件

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上对应的就是第一种方法种工具栏的处理逻辑