如何根据多边形的坐标调整react-leaflet中的缩放级别

import { MapContainer, TileLayer, Polygon } from 'react-leaflet';
import L from 'leaflet';

// 假设我们有一个多边形的坐标数组
const polygonCoords = [
  [51.509, -0.08],
  [51.503, -0.06],
  [51.51, -0.047],
];

// 计算边界框
function calculateBoundingBox(coords) {
  let minLat = Infinity;
  let maxLat = -Infinity;
  let minLng = Infinity;
  let maxLng = -Infinity;

  coords.forEach(coord => {
    if (coord[0] < minLat) minLat = coord[0];
    if (coord[0] > maxLat) maxLat = coord[0];
    if (coord[1] < minLng) minLng = coord[1];
    if (coord[1] > maxLng) maxLng = coord[1];
  });

  return [[minLat, minLng], [maxLat, maxLng]];
}

// 根据边界框计算缩放级别
function calculateZoomLevel(boundingBox, mapSize) {
  const { width, height } = mapSize;
  const { minLat, minLng, maxLat, maxLng } = boundingBox;
  const latDiff = maxLat - minLat;
  const lngDiff = maxLng - minLng;
  const xRatio = width / lngDiff;
  const yRatio = height / latDiff;
  const scale = Math.min(xRatio, yRatio);
  const zoom = Math.floor(Math.log2(1 / scale));
  return zoom;
}

const MapComponent = () => {
  const boundingBox = calculateBoundingBox(polygonCoords);
  const mapSize = { width: 800, height: 600 };
  const zoomLevel = calculateZoomLevel(boundingBox, mapSize);

  return (
    <MapContainer center={boundingBox[0]} zoom={zoomLevel} style={{ height: '100vh', width: '100%' }}>
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Polygon coordinates={polygonCoords} />
    </MapContainer>
  );
};

export default MapComponent;