Javascript 反应传单地图获得横向和纵向角

我正在处理react传单，我正在尝试做以下事情：

在我的地图中，我需要显示数据库中的指针（lat，long），要做到这一点，我必须调用后端并获取指针，问题是有很多指针，在一次调用中获取所有主题可能会产生问题

我的想法是，根据用户在地图中的位置，调用后端，只获取与用户正在观察的象限相关的指针，并且仅在地图缩放接近曲面时调用后端

要实现这一点，我需要两件事，第一件是获取用户在地图上看到的每个角落的（经度、纬度），第二件是获取缩放（因此，我只执行后端调用，因为缩放大于15）

例如，当地图的缩放为15时，角点为：

左上角：[40.06957696，-105.10070800781251]

右上角：[40.06957696，-104.30969238281251]

左下角：[39.81477752660833，-105.10070800781251]

右下角：[39.81477752660833，-104.30969238281251]

我可以生成一个只获取属于那里的指针的请求

有没有一种方法可以获得这些数据？你认为有更好的办法解决这个问题吗？谢谢你的回答

这是一个用于处理地图的代码示例，下面的代码与问题无关，只是让您知道我如何处理地图

 import React from 'react'
import { MapContainer, Marker, TileLayer, useMapEvents } from 'react-leaflet'
import { iconMap } from '../../assets/customeIcon/iconMap';
import 'leaflet/dist/leaflet.css'



const MapView = ({ selectedPosition, setSelectedPosition, editable }) => {

    

    const [initialPosition, setInitialPosition] = React.useState([38, -101]); 
 

    const Markers = () => {

        const map = useMapEvents({
            click(e) {
                if(editable){
                setSelectedPosition([
                    e.latlng.lat,
                    e.latlng.lng
                ]);
            }
            },
        })

        return (
            selectedPosition ?
                <Marker
                    key={selectedPosition[0]}
                    position={selectedPosition}
                    interactive={false}
                    icon={iconMap}
                />
                : null
        )

    }



    return  <MapContainer center={selectedPosition || initialPosition} zoom={editable? 5:15} >
        <TileLayer url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
        ></TileLayer>
      <Markers />         
    </MapContainer>
}

export default MapView

从“React”导入React
从“react传单”导入{MapContainer、Marker、TileLayer、useMapEvents}
从“../../assets/customeIcon/iconMap”导入{iconMap}；
导入“传单/目录/传单.css”
常量映射视图=（{selectedPosition，setSelectedPosition，editable}）=>{
常量[initialPosition，setInitialPosition]=React.useState（[38，-101]）；
常量标记=（）=>{
const map=useMapEvents({
点击（e）{
如果（可编辑）{
设置选定位置([
e、 latlng.lat，
e、 latlng.lng
]);
}
},
})
返回(
选择的位置？
：null
)
}
返回
}
导出默认地图视图

这是可以做到的，通过react-Failure v3的新事件处理，它可以在自己的组件中很好地完成。首先需要的是对底层

L.map

的引用，并且需要连接到映射的本机事件。您可以使用RLV3的新

useMapEvents

hook来实现这一点：

函数makeACall（边界、缩放、缩放阈值=8）{
如果（缩放>缩放阈值）{
fetch（'your.endpoint'）
.then（res=>res.json（））
.然后（res=>setMarkersArray（res.markers））
}
}
常量映射事件=（）=>{
const map=useMapEvents({
moveend:（）=>makeACall（map.getBounds（），map.getZoom（）），
zoomend:（）=>makeACall（map.getBounds（），map.getZoom（））
});
返回null；
};

然后将

作为

MapContainer

的子级包含。现在，地图将在每个

zoomend

或

moveend

上获取标记。我向您展示的这种格式假定标记数据是以

latlng

数组的形式出现的，您可以

.map

覆盖这些标记数据，以在

MapContainer

中渲染它们