关于leaflet:基于leaflet封装的框选四至多边形框选的class类

import L from 'leaflet';import 'leaflet-draw'/*** 案例*   async ceju(){*       let that = this*       const p1 = await new Promise(function(resolve,reject){*           let a = new Draw(that.baseMap,that.measureGroup,resolve,reject)*           a.rectangle()*       }); *       console.log(p1);*       *   }, ***///new的时候须要传入map以及承接的layergroup//返回值的时候须要用异步去承接，所以采纳了promiseclass Draw{    constructor(map,measureGroup,resolve,reject){        this.map = map        this.drawDataMap = []        this.stopRectArea = null        this.locations = {}        this.resolve = resolve        this.reject = reject        this.measureGroup = measureGroup        this.geometry = []    }    rectangle(){        let that = this                console.log('开始框选');        that.map.off("click")        that.map.off("dblclick")        that.map.off("dblclick")        if(that.stopRectArea != null){  //stopRectArea在data中定义，革除反复的拉框操作            that.map.off('mousedown', that.stopRectArea.mousedown);        }        var rectangleMeasure = {            startPoint: null,            endPoint: null,            rectangle:null,            layer: that.measureGroup,            color: "rgba(51,136,255,1)",            addRectangle:function(){                rectangleMeasure.destory();                var bounds = [];                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',rectangleMeasure.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在data中定义                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'] = rectangleMeasure.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.rectangle)                    rectangleMeasure.layer.removeLayer(rectangleMeasure.rectangle);            }        };        that.stopRectArea = rectangleMeasure; //记录已点击拉框按钮，未在地图上拉框        that.map.on('mousedown', rectangleMeasure.mousedown); //在地图上拉框    }    polygon(){        let that = this        that.measureGroup.clearLayers()        var points,lines,tempLines,node;        that.map.off("mousemove")        that.map.off("mousedown")        that.map.off("mouseup")        function drawPolygon(){            that.map.doubleClickZoom.disable();            lines = new L.polyline([]);            tempLines = new L.polyline([],{ dashArray: 5 });            points = [];            that.geometry = [];            that.map.on('click', onClick);    //点击地图            that.map.on('dblclick', onDoubleClick);            that.map.on('mousemove', onMove)//双击地图            function onClick(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)            }            function onMove(e) {                if (points.length > 0) {                    let ls = [points[points.length - 1], [e.latlng.lat, e.latlng.lng], points[0]]                    tempLines.setLatLngs(ls)                    // that.map.addLayer(tempLines)                }            }            function onDoubleClick() {                that.geometry.push(L.polygon(points).addTo(that.map))                that.drawDataMap = points                that.drawDataMap.splice(that.drawDataMap.length-1,1)                points = [];                node=null;                that.map.off('click', onClick);    //点击地图                that.map.off('dblclick', onDoubleClick);                that.map.off('mousemove', onMove)//双击地图                that.map.doubleClickZoom.enable();                that.resolve(that.drawDataMap)            }        }        that.removePolygon()        drawPolygon()    }    removePolygon(){        for(let ooo of this.geometry){            ooo.remove();        }    }}export default Draw