參考1：https://blog.csdn.net/lonly_maple/article/details/83658608css
參考2：https://blog.csdn.net/xtfge0915/article/details/80275094#_60html
前提：vue項目在安裝leaflet的基礎上 cnpm install leaflet-draw --save
在 vue項目根目錄的index.html文件中引入vue
<!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文件npm
方法已經寫好了，而後本身在vue的mounted方法內加載地圖，在methods中調用方法便可app
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 = [];
}