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

Posted 2023-03-28

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

【英文标题】：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 库

你救了我的职位，谢谢！

【参考方案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>
);