基于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
//返回值的时候需要用异步去承接，所以采用了promise
class 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