升级立交桥层代码以使用react-leaflet v2

Question

仅在启用地理定位时才能使用Leaflet插件的问题有一个很好的包装OverpassLayer OSM for react-leaflet。 不幸的是，它只适用于react-leaflet v1。

import { LayerGroup } from "react-leaflet";
import L from "leaflet";
import OverPassLayer from "leaflet-overpass-layer";

export default class OverpassLayer extends LayerGroup {
  componentWillReceiveProps(nextProps) {
    console.log(nextProps.key);
    console.log("OverpassLayer receiving props");
    const query = "("
      + "node[\"amenity\"]({{bbox}});"
      + "way[\"amenity\"]({{bbox}});"
      + "relation[\"amenity\"]({{bbox}});"
      + ");"
      + "out body;"
      + ">;"
      + "out skel qt;";

    const opl = new L.OverPassLayer({
      "query": query,
      "endPoint": "https://overpass-api.de/api/",
    });
    nextProps.map.addLayer(opl);
  }
}

使用v2，它不起作用，以错误结束：

TypeError：超级表达式必须为null或函数

有关如何将此代码更新为v2的任何想法？

Answer 1

至于react-leaflet v2中的所有内容，我们还需要重新实现中间类（ LayerGroup ）：

// @flow

import LeafletOverPassLayer from "leaflet-overpass-layer";

import { withLeaflet, MapLayer } from "react-leaflet";
import type { MapLayerProps } from "react-leaflet";

type LeafletElement = LeafletOverPassLayer;
type Props = MapLayerProps;

class OverPassLayer extends MapLayer<LeafletElement, Props> {
  createLeafletElement(props: Props): LeafletElement {
    const el = new LeafletOverPassLayer({
      query: "("
        + "node[\"amenity\"]({{bbox}});"
        + "way[\"amenity\"]({{bbox}});"
        + "relation[\"amenity\"]({{bbox}});"
        + ");"
        + "out body;"
        + ">;"
        + "out skel qt;",
      endpoint: "https://overpass-api.de/api/",
      minZoomIndicatorEnabled: false,
    }, this.getOptions(props));
    this.contextValue = { ...props.leaflet, layerContainer: el };
    return el;
  }
}

export default withLeaflet<Props, OverPassLayer>(OverPassLayer);

它基本上是复制/粘贴+添加立交桥信息。 在这里，我们将所有设施显示为红色圆圈。

删除了缩放指示器，因为它似乎缺少onRemove方法。

Answer 2

反应传单的V2完全破坏了扩展许多组件的能力。 我刚才提出了一个问题： https ： //github.com/PaulLeCam/react-leaflet/issues/506

这是图书馆作者的有意设计选择（我全心全意地不同意这一选择，但这是一个有争议的问题）

通读那个Github线程，如果你还有其他问题，请问:)