Как мне использовать OverlappingMarkerSpiderfier с реактивным листком?

Я переписываю существующее веб-приложение на приложение React. В оригинале для карт используется буклет вместе с OverlappingMarkerSpiderfier, чтобы различать маркеры карты. В новом приложении я использую реакцию-буклет. Все остальные используемые плагины доступны для реагирования, но я хочу создать специальный компонент листовки для OverlappingMarkerSpiderfier. Я немного не в своей глубине в создании этого компонента.

В идеале я бы хотел вызвать такой компонент в цикле рендеринга React.

return (
  <Map>
    <Spiderfy >
      <Marker>
        <Popup>
        </Popup>
      </Marker>
      <Marker>
        <Popup>
        </Popup>
      </Marker>
    </Spiderfy>
  </Map>
  )

В примере OverlappingMarkerSpiderfier показан экземпляр создаваемого объекта, прослушиватель событий добавляется на карту, а все маркеры добавляются в экземпляр OMS. Я попытался втиснуть это в класс ReactLeaflet, но пока безуспешно.

class _Spiderfy extends MapLayer {

    constructor(props) {
        super(props)
        this.oms = null
    }

    createLeafletElement ({children, leaflet: {map, ...props}})  {
        let newLayer = L.featureGroup()
        this.oms = new OverlappingMarkerSpiderfier(map);

        var popup = new L.Popup();
        this.oms.addListener('click', function(marker) {
            popup.setContent(marker.desc);
            popup.setLatLng(marker.getLatLng());
            map.openPopup(popup);
        });

        this.oms.addListener('spiderfy', function(markers) {
            map.closePopup();
          });

        return newLayer
    }
}

export default withLeaflet(_Spiderfy);

Это оболочка, которая у меня сейчас есть. Он отображает дочерние элементы (все маркеры и их всплывающие окна), но прослушиватель событий не выполняется при щелчке по карте. Я также не знаю, как получить объекты Marker из списка дочерних элементов и добавить их в экземпляр oms.

Есть ли у кого-нибудь совет по созданию этого класса или другой библиотеки, которая делает что-то очень похожее?


javascript react-leaflet
person TheRussian25    schedule 04.04.2019    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Вы были достаточно близки, вот обновленная версия компонента, которая демонстрирует, как интегрировать OverlappingMarkerSpiderfier-Leaflet в React-Leaflet

class Spiderfy extends MapLayer {

  createLeafletElement(props) {
    const { map } = props.leaflet;
    this.oms = this.createOverlappingMarkerSpiderfier(map);
    const el = L.layerGroup();
    this.contextValue = { ...props.leaflet, layerContainer: el };
    return el;
  }

  componentDidMount() {
    super.componentDidMount();
    this.leafletElement.eachLayer(layer => {
      if (layer instanceof L.Marker) {
        this.oms.addMarker(layer);
      }
    });
  }

  createOverlappingMarkerSpiderfier(map) {
    const oms = new window.OverlappingMarkerSpiderfier(map);
    oms.addListener("spiderfy", markers => {
      markers.forEach(m => m.closePopup())//force to close popup 
      if (this.props.onSpiderfy) this.props.onSpiderfy(markers);
    });
    oms.addListener("unspiderfy", markers => {
      if (this.props.onUnspiderfy) this.props.onUnspiderfy(markers);
    });
    oms.addListener("click", marker => {
      if (this.props.onClick) this.props.onClick(marker);
    });
    return oms;
  }
}

export default withLeaflet(Spiderfy);

Список недостающих деталей:

  • инициализация из списка маркеров методом OverlappingMarkerSpiderfier.addMarker
  • реализация обработчиков событий

И вот демонстрация для вашей справки.

person Vadim Gremyachev    schedule 06.04.2019
comment
Можно ли работать с FeatureGroup, которая обычно используется для панорамирования вот так? В настоящее время ошибки отсутствуют. - person Louis Christopher; 22.10.2020
comment
Привет, @LouisChristopher, похоже, ошибка вызвана overlapping-marker-spiderfier-leaflet, может быть, вы могли бы поднять отдельный вопрос по этому поводу? - person Vadim Gremyachev; 22.10.2020
comment
Конечно, спасибо за быстрый ответ, я разместил отдельный вопрос. :) - person Louis Christopher; 23.10.2020
comment
можно ли использовать его с последней версией React-Leaflet v3? Error in /~/Spiderfy.js (9:40) Class extends value undefined is not a constructor or null спасибо - person SERG; 14.05.2021