基于leaflet封装框选四向，多边形框选从'leaflet'导入L;导入'leaflet-draw'/***case*asyncceju(){*letthat=this*constp1=awaitnewPromise(function(resolve,reject){*leta=newDraw(that.baseMap,that.measureGroup,resolve,reject)*a.rectangle()*});*console.log(p1);**},***///new需要传入map并承接layergroup//需要异步接受返回值，所以promiseclassDraw{constructor(map,measureGroup,resolve,reject){this.map=mapthis.drawDataMap=[]this.stopRectArea=nullthis.locations={}this.resolve=resolvethis.reject=rejectthis.measureGroup=measureGroupthis.geometry=[]}rectangle(){letthat=thisconsole.log('开始框选择');that.map.off("click")that.map.off("dblclick")that.map.off("dblclick")if(that.stopRectArea!=null){//stopRectArea定义在data中，清除重复上拉操作即。地图.off('mousedown',that.stopRectArea.mousedown);}varrectangleMeasure={startPoint:null,endPoint:null,rectangle:null,layer:that.measureGroup,color:"rgba(51,136,255,1)",addRectangle:function(){rectangleMeasure.destory();变种范围=[];bounds.push(rectangleMeasure.startPoint);bounds.push(rectangleMeasure.endPoint);rectangleMeasure.rectangle=L.rectangle(bounds,{color:rectangleMeasure.color,weight:1});rectangleMeasure.rectangle.addTo(rectangleMeasure.layer);rectangleMeasure.layer.addTo(that.map);},mousedown:function(e){rectangleMeasure.rectangle=null;that.map.dragging.disable();rectangleMeasure.startPoint=e.latlng;that.map.on('mousemove',矩形leMeasure.mousemove)},mousemove:function(e){rectangleMeasure.endPoint=e.latlng;rectangleMeasure.addRectangle();that.map.off('mousedown',rectangleMeasure.mousedown).on('mouseup',rectangleMeasure.mouseup);},mouseup:function(){that.map.dragging.enable();that.map.off('mousemove',rectangleMeasure.mousemove).off('mouseup',rectangleMeasure.mouseup);that.locations={};//locations在数据中定义that.locations['leftX']=rectangleMeasure.startPoint.lat;that.locations['leftY']=rectangleMeasure.startPoint.lng;that.locations['rightX']=rectangleMeasure.endPoint.lat;that.locations['rightY']=rectangleMeasure.endPoint.lng;that.locations['layer_id']=rectangleMeasure.layer._leaflet_id;that.locations['layer']=矩形测量层；that.locations['rectangle']=rectangleMeasure.rectangle;that.drawDataMap.push([rectangleMeasure.startPoint.lat,rectangleMeasure.startPoint.lng])that.drawDataMap.push([rectangleMeasure.endPoint.lat,rectangleMeasure.startPoint.lng])that.drawDataMap.push([rectangleMeasure.endPoint.lat,rectangleMeasure.endPoint.lng])that.drawDataMap.push([rectangleMeasure.startPoint.lat,rectangleMeasure.endPoint.lng])that.resolve(that.drawDataMap)},destory:function(){if(rectangleMeasure.矩形)rectangleMeasure.layer.removeLayer(rectangleMeasure.rectangle);}};that.stopRectArea=rectangleMeasure;//记录已经点击拉框按钮，未在地图上拉框that.map.on('mousedown',rectangleMeasure.mousedown);//在地图上拉框}polygon(){letthat=thisthat.measureGroup.clearLayers()变种点，线，tempLines，节点；that.map.off("mousemove")that.map.off("mousedown")that.map.off("mouseup")函数drawPolygon(){that.map.doubleClickZoom.disable();lines=newL.polyline([]);tempLines=newL.polyline([],{dashArray:5});点=[];that.geometry=[];that.map.on('点击',onClick);//点击地图that.map.on('dblclick',onDoubleClick);that.map.on('mousemove',onMove)//双点击地图functiononClick(e){points.push([e.latlng.lat,e.latlng.lng])lines.addLatLng(e.latlng)that.measureGroup.addLayer(tempLines)that.measureGroup.addLayer(lines)node=L.circle(e.latlng,{color:'#ff0000',fillColor:'ff0000',fillOpacity:1})that.measureGroup.addLayer(node)that.geometry.push(node)}functiononMove(e){if(points.length>0){让ls=[points[points.length-1],[e.latlng.lat,e.latlng.lng],points[0]]tempLines.setLatLngs(ls)//that.map.addLayer(tempLines)}}functiononDoubleClick(){that.geometry.push(L.polygon(points).addTo(that.map))that.drawDataMap=pointsthat.drawDataMap.splice(that.drawDataMap.length-1,1)points=[];节点=空；that.map.off('点击',onClick);//点击地图that.map.off('dblclick',onDoubleClick);that.map.off('mousemove',onMove)//双点击地图that.map.doubleClickZoom.enable();that.resolve(that.drawDataMap)}}that.removePolygon()drawPolygon()}removePolygon(){for(letoooofthis.geometry){ooo.remove();}}}导出默认绘图
