Aktualisierungen React-Leaflet-Cluster und Marker ⇐ JavaScript

[Anonymous]

Bitte erklären Sie, warum beim Aktualisieren von Markierungen auf der Karte alle Cluster für einen Moment verschwinden und dann wieder auftauchen. Wie erstelle ich Markierungsaktualisierungen für den Benutzer nahtlos?

Code: Select all

import { observer } from "mobx-react-lite";
import {
MapContainer,
Marker,
Popup,
TileLayer,
Polyline,
LayersControl,
LayerGroup,
Circle,
FeatureGroup,
Rectangle,
useMap,
} from "react-leaflet";
import "leaflet/dist/leaflet.css";
import L, { rectangle } from "leaflet";
import Form from "react-bootstrap/Form";
import "bootstrap/dist/css/bootstrap.min.css";
import styles from "./MapForm.module.css";
import DynamicMarkersLayer from "./DynamicMarkersLayer";

// Импортируем изображения маркеров
import markerIcon from "leaflet/dist/images/marker-icon.png";
import markerIcon2x from "leaflet/dist/images/marker-icon-2x.png";
import markerShadow from "leaflet/dist/images/marker-shadow.png";
import { useContext, useEffect } from "react";
import { Context } from "../../main";
// Фикс для маркеров
delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
iconRetinaUrl: markerIcon2x,
iconUrl: markerIcon,
shadowUrl: markerShadow,
});

// Создаем отдельный компонент для обработки событий карты
const MapEventHandler = observer(() => {
const { store } = useContext(Context);
const map = useMap();

useEffect(() => {
const debounceTimer = { current: null };

const handleMoveEnd = () => {
clearTimeout(debounceTimer.current);
debounceTimer.current = setTimeout(() => {
const bounds = map.getBounds();
if (!store.prevBounds || !bounds.equals(store.prevBounds)) {
store.sendBounds(bounds);
store.prevBounds = bounds;
}
}, 300);
};

map.on("zoomend", handleMoveEnd);
map.on("moveend", handleMoveEnd);

handleMoveEnd(); // Первоначальная загрузка

return () => {
map.off("moveend", handleMoveEnd);
map.off("zoomend", handleMoveEnd);
};
}, []);

return null;
});

function MapForm() {
const center = [55.75281851900141, 37.61597512353604];

return (



Выберите дату
Сегодня
Вчера





{/* Добавляем обработчик событий карты */}









A pretty CSS3 popup.
Easily customizable.














);
}

export default observer(MapForm);
< /code>
Dies ist Code DynamicMarkersLayer: < /p>
import { LayersControl, Marker, Popup, useMap } from "react-leaflet";
import { useContext, useEffect, useMemo, useRef } from "react";
import { observer } from "mobx-react-lite";

import { Context } from "../../main";
import MarkerClusterGroup from "react-leaflet-markercluster";
import "react-leaflet-markercluster/styles";

function DynamicMarkersLayer() {
const { store } = useContext(Context);
const m =[...store.markers]

const markerHash = m.length > 0 ? m.reduce((acc, marker) => acc+marker.id) - Date.now() : 'empty';

return (


{m.map((marker) => {
// console.log(`${marker.id - marker.version || 0}`)
return(

{/* 

[h4]{marker.name}[/h4]
Координаты: {marker.lat}, {marker.lng}

 */}

)})}

);
}

export default observer(DynamicMarkersLayer)

Wenn Sie nun die Grenzen ändern, wird eine Antwort mit einer Reihe von Koordinaten vom Server korrekt empfangen>