时间戳

首页 > 解决方案 > 使用 React-Leaflet 时如何限制标记的数量？

reactjs - 使用 React-Leaflet 时如何限制标记的数量？

问题描述

我正在尝试使用 React-Leaflet 以便仅在搜索栏中给定的位置周围显示标记。自然，每当加载地图时，我的数据库中的每个标记都会显示在整个地图上，而不仅仅是靠近给定位置的标记。

我确实尝试使用 bounds 和 boundsOptions，认为它可以解决我的问题，但我只得到一个错误，说“递归过多”。

这是我正在使用的代码：

import React, { useState, useEffect, useContext } from 'react';
import MapsAPI from "../services/mapsAPI";
import { Map, Marker, Popup, TileLayer } from 'react-leaflet';
import { toast } from "react-toastify";
import MyContext from '../contexts/PositionContext';


const Maps = (props) => {
    
    const [coordinates, setCoordinates] = useState([]);

    const { position, setPosition } = useContext(MyContext);

    const fetchCoords = async () => {
        try {
            const data = await MapsAPI.findMarkers();

            setCoordinates(data);
        } 
        catch (error) {
            toast.error("Impossible de charger les données");
        }
      };

      useEffect(() => {
        fetchCoords();
    }, []);

    return ( 
        <>   
            <Map center={position} id="mapid" zoom={12} bounds={position} boundsOptions={{padding: [50, 50]}}>
                <TileLayer 
                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                    attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
                    maxZoom= "18"
                />
                {coordinates.map(maps => {
                    
                    const id = maps.id;
                    const ensemble = [maps.latitude, maps.longitude];
                    const adresse = maps.address;
                    return (
                        <Marker position={ensemble} key={id}>
                            <Popup>
                                {adresse}
                            </Popup>
                        </Marker>
                    )
                })
                }
            </Map>           
        </>
     );
}
 
export default Maps;

标签： reactjsleafletreact-leaflet

解决方案

我建议您执行几何检查以查看标记是否在当前地图范围内并有条件地渲染它们。

  1. 因此，您必须制作一个地图参考，以便您可以访问地图组件。
  2. 获取地图边界，如 map.getBounds();
  3. 使用https://turfjs.org/之类的包来转换您的纬度/经度，并将边界映射为要素，因为我认为您不能仅使用地图组件执行此检查
  4. 使用https://turfjs.org/docs/#booleanContains确保标记在范围内，如果为真则渲染它们

推荐阅读