问题描述
所以问题是如何使用外部 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
下拉菜单中选择城市
目前我只能选择区域,而我直接点击该区域的地图(使用onEachFeature
函数)但无法理解如何连接Select
组件以实现相同的功能,同时选择下拉菜单中的区域。
解决方法
如果我们假设您的下拉列表中有地区名称并且与包含在 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
上看到更多信息