是否可以在特定缩放级别上显示反应小叶标记？

【问题标题】：Is it possible to display react leafletjs markers on specific zoom levels?是否可以在特定缩放级别上显示反应小叶标记？
【发布时间】：2022-01-19 11:43:56
【问题描述】：

我正在使用 React Leaflet js 地图，我正在地图上显示从我的数据库中获取的数据的标记，但问题是我有 5000 个标记，并且在缩放级别 9 上显示很多，那么有没有办法在特定的缩放级别上显示标记？

【问题讨论】：

使用 react-leaflet-markercluster 库
你救了我的职位，谢谢！

标签： reactjs leaflet maps google-maps-markers react-leaflet

【解决方案1】：

是的，为什么不呢？

您可以像这样存储地图的缩放并设置显示标记的条件

const [Zoom, setZoom] = useState(9);

console.log(Zoom);

const MapEvents = () => {
  useMapEvents({
    zoomend() { // zoom event (when zoom animation ended)
      const zoom = map.getZoom(); // get current Zoom of map
      setZoom(zoom);
    },
  });
  return false;
};

return (
  <MapContainer center={[33.8735578, 35.86379]} zoom={9} scrollWheelZoom={true}>
    <TileLayer
      attribution='&copy; <a 
         href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    />

    {/* your events on map */}
    <MapEvents /> 

    { Zoom >= 13 ? <Marker> your marker options and params </Marker> : null }

  </MapContainer>
);

【讨论】：