如何使用外部选择下拉组件选择React Leaflet地图上的区域

import React, { useState } from 'react';
import { MapContainer, TileLayer, Polygon, useMap } from 'react-leaflet';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

const MapComponent = () => {
  const [selectedRegion, setSelectedRegion] = useState(null);

  // 自定义地图组件，用于控制地图的缩放和平移
  function MapController() {
    const map = useMap();

    if (selectedRegion) {
      // 根据选择的区域进行地图缩放和平移
      map.fitBounds(selectedRegion.getBounds());
    }

    return null;
  }

  // 处理区域选择变化的回调函数
  function handleRegionChange(event) {
    const selectedRegionName = event.target.value;

    // 根据选择的区域名称创建对应的Leaflet图层对象
    const regionLayer = L.layerGroup();
    // ... 根据具体需求添加相应的多边形图层

    setSelectedRegion(regionLayer);
  }

  return (
    <div>
      <select onChange={handleRegionChange}>
        <option value="">请选择区域</option>
        <option value="region1">区域1</option>
        <option value="region2">区域2</option>
        {/* ... 添加更多选项 */}
      </select>
      
      <MapContainer>
        <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
        <MapController />
        {selectedRegion && selectedRegion}
      </MapContainer>
    </div>
  );
};

import React from 'react';
import MapComponent from './MapComponent';

const App = () => {
  return (
    <div>
      <h1>使用外部选择下拉组件选择地图区域</h1>
      <MapComponent />
    </div>
  );
};

export default App;