Обновите код уровня эстакады, чтобы использовать реактивную листовку версии 2 - PullRequest
Новая
       35

Обновите код уровня эстакады, чтобы использовать реактивную листовку версии 2

0 голосов
/ 18 мая 2019

Вопрос Плагин Leaflet, работающий только при включенной геолокации имеет приятную упаковку OSM OverpassLayer для реактивной листовки. К сожалению, это работает только для реакции-листовки 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);
  }
}

В версии 2 он не работает, что заканчивается ошибкой:

TypeError: Супер-выражение должно быть либо нулевым, либо функцией

Есть идеи, как обновить этот код до v2?

Ответы [ 2 ]

0 голосов
/ 20 мая 2019

V2 реактивной створки полностью нарушает способность расширять многие компоненты.Некоторое время назад я поднял вопрос об этом: https://github.com/PaulLeCam/react-leaflet/issues/506

Это преднамеренный выбор автора библиотеки (выбор, с которым я не согласен, но это спорный вопрос)

Читатьчерез эту ветку Github, и если у вас есть дополнительные вопросы, просто спросите:)

0 голосов
/ 18 мая 2019

Что касается всего, что связано с реактивной листовкой 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.

...