React Leaflet地图缩放时过滤可视地点列表的实现方案问询

核心思路 #

1. 状态共享：将地点数据和地图可视边界状态统一放到父组件，避免Map和List重复请求数据库
2. 边界监听：监听地图的缩放/拖拽结束事件，实时获取当前可视范围
3. 动态过滤：根据可视边界筛选出范围内的地点，传给列表组件渲染

代码修改步骤 #

1. 父组件（App.js）

import Map from './Map';
import List from './List';
import { useState, useEffect } from 'react';
import { collection, query, onSnapshot } from 'firebase/firestore';
import { db } from './firebase'; // 替换成你的Firebase配置路径

const App = () => {
  const [allLocations, setAllLocations] = useState([]);
  const [visibleBounds, setVisibleBounds] = useState(null);

  // 一次性订阅Firestore数据
  useEffect(() => {
    const q = query(collection(db, "map-markers"));
    const unsubscribe = onSnapshot(q, (querySnapshot) => {
      const locations = querySnapshot.docs.map(doc => ({
        id: doc.id,
        data: {
          ...doc.data(),
          lat: parseFloat(doc.data().lat),
          lon: parseFloat(doc.data().lon)
        }
      }));
      setAllLocations(locations);
    });
    return unsubscribe; // 组件卸载时取消订阅
  }, []);

  // 过滤可视范围内的地点
  const visibleLocations = visibleBounds 
    ? allLocations.filter(location => {
        const { lat, lon } = location.data;
        return visibleBounds.contains([lat, lon]);
      })
    : allLocations;

  return (
    <div style={{ display: 'flex', width: '100vw' }}>
      <Map 
        locations={allLocations} 
        onBoundsChange={setVisibleBounds}
      />
      <List locations={visibleLocations} />
    </div>
  );
};

export default App;

2. 修改Map.js

import { MapContainer, TileLayer, Marker, MarkerClusterGroup } from 'react-leaflet';
import { useMap, useEffect } from 'react-leaflet/hooks';
import defaultIcon from './your-icon-path'; // 替换成你的自定义图标路径

// 监听地图边界变化的自定义组件
const MapBoundsListener = ({ onBoundsChange }) => {
  const map = useMap();
  
  const handleMoveEnd = () => {
    onBoundsChange(map.getBounds());
  };

  useEffect(() => {
    map.on('moveend', handleMoveEnd);
    return () => map.off('moveend', handleMoveEnd);
  }, [map, onBoundsChange]);

  return null;
};

const Map = ({ locations, onBoundsChange }) => {
  const center = [39.9042, 116.4074]; // 示例中心点，可根据需求调整

  return (
    <div style={{ width: '50%', height: '100vh' }}>
      <MapContainer
        center={center}
        zoom={13}
        scrollWheelZoom={false}
        style={{ height: '100%' }}
      >
        <TileLayer
          attribution='&copy; OpenStreetMap contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <MapBoundsListener onBoundsChange={onBoundsChange} />
        <MarkerClusterGroup>
          {locations.map((location) => (
            <Marker
              key={location.id} // 使用地点ID作为key，避免index导致的渲染异常
              position={[location.data.lat, location.data.lon]}
              icon={defaultIcon}
            />
          ))}
        </MarkerClusterGroup>
      </MapContainer>
    </div>
  );
};

export default Map;

3. 修改List.js

const ListItem = ({ title }) => (
  <div style={{ padding: '1rem', borderBottom: '1px solid #eee' }}>
    {title}
  </div>
);

const List = ({ locations }) => {
  return (
    <div style={{ width: '50%', height: '100vh', overflowY: 'auto' }}>
      {locations.length === 0 ? (
        <div style={{ padding: '2rem', textAlign: 'center', color: '#666' }}>
          当前视图范围内没有地点
        </div>
      ) : (
        locations.map((location) => (
          <ListItem 
            key={location.id} 
            title={location.data.title} 
          />
        ))
      )}
    </div>
  );
};

export default List;

关键细节说明 #

• 事件监听：使用moveend事件（而非zoom），确保拖拽地图结束后也会触发过滤
• 数据处理：提前把经纬度转为数字，避免每次过滤时重复转换
• 性能优化：只订阅一次Firestore数据，减少不必要的数据库请求；使用稳定的id作为组件key，提升渲染效率

内容的提问来源于stack exchange，提问作者userName