https://github.com/iamrosada/leaflet-react-ts
Приложение "Маршруты на карте" является веб-приложением, которое позволяет пользователям просматривать список маршрутов в виде таблицы и визуализировать выбранный маршрут на карте с помощью полилиний и маркеров. Для реализации использованы библиотеки React, Leaflet,Redux и Ant Design.
https://github.com/iamrosada/leaflet-react-ts
leaflet leaflet-map react redux redux-saga redux-toolkit typescript
Last synced: 2 months ago
JSON representation
Приложение "Маршруты на карте" является веб-приложением, которое позволяет пользователям просматривать список маршрутов в виде таблицы и визуализировать выбранный маршрут на карте с помощью полилиний и маркеров. Для реализации использованы библиотеки React, Leaflet,Redux и Ant Design.
- Host: GitHub
- URL: https://github.com/iamrosada/leaflet-react-ts
- Owner: iamrosada
- Created: 2023-07-28T20:05:29.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-07-28T20:51:17.000Z (almost 3 years ago)
- Last Synced: 2025-10-14T11:34:09.787Z (8 months ago)
- Topics: leaflet, leaflet-map, react, redux, redux-saga, redux-toolkit, typescript
- Language: TypeScript
- Homepage:
- Size: 11.9 MB
- Stars: 2
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Приложение "Маршруты на карте"
Приложение "Маршруты на карте" является веб-приложением, которое позволяет пользователям просматривать список маршрутов в виде таблицы и визуализировать выбранный маршрут на карте с помощью полилиний и маркеров. Для реализации использованы библиотеки React, Leaflet,Redux и Ant Design.
## Особенности
- Отображение таблицы со списком маршрутов на левой стороне экрана.
- Отображение карты на правой стороне экрана с использованием Leaflet для визуализации выбранного маршрута с помощью полилиний и маркеров.
- Автоматическое центрирование и масштабирование карты для обзора всего маршрута при выборе маршрута в таблице.
- Получение и отображение полилиний для выбранных маршрутов с использованием API OSRM (Open Source Routing Machine).
## Установка
1. Клонируйте репозиторий:
```bash
git clone https://github.com/iamrosada/Leaflet-react-ts.git
cd Leaflet-react-ts
```
2. Установите зависимости:
```bash
npm install
```
3. Запустите сервер разработки:
```bash
npm run dev
```
Приложение должно быть доступно по адресу ` http://localhost:5173/`.
## Использование
1. После запуска приложения на экране отобразится таблица с доступными маршрутами на левой стороне.
2. Щелкните по строке в таблице, чтобы выбрать маршрут. Выбранный маршрут будет подсвечен, и на карте справа будет отображаться соответствующий маршрут с полилиниями и маркерами.
3. Карта автоматически центрируется и масштабируется, чтобы вместить весь маршрут в видимой области.
4. Для просмотра другого маршрута просто выберите другую строку в таблице, и карта будет обновлена соответствующим образом.
Вы можете настраивать список маршрутов, обновляя массив `routePoints` с вашими данными о маршрутах.
## API-точка
Приложение использует API OSRM для получения полилиний каждого маршрута. API-точка находится по адресу `http://router.project-osrm.org`.
## Структура папок
- `src/components`: Содержит компоненты React, используемые в приложении.
- `src/reducers`: Содержит редьюсеры Redux для управления состоянием.
- `src/sagas`: Содержит Redux Sagas для обработки асинхронных действий.
- `src/services`: Содержит HTTP-сервис для общения с API OSRM.
- `src/store.js`: Конфигурирует хранилище Redux с промежуточным ПО.
- `src/App.js`: Основной компонент, который отображает таблицу маршрутов и карту.
- `src/index.js`: Точка входа в приложение.
## Используемые технологии
Приложение "Маршруты на карте" создано с использованием следующих библиотек с открытым исходным кодом:
- React - Библиотека JavaScript для создания пользовательских интерфейсов.
- Leaflet - Библиотека JavaScript с открытым исходным кодом для интерактивных карт.
- Ant Design - Набор высококачественных компонентов React.
- TypeScript - Язык программирования TypeScript, добавляющий статическую типизацию к JavaScript.
- Redux (с помощью Redux Toolkit): Для управления состоянием и обработки данных между компонентами.
- Redux Saga: Для обработки асинхронных действий, особенно вызовов API.
- Axios: Для выполнения HTTP-запросов к API OSRM.
- SASS: Препроцессор языка стилей для оформления.
## Лицензия
Этот проект лицензирован в соответствии с лицензией MIT - см. файл [LICENSE](LICENSE) для получения дополнительных сведений.
---