Итак, как и некоторые другие пользователи, я недавно столкнулся с проблемой добавления функциональности React во всплывающие окна на слое React Leaflet GeoJSON. После прочтения нескольких сообщений здесь, на SO, проблема, по-видимому, сводится к несоответствию между использованием собственных функций Leaflet и функций, абстрагированных с реализацией React Leaflet. При использовании собственных методов Leaflet привязка всплывающего окна принимает только строку, что предотвращает добавление JSX или дополнительное взаимодействие.
Отказываясь от компонента GeoJSON, я также теряю функцию onEachFeature
, которая является основным способом легкого стиля и добавления событий в слой. При рефакторинге моего приложения для использования круговых маркеров я не могу понять, как условно стилизовать отдельные маркеры на основе свойств функции. Кажется, что реквизит GeoJSON Layer pathOptions
, похоже, не принимает такую функцию:
import { CircleMarker, Popup } from "react-leaflet";
import PopupContent from "./PopupContent";
const CircleMarkerLayer = ({ data }) => {
return data.features.map((feature) => {
const { coordinates } = feature.geometry
const markerStyles = function(feature) {
switch (feature.properties.type) {
case 'Sticker': return {color: '#a50026'};
case 'Mural': return {color: '#d73027'};
case 'Marker': return {color: '#f46d43'};
case 'Characters': return {color: '#fdae61'};
case 'Letters': return {color: '#fee090' };
case 'Tippex': return {color: '#ffffbf'};
case 'Spray': return {color: '#e0f3f8'};
case 'Chalk': return{color: '#abd9e9'};
case 'Label maker sticker': return{color: '#74add1' };
case 'Poster': return{color: '#4575b4'};
}
}
return (
<CircleMarker key = {feature.properties.id} center = {[coordinates[1], coordinates[0]]} pathOptions = {markerStyles}>
<Popup>
<PopupContent content = {feature} />
</Popup>
</CircleMarker>
)
}
)
}
Кроме того, неясно, как добавить дополнительные события, такие как MouseOver и MouseOut, которые я хочу использовать как часть своего пользовательского интерфейса. Моя конечная цель состояла в том, чтобы добавить LightBox к изображениям в моих всплывающих окнах, но пока я в тупике с условным стилем.
Есть ли какая-либо документация о том, что отдельные типы слоев принимают за pathOptions
, потому что эта функция работает с компонентом слоя GeoJSON?
Да, geoJson может принимать функцию стиля, но не другую. react-leaflet.js.org/docs/api-components Немного не хватает документации по react-leaflet. Однако он напечатан, поэтому вы сможете увидеть ввод в своем проекте. Вы можете просто нажать ctr+клик и просмотреть типы
Спасибо, это кажется действительно ограничивающим между невозможностью создавать всплывающие компоненты с помощью GeoJSON и отсутствием функций стиля для маркеров круга...
Я бы сказал, что это зависит от использования указанного компонента. Вы все еще можете передать PathOptions и изменить цвет. Если вы хотите иметь больше вариантов, когда дело доходит до значка, вы можете использовать обычный маркер и установить любой значок, который вы хотите.
Я пытаюсь установить цвет отдельных маркеров по одному из свойств их функций. Иконки меня не интересуют из-за того, что я имею дело с тысячами маркеров, а мои эксперименты с маркерами холста не работают.
Вы все еще должны иметь возможность установить цвет, см. мой ответ ниже
круто, мне нужно будет проверить это завтра, но на первый взгляд выглядит многообещающе.
CircleMarker по-прежнему может принимать pathOptions, который должен быть типа:
export interface PathOptions extends InteractiveLayerOptions {
stroke?: boolean | undefined;
color?: string | undefined;
weight?: number | undefined;
opacity?: number | undefined;
lineCap?: LineCapShape | undefined;
lineJoin?: LineJoinShape | undefined;
dashArray?: string | number[] | undefined;
dashOffset?: string | undefined;
fill?: boolean | undefined;
fillColor?: string | undefined;
fillOpacity?: number | undefined;
fillRule?: FillRule | undefined;
renderer?: Renderer | undefined;
className?: string | undefined;
}
Поэтому в этом случае просто используйте функцию, которая у вас уже есть:
import { CircleMarker, Popup } from "react-leaflet";
import PopupContent from "./PopupContent";
const markerStyles = (feature) => {
switch (feature.properties.type) {
case "Sticker":
return { color: "#a50026" };
case "Mural":
return { color: "#d73027" };
case "Marker":
return { color: "#f46d43" };
case "Characters":
return { color: "#fdae61" };
case "Letters":
return { color: "#fee090" };
case "Tippex":
return { color: "#ffffbf" };
case "Spray":
return { color: "#e0f3f8" };
case "Chalk":
return { color: "#abd9e9" };
case "Label maker sticker":
return { color: "#74add1" };
case "Poster":
return { color: "#4575b4" };
}
};
const CircleMarkerLayer = ({ data }) => {
return data.features.map((feature) => {
const { coordinates } = feature.geometry;
return (
<CircleMarker
key = {feature.properties.id}
center = {[coordinates[1], coordinates[0]]}
pathOptions = {markerStyles(feature)}
>
<Popup>
<PopupContent content = {feature} />
</Popup>
</CircleMarker>
);
});
};
верхний фрагмент использует TypeScript?
Верхний фрагмент — это интерфейс PathOptions, напрямую скопированный из типов в react-leaflet.
pathOptions должен быть типа
PathOptions
, а не функцией, как в вашем случае.