Present_map

1.

ОТЧЁТ
Карта маршрута для водителя
грузовика службы доставки Ozon
Разработка визуализации на HTML Canvas
2026

2.

Содержание
01
Введение
02
Глава 1. Базовая визуализация точек
03
Глава 2. Стартовая точка маршрута
04
Глава 3. Ближайшая точка и линия
05
Глава 4. Полный маршрут
06
Заключение
2/9

3.

Введение
Задача
Технологии
Подход
Построить маршрут
доставки посылок Ozon
через пункты выдачи
заказов (ПВЗ)
HTML Canvas +
JavaScript
Пошаговая разработка:
4 версии → полный
маршрут
3/9

4.

Глава 1
Базовая визуализация точек
Что сделано
Результат
▸ Canvas 800 × 600 px
▸ 50 случайных точек (ПВЗ)
▸ Синие кружки радиусом 6 px
▸ Массив points[] с id и координатами
На экране появилась карта с 50
пунктами выдачи. Основа для
всех следующих версий.
4/9

5.

Глава 2
Стартовая точка маршрута
Выбор
Флаг
Отрисовка
Случайный индекс
из 50 точек
isRed = true
для стартовой
Красный цвет
остальные — синие
5/9

6.

Глава 3
Ближайшая точка и соединение линией
Расстояние = √((x₂ − x₁)² + (y₂ − y₁)²)
Зелёный цвет
Флаг
Линия
Ближайшая точка
меняет цвет
Эмодзи над точкой
для наглядности
Жёлтый пунктир
между точками
6/9

7.

Глава 4
Полный маршрут — алгоритм ближайшего соседа
1
Старт с красной точки
2
Ищем ближайшую непосещённую
3
Переходим → зелёный + флаг
4
Повторяем до всех 50 точек
Результат
Жёлтая линия проходит через
все 50 ПВЗ ровно один раз.
Стартовая —
Остальные —
Быстрый и практичный маршрут
для водителя.
7/9

8.

Заключение
1
Создана рабочая карта маршрута для водителя Ozon
2
Реализован алгоритм ближайшего соседа
3
Код на чистом JavaScript — легко расширять
4
Возможности: реальные координаты, 2-opt, API Ozon
8/9

9.

Источники
1. MDN Web Docs — Canvas API
2. MDN — CanvasRenderingContext2D
3. Кормен и др. — «Алгоритмы: построение и анализ»
4. Ozon.ru — официальный сайт
5. HTML Living Standard — canvas element
9/9