2

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

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

4

1 回答 1

1

您可以使用 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>
于 2021-02-18T20:23:31.413 回答