我应该如何将 OverlappingMarkerSpiderfier 与 react-leaflet 一起使用？

Question

我正在将现有的 Web 应用重写为 React 应用。原来，leaflet is used for maps, along with OverlappingMarkerSpiderfier 以区分地图标记。在新应用中，我使用 react-leaflet。使用的所有其他插件都可以做出反应，但我想为 OverlappingMarkerSpiderfier 创建一个传单自定义组件。我对创建这个组件有点不知所措。

理想情况下，我想在 React 渲染循环中像这样调用组件。

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

OverlappingMarkerSpiderfier 示例显示了正在创建的对象实例，事件侦听器已添加到地图，所有标记都已添加到 OMS 实例。我试过将其压缩到 ReactLeaflet class 但到目前为止没有成功。

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 实例中。

有没有人对创建这个 class 或其他一些功能非常相似的库有一些建议？

Answer 1

您已经很接近了，这是一个更新的组件版本，演示了如何集成 OverlappingMarkerSpiderfier-Leaflet into 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方法从标记列表初始化
事件处理程序实现

和here is a demo供大家参考

我应该如何将 OverlappingMarkerSpiderfier 与 react-leaflet 一起使用？

How should I use OverlappingMarkerSpiderfier with react-leaflet?

javascript

react-leaflet