Question

问题Leaflet plugin only working when geolocation is enabled很好地覆盖了用于反应传单的OverpassLayer OSM。不幸的是，它仅适用于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线程，如果还有其他问题，请问：）

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

2 个答案: