带有多个标记的 React Leaflet LayersControl.Overlay

Question

我有一张地图显示城市中每个不同 public 设施的标记，我想要一组复选框来根据其类型过滤这些设施，一个用于类型的复选框。每个类型都会有多个标记，地图只会显示选中的标记。
我正在使用 react-leaflet 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>

typologies 是一个字符串列表，publicFacilities 是一个对象列表。

但是通过这种方法，我得到了每个设施的复选框。

Answer 1

您可以使用 lodash groupBy 按类型构建您的群组。

然后使用 Layer Groups 让几个 Marker 表现得像一个 Overlay。

行中的内容：

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>

带有多个标记的 React Leaflet LayersControl.Overlay

React Leaflet LayersControl.Overlay with multiple markers

javascript

leaflet

reactjs

react-leaflet

react-leaflet-v3