/
petrhlam
/
project_moon
Обзор
Документация
Войти
/
petrhlam
/
project_moon
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
client/src/components/GridLayer.js
53 строки
2 KB
Andrey Sukhikh
Added laravel backend
18 май 2025, 23:08
18 май 2025, 23:08
83488a7
Код
Авторство
О чём код?
import { useEffect, useState, useCallback } from 'react'; import { Vector as VectorLayer } from 'ol/layer'; import { Vector as VectorSource } from 'ol/source'; import { Feature } from 'ol'; import { LineString } from 'ol/geom'; import { Stroke, Style } from 'ol/style'; const GridLayer = ({ gridSpacing, mapView }) => { const [layer, setLayer] = useState(null); // Мемоизируем функцию для создания сетки const createGrid = useCallback((extent) => { const [minX, minY, maxX, maxY] = extent; const features = []; // Генерация вертикальных и горизонтальных линий for (let x = minX; x <= maxX; x += gridSpacing) { features.push(new Feature(new LineString([[x, minY], [x, maxY]]))); } for (let y = minY; y <= maxY; y += gridSpacing) { features.push(new Feature(new LineString([[minX, y], [maxX, y]]))); } return features; }, [gridSpacing]); // Зависимость от gridSpacing useEffect(() => { if (mapView) { const extent = mapView.calculateExtent(); const gridFeatures = createGrid(extent); const source = new VectorSource({ features: gridFeatures, }); const newLayer = new VectorLayer({ source: source, style: new Style({ stroke: new Stroke({ color: '#000000', width: 1, }), }), }); setLayer(newLayer); } }, [mapView, createGrid]); // Теперь зависимость от createGrid return layer ? layer : null; // Возвращаем слой сетки }; export default GridLayer;