共计 5886 个字符，预计需要花费 15 分钟才能阅读完成。
import L from 'leaflet';
import 'leaflet-draw'
class DrawPlug {constructor(map,measureGroup) {
// 测距侧面
this.DRAWING = false; // 是否正在绘制
this.DRAWLAYERS = [];
this.BarDRAWLAYERS = [];
this.ISMEASURE = true; // 是否是量距
this.MEASURETOOLTIP; // 量距提醒
this.MEASUREAREATOOLTIP; // 量面提醒
this.MEASURERESULT = 0; // 测量后果
this.DRAWPOLYLINE; // 绘制的折线
this.DRAWMOVEPOLYLINE; // 绘制过程中的折线
this.DRAWPOLYLINEPOINTS = []; // 绘制的折线的节点集
this.DRAWPOLYGON; // 绘制的面
this.DRAWMOVEPOLYGON; // 绘制过程中的面
this.DRAWPOLYGONPOINTS = []; // 绘制的面的节点集
this.map = map;
this.measureGroup = measureGroup;
}
startDrawLine() {
let that = this
that.MEASURERESULT = 0; // 测量后果
that.map.getContainer().style.cursor = 'crosshair';
var shapeOptions = {
color: '#3388ff',
weight: 3,
opacity: 0.8,
fill: false,
clickable: true
}
that.DRAWPOLYLINE = new L.Polyline([], shapeOptions); // 绘制的折线
that.measureGroup.addLayer(that.DRAWPOLYLINE);
if (that.ISMEASURE) { // 是否是量距
that.MEASURETOOLTIP = new L.Tooltip(that.map); // 量距提醒
}
that.map.on('mousedown', onClick);
that.map.on('dblclick', onDoubleClick);
function onClick(e) {console.log('onClick');
that.DRAWING = true; // 是否正在绘制
that.DRAWPOLYLINEPOINTS.push(e.latlng); // 绘制的折线的节点集
if (that.DRAWPOLYLINEPOINTS.length > 1 && that.ISMEASURE) { // 是否是量距
that.MEASURERESULT += e.latlng.distanceTo(that.DRAWPOLYLINEPOINTS[that.DRAWPOLYLINEPOINTS.length - 2]);
}
that.DRAWPOLYLINE.addLatLng(e.latlng); // 绘制的折线
that.map.on('mousemove', onMove);
}
function onMove(e) {if (that.DRAWING) { // 是否正在绘制
if (that.DRAWMOVEPOLYLINE != undefined && that.DRAWMOVEPOLYLINE != null) { // 绘制过程中的折线
that.measureGroup.removeLayer(that.DRAWMOVEPOLYLINE);
}
var prevPoint = that.DRAWPOLYLINEPOINTS[that.DRAWPOLYLINEPOINTS.length - 1];
that.DRAWMOVEPOLYLINE = new L.Polyline([prevPoint, e.latlng], shapeOptions);
that.measureGroup.addLayer(that.DRAWMOVEPOLYLINE);
if (that.ISMEASURE) {var distance = that.MEASURERESULT + e.latlng.distanceTo(that.DRAWPOLYLINEPOINTS[that.DRAWPOLYLINEPOINTS.length - 1]);
console.log(distance);
}
}
}
function onDoubleClick(e) {that.map.getContainer().style.cursor = '';
/* 显示两点间隔 */
var distance = that.MEASURERESULT + e.latlng.distanceTo(that.DRAWPOLYLINEPOINTS[that.DRAWPOLYLINEPOINTS.length - 1]);
var myIcon = L.divIcon({// html: (distance / 1000).toFixed(2) + "公里",
className: 'my-div-icon',
html:"<div>"+"<p>"+(distance / 1000).toFixed(2)+"KM</p>"+"</div>",
iconSize:26
});
for(let i=0;i<that.DRAWPOLYLINEPOINTS.length-2;i++){let distance_cust = that.DRAWPOLYLINEPOINTS[i].distanceTo(that.DRAWPOLYLINEPOINTS[i+1]);
let myIcon_cust = L.divIcon({// html: (distance / 1000).toFixed(2) + "公里",
className: 'my-div-icon',
html:"<div>"+"<p>"+(distance_cust / 1000).toFixed(2)+"KM</p>"+"</div>",
iconSize:26
});
let site_c = L.polyline([that.DRAWPOLYLINEPOINTS[i],that.DRAWPOLYLINEPOINTS[i+1]],{color:'rgba(0,0,0,0)',}).addTo(that.measureGroup);
let as = site_c.getCenter()
let c = new L.Marker(as, { draggable: false,icon: myIcon_cust});
that.measureGroup.addLayer(c)
}
let marker = new L.Marker(e.latlng, { draggable: false,icon: myIcon});
that.measureGroup.addLayer(marker)
if (that.DRAWING) {if (that.DRAWMOVEPOLYLINE != undefined && that.DRAWMOVEPOLYLINE != null) {that.map.removeLayer(that.DRAWMOVEPOLYLINE);
that.DRAWMOVEPOLYLINE = null;
}
that.BarDRAWLAYERS.push(that.DRAWPOLYLINE);
that.DRAWPOLYLINEPOINTS = [];
that.DRAWING = false;
that.ISMEASURE = false;
that.map.off('mousedown');
that.map.off('mousemove');
that.map.off('dblclick');
}
}
}
clearLayer(){
let that = this
that.measureGroup.clearLayers()}
startDrawPolygon() {
let that = this
that.MEASURERESULT = 0;
that.map.getContainer().style.cursor = 'crosshair';
that.map.on('mousedown', function(e) {
that.DRAWING = true;
that.DRAWPOLYGONPOINTS.push(e.latlng);
that.DRAWPOLYGON.addLatLng(e.latlng);
});
that.map.on('mousemove', function(e) {if (that.DRAWING) {if (that.DRAWMOVEPOLYGON != undefined && that.DRAWMOVEPOLYGON != null) {that.map.removeLayer(that.DRAWMOVEPOLYGON);
}
var prevPoint = that.DRAWPOLYGONPOINTS[that.DRAWPOLYGONPOINTS.length - 1];
var firstPoint = that.DRAWPOLYGONPOINTS[0];
that.DRAWMOVEPOLYGON = new L.Polygon([firstPoint, prevPoint, e.latlng], shapeOptions);
that.measureGroup.addLayer(that.DRAWMOVEPOLYGON);
}
});
that.map.on('dblclick', function(e) {that.map.getContainer().style.cursor = '';
var tempPoints = [];
for (var i = 0; i < that.DRAWPOLYGONPOINTS.length; i++) {tempPoints.push(that.DRAWPOLYGONPOINTS[i]);
}
let as = that.DRAWPOLYGON.getLatLngs()[0]
as.pop()
let last = as[0]
as.push(last)
for(let i=0;i<as.length-1;i++){let distance_cust = as[i].distanceTo(as[i+1]);
let myIcon_cust = L.divIcon({// html: (distance / 1000).toFixed(2) + "公里",
className: 'my-div-icon',
html:"<div>"+"<p>"+(distance_cust / 1000).toFixed(2)+"KM</p>"+"</div>",
iconSize:26
});
let site_c = L.polyline([as[i],as[i+1]],{color:'rgba(0,0,0,0)',}).addTo(that.measureGroup);
let as_ccc = site_c.getCenter()
let c = new L.Marker(as_ccc, { draggable: false,icon: myIcon_cust});
that.measureGroup.addLayer(c)
}
console.log(as);
tempPoints.push(e.latlng);
let CC = that.DRAWPOLYGON.getCenter()
var distance = CalArea(tempPoints);
var myIcon = L.divIcon({html:"<div>"+"<p>"+(distance / 1000000).toFixed(3)+"KM²</p>"+"</div>",
className: 'my-div-icon',
iconSize:26
});
let marker = new L.Marker(CC, { draggable: false,icon:myIcon});
that.measureGroup.addLayer(marker);
// marker.bindPopup("总面积：" + (distance / 1000000).toFixed(3) + '平方公里').openPopup();
if (that.DRAWING) {if (that.DRAWMOVEPOLYGON != undefined && that.DRAWMOVEPOLYGON != null) {that.map.removeLayer(that.DRAWMOVEPOLYGON);
that.DRAWMOVEPOLYGON = null;
}
that.BarDRAWLAYERS.push(that.DRAWPOLYGON);
that.DRAWPOLYGONPOINTS = [];
that.DRAWING = false;
that.ISMEASURE = false;
that.map.off('mousedown');
that.map.off('mousemove');
that.map.off('dblclick');
}
});
var shapeOptions = {
color: '#3388ff',
weight: 3,
opacity: 0.8,
fill: true,
fillColor: null,
fillOpacity: 0.2,
clickable: true
}
that.DRAWPOLYGON = new L.Polygon([], shapeOptions);
that.measureGroup.addLayer(that.DRAWPOLYGON);
if (that.ISMEASURE) {that.MEASUREAREATOOLTIP = new L.Tooltip(that.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);
}
}
}
export default DrawPlug
正文完
