反应传单地图得到角经纬度

如何解决反应传单地图得到角经纬度

我正在使用 react-leaflet 并且我正在尝试做以下事情：

在我的地图中，我需要显示数据库中的指针 (lat,long)，为此我必须调用后端并获取指针，问题是有很多指针，然后获取所有指针单个调用中的主题可能会产生问题。

我的想法是，根据用户在地图中的位置，调用后端只获取用户正在观看的象限相关的指针，只有在地图缩放时才调用后端接近表面。

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

例如，当地图的缩放比例为 15 并且角落为：

corner_top_left: [40.06957696,-105.10070800781251]

corner_top_right: [40.06957696,-104.30969238281251]

corner_bottom_left: [39.81477752660833,-105.10070800781251]

corner_bottom_right: [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-leaflet v3 的新事件处理，它可以在它自己的组件中很好地完成。您首先需要的是对底层 L.map 的引用，并且您需要挂钩到地图的本机事件。您可以使用 RLV3 的新 useMapEvents 钩子执行此操作：

function makeACall(bounds,zoom,zoomThreshold = 8) {
  if (zoom > zoomThreshold) {
    fetch('your.endpoint')
      .then(res => res.json())
      .then(res => setMarkersArray(res.markers))
  }
}

const MapEvents = () => {
  const map = useMapEvents({
    moveend: () => makeACall(map.getBounds(),map.getZoom()),zoomend: () => makeACall(map.getBounds(),map.getZoom())
  });
  return null;
};

然后包含 <MapEvents /> 作为 MapContainer 的子项。现在您的地图将获取每个 zoomend 或 moveend 上的标记。我向您展示的这种格式假设标记数据采用 latlngs 数组的形式，您可以 .map 覆盖这些数据以在 MapContainer 中呈现它们。

Working codesandbox