react-leaflet获取当前缩放边界

import React, { useState } from 'react';
import { Map, TileLayer } from 'react-leaflet';

const App = () => {
  const [bounds, setBounds] = useState(null);

  const handleViewportChanged = (viewport) => {
    setBounds(viewport.bounds);
  };

  return (
    <div>
      <Map onViewportChanged={handleViewportChanged}>
        <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      </Map>
      {bounds && (
        <div>
          Current Bounds:
          <ul>
            <li>North: {bounds.getNorth()}</li>
            <li>South: {bounds.getSouth()}</li>
            <li>East: {bounds.getEast()}</li>
            <li>West: {bounds.getWest()}</li>
          </ul>
        </div>
      )}
    </div>
  );
};

export default App;