叠加层中的多个功能组

Question

我目前正在使用一个名为 React-Leaflet 的库。我的 objective 是在单个叠加层中创建各种 <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/>。在这种情况下，它是具有颜色 'blue' 的特征组。任何建议或指示将不胜感激！

Answer 1

来自评论的解决方案：

用新块包围要素组

<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>

叠加层中的多个功能组

Multiple Feature groups in an Overlay

leaflet

typescript

reactjs

react-leaflet