直接上代码

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() } }

效果：