React leaflet map get corners lat and long 回复

Question

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

在我的地图中，我需要显示数据库中的指针（纬度、经度），为此我必须调用后端并获取指针，问题是有很多指针，并且在一次调用中获取所有主题可能会产生问题。

我的想法是，根据用户在地图中的位置，调用后端，只获取与用户正在观看的象限相关的指针，并且只在缩放时调用后端贴图离地表很近。

为了实现这一点我需要做两件事，第一个是获取用户在地图上观看的每个角落的（经度，纬度），第二个是获取缩放（所以，我只执行后端调用是缩放大于 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

Answer 1

这是可以做到的，并且借助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.

中呈现它们

React leaflet map get corners lat and long 回复

React leaflet map get corners lat and long

javascript

leaflet

reactjs

react-leaflet

Working codesandbox