基于单张包测距，面测类

importLfrom'leaflet';import'leaflet-draw'classDrawPlug{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.DRAWMOVEPOLYGONDRAWPOLYGONPOINTS=[];//绘制人脸的节点集this.map=map;this.measureGroup=measureGroup;}startDrawLine(){letthat=thisthat.MEASURERESULT=0;//测量结果that.map.getContainer().style.cursor='crosshair';varshapeOptions={颜色：'#3388ff'，权重：3，不透明度：0.8，填充：false，clickable:true}that.DRAWPOLYLINE=newL.Polyline([],shapeOptions);//绘制的折线that.measureGroup.addLayer(that.DRAWPOLYLINE);if(that.ISMEASURE){//是否是测量距离that.MEASURETOOLTIP=newL.Tooltip(that.map);//测量提示}that.map.on('mousedown',onClick);that.map.on('dblclick',onDoubleClick);函数onClick(e){console.log('onClick');那.绘图=真；//是否是.DRAWPOLYLINEPOINTS.push(e.latlng);//绘制折线的节点集if(that.DRAWPOLYLINEPOINTS.length>1&&that.ISMEASURE){//是否是测量距离that.MEASURERESULT+=e.latlng.distanceTo(that.DRAWPOLYLINEPOINTS[that.DRAWPOLYLINEPOINTS.长度-2]);}that.DRAWPOLYLINE.addLatLng(e.latlng);//绘制折线that.map.on('mousemove',onMove);}functiononMove(e){if(that.DRAWING){//正在绘制if(that.DRAWMOVEPOLYLINE!=undefined&&that.DRAWMOVEPOLYLINE!=null){//绘制过程中的折线that.measureGroup.removeLayer(that.DRAWMOVEPOLYLINE);}varprevPoint=that.DRAWPOLYLINEPOINTS[that.DRAWPOLYLINEPOINTS.length-1];that.DRAWMOVEPOLYLINE=newL.Polyline([prevPoint,e.latlng],shapeOptions);that.measureGroup.addLayer(that.DRAWMOVEPOLYLINE);如果(that.ISMEASURE){vardistance=that.MEASURERESULT+e.latlng.distanceTo(that.DRAWPOLYLINEPOINTS[that.DRAWPOLYLINEPOINTS.length-1]);控制台日志（距离）；}}}functiononDoubleClick(e){that.map.getContainer().style.cursor='';/*显示两点距离*/vardistance=that.MEASURERESULT+e.latlng.distanceTo(that.DRAWPOLYLINEPOINTS[that.DRAWPOLYLINEPOINTS.length-1]);varmyIcon=L.divIcon({//html:(distance/1000).toFixed(2)+"公里",className:'my-div-icon',html:"