如何解决带有多个标记的 React Leaflet LayersControl.Overlay
我有一张地图,其中显示了一个城市中每个不同公共设施的标记,我想要一组复选框来根据其类型过滤这些设施,一个复选框用于类型学。每个类型都会有多个标记,地图只会显示选中的标记。
我正在使用 react-leaflet v3。
这就是我尝试做的:
<MapContainer center={[50,50]} zoom={13} scrollWheelZoom={true} whenCreated={setMap}>
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<LayersControl position='topright'>
{typologies.map((typology,index) => (
<LayersControl.Overlay key={index} checked name={typology}>
{publicFacilities.filter((publicFacility) => publicFacility.typology == typology ).map((publicFacility) => (
<Marker key={publicFacility._id} position={publicFacility.coordinates} />
))}
</LayersControl.Overlay>
))}
</LayersControl>
</MapContainer>
typologies 是字符串列表,publicFacilities 是对象列表。
但使用这种方法,我会为每个设施设置一个复选框。
解决方法
您可以使用 lodash groupBy 按类型构建您的群组。
然后使用图层组让多个标记作为叠加层。
以下内容:
const groupedByTypology = groupBy(publicFacilities,"typology");
return <LayersControl>
{Object.keys(groupedByTypology).map(typology => (
<LayersControl.Overlay key={typology} name={typology}>
<LayerGroup>
{groupedByTypology[typology].map(publicFacility => (
<Marker key={publicFacility._id} position={publicFacility.coordinates} />
))}
</LayerGroup>
</LayersControl.Overlay>
))}
</LayersControl>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。