是否可以在特定缩放级别上显示 react leafletjs 标记？

Question

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

Answer 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>
);