React 传单地图获得经纬度角答案

【问题标题】：React leaflet map get corners lat and longReact 传单地图获得经纬度角
【发布时间】：2021-02-01 21:54:26
【问题描述】：

我正在使用 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

【问题讨论】：

标签： javascript reactjs leaflet react-leaflet

【解决方案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 中。

Working codesandbox

【讨论】：