Vue 使用Leaflet实现地图画矩形查询

直接上代码

1绘制矩形

                const latlngs = [];
 
                map.on('mousedown', onClick);    //点击地图
                map.on('mouseup', onDoubleClick);
                function onClick(e) {
                    console.log(e,'??cc')
                    if (typeof that.tmprec != 'undefined') {
                        that.tmprec.remove();
                    }
                    //左上角坐标
                    latlngs[0] = [e.latlng.lat, e.latlng.lng];
                    //开始绘制，监听鼠标移动事件
                    map.on('mousemove', onMove);

                }

                function onMove(e) {
                    //取消地图的拖拽方式
                    map.dragging.disable();
                    //
                    latlngs[1] = [e.latlng.lat, e.latlng.lng];
                    //删除临时矩形
                    if (typeof that.tmprect != 'undefined') {
                        that.tmprect.remove();
                    }
                    //添加临时矩形
                    that.tmprect = L.rectangle(latlngs, {dashArray: 5}).addTo(map);
                    console.log(that.tmprect,'tmprect1')
                }

                function onDoubleClick(e) {
                    //矩形绘制完成，移除临时矩形，并停止监听鼠标移动事件
                    console.log(that.tmprect,'tmprect2')
                    that.tmprect.remove();
                    map.off('mousemove');
                    //右下角坐标
                    latlngs[1] = [e.latlng.lat, e.latlng.lng];
                    that.rectangle = L.rectangle(latlngs, {
                        color: '#6c54e8',
                        fillOpacity: .2,
                        weight: 5
                    })
                    that.rectangle.addTo(map);
                }

效果：

2 通过绘制矩形 获取矩形这四个角的坐标

通过判断坐标范围生成查询到的点

function onDoubleClick(e) {
                    //矩形绘制完成，移除临时矩形，并停止监听鼠标移动事件
                    
                    that.tmprect.remove();
                    map.off('mousemove');
                    //右下角坐标
                    latlngs[1] = [e.latlng.lat, e.latlng.lng];
                    that.rectangle = L.rectangle(latlngs, {
                        color: '#6c54e8',
                        fillOpacity: .2,
                        weight: 5
                    })
                    that.rectangle.addTo(map);
                    let len = that.Geojsondata.length
                    let addpoint = []
                    //获取范围内点
                    for(let i = 0;i<len;i++){
                        if((that.Geojsondata[i].lay[0] > that.tmprect._latlngs[0][0].lng) &&  (that.Geojsondata[i].lay[0] < that.tmprect._latlngs[0][2].lng)){
                            if((that.Geojsondata[i].lay[1] > that.tmprect._latlngs[0][0].lat) && (that.Geojsondata[i].lay[1] < that.tmprect._latlngs[0][1].lat)){
                                addpoint.push(that.Geojsondata[i])
                            }
                        }
                    }
                    console.log(addpoint,'end')
                    let addlen = addpoint.length
                    //marker生成
                    for(let i = 0;i<addlen;i++){
                        L.marker([addpoint[i].lay[1], addpoint[i].lay[0]]).addTo(map).bindPopup(addpoint[i].name).openPopup()
                    }
                    


                }

效果：