參考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文件中引入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="./static/lib/CSS/leaflet.css">
<link rel="stylesheet" href="./static/lib/CSS/leaflet-measure-path.css">
<title>test-e-leaflet2</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
<script src="./static/lib/js/leaflet/Leaflet.draw.js"></script> <!--引入這個，不然會報錯-->
<script>
</script>
</html>
.vue文件
方法已經寫好了，然后自己在vue的mounted方法內加載地圖，在methods中調用方法即可
import leaflet from '_leaflet@1.4.0@leaflet'
import LeafletDraw from '_leaflet-draw@1.0.4@leaflet-draw'
var DRAWING = false; //是否正在繪制 var DRAWLAYERS = []; var BarDRAWLAYERS = []; var ISMEASURE = false; //是否是量距 var MEASURETOOLTIP; //量距提示 var MEASUREAREATOOLTIP; //量面提示 var MEASURERESULT = 0; //測量結果 var DRAWPOLYLINE; //繪制的折線 var DRAWMOVEPOLYLINE; //繪制過程中的折線 var DRAWPOLYLINEPOINTS = []; //繪制的折線的節點集 var DRAWPOLYGON; //繪制的面 var DRAWMOVEPOLYGON; //繪制過程中的面 var DRAWPOLYGONPOINTS = []; //繪制的面的節點集 // 測距 function startDrawLine(func) { MEASURERESULT = 0; //測量結果 map.getContainer().style.cursor = 'crosshair'; var shapeOptions = { color: '#F54124', weight: 3, opacity: 0.8, fill: false, clickable: true }, DRAWPOLYLINE = new L.Polyline([], shapeOptions); //繪制的折線 map.addLayer(DRAWPOLYLINE); if (ISMEASURE) { //是否是量距 MEASURETOOLTIP = new L.Tooltip(map); //量距提示 } map.on('mousedown', onClick); map.on('dblclick', onDoubleClick); function onClick(e){ DRAWING = true; //是否正在繪制 DRAWPOLYLINEPOINTS.push(e.latlng); //繪制的折線的節點集 if (DRAWPOLYLINEPOINTS.length > 1 && ISMEASURE) { //是否是量距 MEASURERESULT += e.latlng.distanceTo(DRAWPOLYLINEPOINTS[DRAWPOLYLINEPOINTS.length - 2]); } DRAWPOLYLINE.addLatLng(e.latlng); //繪制的折線 map.on('mousemove', onMove); } function onMove(e){ if (DRAWING) { //是否正在繪制 if (DRAWMOVEPOLYLINE != undefined && DRAWMOVEPOLYLINE != null) { //繪制過程中的折線 map.removeLayer(DRAWMOVEPOLYLINE); } var prevPoint = DRAWPOLYLINEPOINTS[DRAWPOLYLINEPOINTS.length - 1]; DRAWMOVEPOLYLINE = new L.Polyline([prevPoint, e.latlng], shapeOptions); map.addLayer(DRAWMOVEPOLYLINE); if (ISMEASURE) { var distance = MEASURERESULT + e.latlng.distanceTo(DRAWPOLYLINEPOINTS[DRAWPOLYLINEPOINTS.length - 1]); MEASURETOOLTIP.updatePosition(e.latlng); //量距提示 MEASURETOOLTIP.updateContent({ text: '單擊確定點，雙擊結束！', subtext: "總長：" + (distance / 1000).toFixed(2) + "公里" }); } } } function onDoubleClick(e){ map.getContainer().style.cursor = ''; if (DRAWING) { if (DRAWMOVEPOLYLINE != undefined && DRAWMOVEPOLYLINE != null) { map.removeLayer(DRAWMOVEPOLYLINE); DRAWMOVEPOLYLINE = null; } // if (DRAWPOLYLINEPOINTS.length > 1 && ISMEASURE) { // MEASURERESULT += e.latlng.distanceTo(DRAWPOLYLINEPOINTS[DRAWPOLYLINEPOINTS.length - 2]); // var distanceLabel = L.marker(DRAWPOLYLINEPOINTS[DRAWPOLYLINEPOINTS.length - 1], { // icon: new L.divIcon({ // className: 'DistanceLabelStyle', // iconAnchor: [-8, 15], // 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>" // }), // }).addTo(_map); // BarDRAWLAYERS.push(distanceLabel); // } // //移除提示框 // if (MEASURETOOLTIP) { // MEASURETOOLTIP.dispose(); // } BarDRAWLAYERS.push(DRAWPOLYLINE); // if (func) { // func(DRAWPOLYLINEPOINTS); // } DRAWPOLYLINEPOINTS = []; DRAWING = false; ISMEASURE = false; map.off('mousedown'); map.off('mousemove'); map.off('dblclick'); } } } //繪制多邊形 function startDrawPolygon(func) { MEASURERESULT = 0; map.getContainer().style.cursor = 'crosshair'; map.on('mousedown', function (e) { DRAWING = true; DRAWPOLYGONPOINTS.push(e.latlng); DRAWPOLYGON.addLatLng(e.latlng); }); map.on('mousemove', function (e) { if (DRAWING) { if (DRAWMOVEPOLYGON != undefined && DRAWMOVEPOLYGON != null) { map.removeLayer(DRAWMOVEPOLYGON); } var prevPoint = DRAWPOLYGONPOINTS[DRAWPOLYGONPOINTS.length - 1]; var firstPoint = DRAWPOLYGONPOINTS[0]; DRAWMOVEPOLYGON = new L.Polygon([firstPoint, prevPoint, e.latlng], shapeOptions); map.addLayer(DRAWMOVEPOLYGON); if (ISMEASURE && DRAWPOLYGONPOINTS.length > 1) { var tempPoints = []; for (var i = 0; i < DRAWPOLYGONPOINTS.length; i++) { tempPoints.push(DRAWPOLYGONPOINTS[i]); } tempPoints.push(e.latlng); var distance = CalArea(tempPoints); MEASUREAREATOOLTIP.updatePosition(e.latlng); MEASUREAREATOOLTIP.updateContent({ text: '單擊確定點，雙擊結束！', subtext: "總面積：" + (distance / 1000000).toFixed(3) + '平方公里' }); } } }); map.on('dblclick', function (e) { map.getContainer().style.cursor = ''; if (DRAWING) { if (DRAWMOVEPOLYGON != undefined && DRAWMOVEPOLYGON != null) { map.removeLayer(DRAWMOVEPOLYGON); DRAWMOVEPOLYGON = null; } // if (DRAWPOLYGONPOINTS.length > 2 && ISMEASURE) { // MEASURERESULT = CalArea(DRAWPOLYGONPOINTS); // var distanceLabel = L.marker(e.latlng, { // icon: new L.divIcon({ // className: 'DistanceLabelStyle', // iconAnchor: [-8, 15], // 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>" // }), // }).addTo(_map); // BarDRAWLAYERS.push(distanceLabel); // } // 移除提示框 // if (MEASUREAREATOOLTIP) { // MEASUREAREATOOLTIP.dispose(); // } BarDRAWLAYERS.push(DRAWPOLYGON); if (func) { func(DRAWPOLYGONPOINTS); } DRAWPOLYGONPOINTS = []; DRAWING = false; ISMEASURE = false; map.off('mousedown'); map.off('mousemove'); map.off('dblclick'); } }); var shapeOptions = { color: '#F54124', weight: 3, opacity: 0.8, fill: true, fillColor: null, fillOpacity: 0.2, clickable: true }, DRAWPOLYGON = new L.Polygon([], shapeOptions); map.addLayer(DRAWPOLYGON); if (ISMEASURE) { MEASUREAREATOOLTIP = new L.Tooltip(map); } } //面積計算 function CalArea(latLngs) { var pointsCount = latLngs.length, area = 0.0, d2r = Math.PI / 180, p1, p2; if (pointsCount > 2) { for (var i = 0; i < pointsCount; i++) { p1 = latLngs[i]; p2 = latLngs[(i + 1) % pointsCount]; area += ((p2.lng - p1.lng) * d2r) * (2 + Math.sin(p1.lat * d2r) + Math.sin(p2.lat * d2r)); } area = area * 6378137.0 * 6378137.0 / 2.0; } return Math.abs(area); } //清除標繪圖層 function clearMap() { if (MEASURETOOLTIP) { MEASURETOOLTIP.dispose(); } if (MEASUREAREATOOLTIP) { MEASUREAREATOOLTIP.dispose(); } for (var i = 0; i < BarDRAWLAYERS.length; i++) { map.removeLayer(BarDRAWLAYERS[i]); } BarDRAWLAYERS = []; }