叠加中的多个要素组

问题描述

我当前正在使用一个名为React-Leaflet的图书馆。我的目标是在一个叠加层中创建各种<FeatureGroup/>或<Polygons/>并相应地切换其可见性。

我目前已尝试在单个叠加图中创建多个<FeatureGroup/>或<Polygon/>。我正在使用此叠加来切换特定叠加层的可见性。我创建了类似于以下代码的内容。

<Overlay 
  name={ OverlayName }
  checked={ isLayerChecked }
  key={ index } 
>
  <FeatureGroup  color={'red'}>
    <Popup> Popup Red </Popup>
    <Tooltip> Tooltip Red </Tooltip>
    <Polygon position=[array of latlng points]/>
    <Polygon position=[array of latlng points]/>
  </FeatureGroup>
  <FeatureGroup  color={'blue'}>
    <Popup> Popup Blue </Popup>
    <Tooltip> Tooltip Blue </Tooltip>
    <Polygon position=[array of latlng points]/>
    <Polygon position=[array of latlng points]/>
    <Polygon position=[array of latlng points]/>
  </FeatureGroup>
</Overlay>

基于上面的以下代码，我相信将'isLayerChecked'的值从true更改为false会隐藏创建的<FeatureGroup/>。但有趣的是，它仅隐藏最后的<FeatureGroup/>。在这种情况下，要素组的颜色将为“蓝色”。任何建议或指示将不胜感激！

解决方法

评论解决方案：

使用新的块围绕要素组

<Overlay 
  name={ OverlayName }
  checked={ isLayerChecked }
  key={ index } 
>
<FeatureGroup>
  <FeatureGroup  color={'red'}>
    <Popup> Popup Red </Popup>
    <Tooltip> Tooltip Red </Tooltip>
    <Polygon position=[array of latlng points]/>
    <Polygon position=[array of latlng points]/>
  </FeatureGroup>
  <FeatureGroup  color={'blue'}>
    <Popup> Popup Blue </Popup>
    <Tooltip> Tooltip Blue </Tooltip>
    <Polygon position=[array of latlng points]/>
    <Polygon position=[array of latlng points]/>
    <Polygon position=[array of latlng points]/>
  </FeatureGroup>
</FeatureGroup>
</Overlay>