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

Question

问题很好地包装了用于 react-leaflet 的 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: Super expression must either be null or a function

知道如何将此代码更新到 v2 吗？

Answer 1

至于 react-leaflet v2 中的所有内容，我们还需要重新实现中间 class (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);

基本上就是copy/paste+加上立交桥的信息。在这里，我们将所有便利设施显示为红色圆圈。

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

Answer 2

V2 of react-leaflet 完全打破了扩展许多组件的能力。前段时间我提出了一个问题： https://github.com/PaulLeCam/react-leaflet/issues/506

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

通读 Github 话题，如果您还有其他问题，请直接提问 :)

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

Upgrade an overpass layer code to use react-leaflet v2

leaflet

overpass-api

react-leaflet