Блог

Главная - Вопросы по программированию - Несколько групп объектов в оверлее

Несколько групп объектов в оверлее

#reactjs #typescript #leaflet #react-leaflet

#reactjs #typescript #брошюра #реагировать-листовка

Вопрос:

В настоящее время я использую библиотеку под названием 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/> . В этом случае это была бы группа объектов, которая имеет синий цвет. Любые советы или указания будут высоко оценены!

Комментарии:

1. попробуйте окружить группы объектов новым <FeatureGroup> блоком

2. @FalkeDesign Я окружил свои группы объектов другим <FeatureGroup> блоком, и это работает. Спасибо!

Ответ №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>