Javascript 反应传单层控制。覆盖多个标记

我有一张地图，上面显示了一个城市中每个不同公共设施的标记，我想有一组复选框，根据其类型过滤这些设施，一个复选框用于类型。每个类型都有多个标记，地图将只显示选中的标记。
我用的是react传单v3

这就是我试图做的：

<MapContainer center={[50,50]} zoom={13} scrollWheelZoom={true} whenCreated={setMap}>
            <TileLayer
                attribution='&copy; <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> 

{类型学.map（（类型学，索引）=>）
{publicFacility.filter（（publicFacility）=>publicFacility.typology==typology）.map（（publicFacility）=>）
))}  
))}

类型学是字符串列表，PublicFacility是对象列表

---

但是通过这种方法，我为每个设施都设置了一个复选框。

您可以使用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>

const groupedByTypology=groupBy（公共设施，“类型学”）；
返回
{Object.keys（GroupedByTypeology）.map（Typeology=>(
{GroupedByTypeology[Typeology].map（publicFacility=>(
))}
))}

您的数据是什么样子的<代码>类型学和

公共设施

类型学是字符串列表，例如

[“办公室”、“体育”…]

和

公共设施

对象列表，例如

[{id:“123”，名称：“市政厅”，类型：“办公室”，坐标：[50,50]}，]

这是为我准备的，如果您在

publicFacilities

中使用typology=“office”添加另一个对象，则会出现两个名为office的复选框，我只希望所有办公室都有一个复选框。这是问题的新信息。你应该在你的帖子上澄清这一点。但它会有相同的标记还是新的标记？。如果与第一个标记相比，它具有不同的标记，您是否希望使用不同的复选框显示它们？这是您必须在问题描述中澄清的信息。