Вопрос Плагин Leaflet работает только при включенной геолокации имел красивую обертку OSM OverpassLayer для реактивной листовки. К сожалению, это работает только для 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.info(nextProps.key);
console.info("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?
Что касается всего, что есть в 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
.
Версия 2 реактивного листка полностью лишает возможности расширять многие компоненты. Я поднимал вопрос об этом некоторое время назад: https://github.com/PaulLeCam/react-leaflet/issues/506
Это преднамеренный выбор дизайна автором библиотеки (выбор, с которым я полностью не согласен, но это спорный вопрос).
Прочитайте эту ветку Github, и если у вас есть дополнительные вопросы, просто задавайте :)
Я действительно видел обсуждение, мне также трудно понять решение (мне также трудно понять использование еще одного JS-фреймворка с потоком и другими подобными вещами, где вы даже не знаете, с каким объектом работает метод. .. Я боролся с разными
this
).