参考1：https://blog.csdn.net/lonly\_maple/article/details/83658608
参考2：https://blog.csdn.net/xtfge0915/article/details/80275094#\_60
前提：vue项目在安装leaflet的基础上 cnpm install leaflet-draw --save
在 vue项目根目录的index.html文件中引入
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 6 <link rel="stylesheet" href="https://my.oschina.net//u/4321106/blog/3528070/static/lib/CSS/leaflet.css"> 7 <link rel="stylesheet" href="https://my.oschina.net//u/4321106/blog/3528070/static/lib/CSS/leaflet-measure-path.css"> 8 <title>test-e-leaflet2</title> 9 </head> 10 <body> 11 <div id="app"></div> 12 <!-- built files will be auto injected --> 13 </body> 14 <script src="https://my.oschina.net//u/4321106/blog/3528070/static/lib/js/leaflet/Leaflet.draw.js"></script> <!--引入这个，不然会报错--> 15 16 <script> 17 18 </script> 19</html>
.vue文件
方法已经写好了，然后自己在vue的mounted方法内加载地图，在methods中调用方法即可
import leaflet from '_leaflet@1.4.0@leaflet'
import LeafletDraw from '_leaflet-draw@1.0.4@leaflet-draw'
1var DRAWING = false; //是否正在绘制 2var DRAWLAYERS = []; 3var BarDRAWLAYERS = []; 4var ISMEASURE = false; //是否是量距 5var MEASURETOOLTIP; //量距提示 6var MEASUREAREATOOLTIP; //量面提示 7var MEASURERESULT = 0; //测量结果 8 9var DRAWPOLYLINE; //绘制的折线 10var DRAWMOVEPOLYLINE; //绘制过程中的折线 11var DRAWPOLYLINEPOINTS = []; //绘制的折线的节点集 12 13var DRAWPOLYGON; //绘制的面 14var DRAWMOVEPOLYGON; //绘制过程中的面 15var DRAWPOLYGONPOINTS = []; //绘制的面的节点集 16 17// 测距 18function startDrawLine(func) { 19 MEASURERESULT = 0; //测量结果 20 map.getContainer().style.cursor = 'crosshair'; 21 var shapeOptions = { 22 color: '#F54124', 23 weight: 3, 24 opacity: 0.8, 25 fill: false, 26 clickable: true 27 }, 28 DRAWPOLYLINE = new L.Polyline([], shapeOptions); //绘制的折线 29 map.addLayer(DRAWPOLYLINE); 30 if (ISMEASURE) { //是否是量距 31 MEASURETOOLTIP = new L.Tooltip(map); //量距提示 32 } 33 map.on('mousedown', onClick); 34 map.on('dblclick', onDoubleClick); 35 function onClick(e){ 36 DRAWING = true; //是否正在绘制 37 DRAWPOLYLINEPOINTS.push(e.latlng); //绘制的折线的节点集 38 if (DRAWPOLYLINEPOINTS.length > 1 && ISMEASURE) { //是否是量距 39 MEASURERESULT += e.latlng.distanceTo(DRAWPOLYLINEPOINTS[DRAWPOLYLINEPOINTS.length - 2]); 40 } 41 DRAWPOLYLINE.addLatLng(e.latlng); //绘制的折线 42 map.on('mousemove', onMove); 43 } 44 function onMove(e){ 45 if (DRAWING) { //是否正在绘制 46 if (DRAWMOVEPOLYLINE != undefined && DRAWMOVEPOLYLINE != null) { //绘制过程中的折线 47 map.removeLayer(DRAWMOVEPOLYLINE); 48 } 49 var prevPoint = DRAWPOLYLINEPOINTS[DRAWPOLYLINEPOINTS.length - 1]; 50 DRAWMOVEPOLYLINE = new L.Polyline([prevPoint, e.latlng], shapeOptions); 51 map.addLayer(DRAWMOVEPOLYLINE); 52 if (ISMEASURE) { 53 var distance = MEASURERESULT + e.latlng.distanceTo(DRAWPOLYLINEPOINTS[DRAWPOLYLINEPOINTS.length - 1]); 54 MEASURETOOLTIP.updatePosition(e.latlng); //量距提示 55 MEASURETOOLTIP.updateContent({ 56 text: '单击确定点，双击结束！', 57 subtext: "总长：" + (distance / 1000).toFixed(2) + "公里" 58 }); 59 } 60 } 61 } 62 function onDoubleClick(e){ 63 map.getContainer().style.cursor = ''; 64 if (DRAWING) { 65 if (DRAWMOVEPOLYLINE != undefined && DRAWMOVEPOLYLINE != null) { 66 map.removeLayer(DRAWMOVEPOLYLINE); 67 DRAWMOVEPOLYLINE = null; 68 } 69 // if (DRAWPOLYLINEPOINTS.length > 1 && ISMEASURE) { 70 // MEASURERESULT += e.latlng.distanceTo(DRAWPOLYLINEPOINTS[DRAWPOLYLINEPOINTS.length - 2]); 71 // var distanceLabel = L.marker(DRAWPOLYLINEPOINTS[DRAWPOLYLINEPOINTS.length - 1], { 72 // icon: new L.divIcon({ 73 // className: 'DistanceLabelStyle', 74 // iconAnchor: [-8, 15], 75 // html: "<span class='bubbleLabel'><span class='bubbleLabel-bot bubbleLabel-bot-left'></span><span class='bubbleLabel-top bubbleLabel-top-left'></span><span>总长：" + (MEASURERESULT / 1000).toFixed(2) + "公里" + "</span></span>" 76 // }), 77 // }).addTo(_map); 78 // BarDRAWLAYERS.push(distanceLabel); 79 // } 80 // //移除提示框 81 // if (MEASURETOOLTIP) { 82 // MEASURETOOLTIP.dispose(); 83 // } 84 BarDRAWLAYERS.push(DRAWPOLYLINE); 85 // if (func) { 86 // func(DRAWPOLYLINEPOINTS); 87 // } 88 DRAWPOLYLINEPOINTS = []; 89 DRAWING = false; 90 ISMEASURE = false; 91 map.off('mousedown'); 92 map.off('mousemove'); 93 map.off('dblclick'); 94 } 95 } 96 97} 98 99//绘制多边形 100function startDrawPolygon(func) { 101 MEASURERESULT = 0; 102 map.getContainer().style.cursor = 'crosshair'; 103 map.on('mousedown', function (e) { 104 DRAWING = true; 105 DRAWPOLYGONPOINTS.push(e.latlng); 106 DRAWPOLYGON.addLatLng(e.latlng); 107 }); 108 map.on('mousemove', function (e) { 109 if (DRAWING) { 110 if (DRAWMOVEPOLYGON != undefined && DRAWMOVEPOLYGON != null) { 111 map.removeLayer(DRAWMOVEPOLYGON); 112 } 113 var prevPoint = DRAWPOLYGONPOINTS[DRAWPOLYGONPOINTS.length - 1]; 114 var firstPoint = DRAWPOLYGONPOINTS[0]; 115 DRAWMOVEPOLYGON = new L.Polygon([firstPoint, prevPoint, e.latlng], shapeOptions); 116 map.addLayer(DRAWMOVEPOLYGON); 117 118 if (ISMEASURE && DRAWPOLYGONPOINTS.length > 1) { 119 var tempPoints = []; 120 for (var i = 0; i < DRAWPOLYGONPOINTS.length; i++) { 121 tempPoints.push(DRAWPOLYGONPOINTS[i]); 122 } 123 tempPoints.push(e.latlng); 124 var distance = CalArea(tempPoints); 125 MEASUREAREATOOLTIP.updatePosition(e.latlng); 126 MEASUREAREATOOLTIP.updateContent({ 127 text: '单击确定点，双击结束！', 128 subtext: "总面积：" + (distance / 1000000).toFixed(3) + '平方公里' 129 }); 130 } 131 } 132 }); 133 map.on('dblclick', function (e) { 134 map.getContainer().style.cursor = ''; 135 if (DRAWING) { 136 if (DRAWMOVEPOLYGON != undefined && DRAWMOVEPOLYGON != null) { 137 map.removeLayer(DRAWMOVEPOLYGON); 138 DRAWMOVEPOLYGON = null; 139 } 140 // if (DRAWPOLYGONPOINTS.length > 2 && ISMEASURE) { 141 // MEASURERESULT = CalArea(DRAWPOLYGONPOINTS); 142 // var distanceLabel = L.marker(e.latlng, { 143 // icon: new L.divIcon({ 144 // className: 'DistanceLabelStyle', 145 // iconAnchor: [-8, 15], 146 // html: "<span class='bubbleLabel'><span class='bubbleLabel-bot bubbleLabel-bot-left'></span><span class='bubbleLabel-top bubbleLabel-top-left'></span><span>总面积：" + (MEASURERESULT / 1000000).toFixed(3) + "平方公里" + "</span></span>" 147 // }), 148 // }).addTo(_map); 149 // BarDRAWLAYERS.push(distanceLabel); 150 // } 151 // 移除提示框 152 // if (MEASUREAREATOOLTIP) { 153 // MEASUREAREATOOLTIP.dispose(); 154 // } 155 BarDRAWLAYERS.push(DRAWPOLYGON); 156 if (func) { 157 func(DRAWPOLYGONPOINTS); 158 } 159 160 DRAWPOLYGONPOINTS = []; 161 DRAWING = false; 162 ISMEASURE = false; 163 map.off('mousedown'); 164 map.off('mousemove'); 165 map.off('dblclick'); 166 } 167 }); 168 var shapeOptions = { 169 color: '#F54124', 170 weight: 3, 171 opacity: 0.8, 172 fill: true, 173 fillColor: null, 174 fillOpacity: 0.2, 175 clickable: true 176 }, 177 178 DRAWPOLYGON = new L.Polygon([], shapeOptions); 179 map.addLayer(DRAWPOLYGON); 180 if (ISMEASURE) { 181 MEASUREAREATOOLTIP = new L.Tooltip(map); 182 } 183} 184 185//面积计算 186function CalArea(latLngs) { 187 var pointsCount = latLngs.length, 188 area = 0.0, 189 d2r = Math.PI / 180, 190 p1, p2; 191 if (pointsCount > 2) { 192 for (var i = 0; i < pointsCount; i++) { 193 p1 = latLngs[i]; 194 p2 = latLngs[(i + 1) % pointsCount]; 195 area += ((p2.lng - p1.lng) * d2r) * 196 (2 + Math.sin(p1.lat * d2r) + Math.sin(p2.lat * d2r)); 197 } 198 area = area * 6378137.0 * 6378137.0 / 2.0; 199 } 200 return Math.abs(area); 201} 202 203//清除标绘图层 204function clearMap() { 205 if (MEASURETOOLTIP) { 206 MEASURETOOLTIP.dispose(); 207 } 208 if (MEASUREAREATOOLTIP) { 209 MEASUREAREATOOLTIP.dispose(); 210 } 211 for (var i = 0; i < BarDRAWLAYERS.length; i++) { 212 map.removeLayer(BarDRAWLAYERS[i]); 213 } 214 BarDRAWLAYERS = []; 215}