如何使用外部 Select 下拉组件在 React Leaflet 地图上 select 区域

Question

所以问题是如何 select 使用外部 Select 下拉组件的特定区域：

 <div className="Map">
  <Select
    onChange={setArea}
    size={"large"}
    className="Map-areaSelector"
    value={selectedArea}
  >
    {areaList}
  </Select>
  {colors && (
    <MapContainer center={getCenter()} zoom={getZoom()}>
      <>
        <GeoJSON
          style={setColor}
          data={germanyDis}
          onEachFeature={onEachArea}
        />
        <NewLegend arr={gradient} />
      </>
    </MapContainer>
  )}
</div>

想要这样的结果，而我正在从右上角的 Select 下拉列表中选择城市

现在我只能select区域，虽然我直接点击这个区域的地图（使用onEachFeature功能）但无法理解如何将Select组件连接到实现相同的功能，同时从下拉列表中选择区域。

Answer 1

如果我们假设您的下拉列表中有地区名称，并且与 geojson 中包含的名称相同，还有 select 中的地图实例 onChange 你将不得不使用 json ref 找到具有所选地区名称的图层，然后对其执行任何操作，如打开其弹出窗口或缩放到所选图层。

const geoJsonRef = useRef();
const [selectValue, setSelectValue] = useState("");
...
const handleDistrictChange = (e) => {
    const newDistrict = e.target.value;
    setSelectValue(newDistrict);

    if (!newDistrict) return;

    const layer = geoJsonRef.current
      .getLayers()
      .find((layer) => layer._popup._content === newDistrict);
    layer.openPopup();
    map.fitBounds(layer.getBounds());
};

并在 GeoJSON 组件上添加 ref 以及从 MapContainer 获取地图实例。

<>
  <MapContainer
      center={position}
      zoom={13}
      style={{ height: "80vh" }}
      whenCreated={setMap}
   >
   ...
  {geoJSON && (
     <GeoJSON
        data={geoJSON}
        onEachFeature={handleEachFeature}
        ref={geoJsonRef}
     />
   )}
  </MapContainer>
  <select value={selectValue} onChange={handleDistrictChange}>
     <option value="">Select a district</option>
     {geoJsonRef.current
        ?.getLayers()
        .map((layer) => layer._popup._content)
        .map((district, index) => (
           <option key={`district-${index}`} value={district}>
            {district}
           </option>
      ))}
  </select>
 </>

你可以看到更多关于这个demo

如何使用外部 Select 下拉组件在 React Leaflet 地图上 select 区域

How to select area on React Leaflet Map using external Select dropdown component

javascript

geojson

leaflet

reactjs

react-leaflet