参考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="https://my.oschina.net//u/4321106/blog/3528070/static/lib/CSS/leaflet.css">
<link rel="stylesheet" href="https://my.oschina.net//u/4321106/blog/3528070/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="https://my.oschina.net//u/4321106/blog/3528070/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 = [];
}
