Как использовать get bounds с react-leaflet и данными JSON

Я считаю, что получить границы из библиотеки leaflet Js очень просто, но использование этой функции может быть немного сложным. Поэтому позвольте мне привести пример использования функции get bounds в контексте проекта путем получения местоположения из API (в данном случае данные JSON с долготой и широтой).

Живой проект здесь

В этой статье будут рассмотрены следующие моменты :

• Определение местоположения пользователя с помощью метода locationfound(e)
• Добавление компонента внутри карты для получения границ поля карты
• Сопоставление данных JSON для отображения только тех мест, которые находятся в границах карты.

Прежде всего, позвольте мне провести вас по ситуации, чтобы мы получили четкое представление о том, что мы пытаемся здесь реализовать.

1 - Определение текущего местоположения пользователя

В этом случае пользователи автоматически определяются с помощью метода определения местоположения для Leaflet проверьте следующий пример или проверьте codesandbox

import React,{useEffect, useState} from 'react';
import {useMapEvents} from 'react-leaflet';

const LocateUser = () => {
    
        const map = useMapEvents({
          locationfound(e) {
           map.panTo(e.latlng, map.setView(e.latlng))
           //save location to user session 
            sessionStorage.setItem('userLocation', JSON.stringify(e.latlng));
            localStorage.setItem('userLocation', JSON.stringify(e.latlng));
            map.loading = false;
            setLoading(false);
          },
        })

        useEffect(() => {
          map.locate()
        }, [map])

        
        
        return null;
      
      };

export default LocateUser;

Если вы заметили, что в дополнение к определению местоположения пользователя я использовал sessionStorage для хранения местоположения пользователя, чтобы не летать к нему ✈️ при каждой загрузке страницы, вы также можете подумать о добавлении загрузчика.

2 - Пользовательский компонент для получения границ карты

Этот фрагмент кода позволит нам использовать границы, когда мы будем получать данные о местоположении.

import {
  MapContainer,
  Marker,
  Popup,
  mapRef,
  TileLayer,
  useMapEvents
} from "react-leaflet";

export default function NameOfYourFunction() {
   
   const [request, setRequest] = React.useState([])
   const mapRef = useRef();
   const [currentBoundaries, setCurrentBoundaries] = useState(null);

// create a const to fetch the requests with axios or fetch 
// useEffect

//this is the component that we will use to get the boundries of the map
const InnerComponent = ({ setBoundaries }) => {
    useMapEvents({
      moveend() {
        const map = mapRef.current;
        if (map != null) {
          const { _southWest, _northEast } = map.getBounds();
          setBoundaries({
            _southWest: [_southWest.lat, _southWest.lng],
            _northEast: [_northEast.lat, _northEast.lng]
          });
        }
      },
      dragend() {
        const map = mapRef.current;
        if (map != null) {
          const { _southWest, _northEast } = map.getBounds();
          setBoundaries({
            _southWest: [_southWest.lat, _southWest.lng],
            _northEast: [_northEast.lat, _northEast.lng]
          });
        }
      }
    });
    return null;
  };
// you will return the map here 
}

3 - Получение данных и возврат карты

После того как у вас есть данные в формате JSON, получите их с помощью Axios или fetch и создайте цикл следующим образом:

let counter = 0;

for (let i = 0; i < request.length; i++) {
  if (request[i].latitude >= mapRef.current.getBounds()._southWest.lat &&
  request[i].latitude <= mapRef.current.getBounds()._northEast.lat &&
  request[i].longitude >= mapRef.current.getBounds()._southWest.lng &&
  request[i].longitude <= mapRef.current.getBounds()._northEast.lng) counter++;
}

Наконец, отобразите данные на карте

  return (
    <>
       <MapContainer center = {position}  zoom = {13} scrollWheelZoom = {true} ref = {mapRef}>
       <LocateUser  />
          <InnerComponent setBoundaries = {setCurrentBoundaries} />
          <TileLayer
            attribution='&copy; <a href = "https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            url = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
                <Marker key = {request.id} position = {{ lat: request.latitude, lng: request.longitude }} icon = {markerIcon}>
                  <Popup>
                    {request.description} 
                  </Popup>
                </Marker>
        </MapContainer> 
   <div class = "container">
{request.map((request) => {
                if (request.latitude >= mapRef.current.getBounds()._southWest.lat &&
                  request.latitude <= mapRef.current.getBounds()._northEast.lat &&
                  request.longitude >= mapRef.current.getBounds()._southWest.lng &&
                  request.longitude <= mapRef.current.getBounds()._northEast.lng)
                  return (
                        {/* return the UI components here*/}
                )})}
   </div>
</>
)

Чтобы получить более глубокое представление об этом, проверьте GitHub repo

Надеюсь, это помогло 🤓