Как стать автором
Обновить

Интерактивная карта Московского метрополитена: наводим красоту

Время на прочтение3 мин
Количество просмотров6K

Продолжаем работу над интерактивной картой, созданной в прошлой части. В этот раз займемся косметикой, сфокусируемся на визуальных изменениях с минимумом технических деталей.

Геометрия линий

Проведение прямых отрезков метро от станции к станции не передает истинную геометрию путей. В отдельных случаях линии мало отличается от прямых, но чаще это не так.

Для отрисовки более точных линий используем данные OSM и добавляем промежуточные точки между станциями.

В первой версии карты было 252 точки. В новой версии — почти в 23 раза больше — 5688 точек:

Тоннель от Крылатского до Строгино идет очень замысловатым образом: часть пути проходит по Серебряноборским тоннелям; также на этом перегоне планировалась станция Троице-Лыково.
Тоннель от Крылатского до Строгино идет очень замысловатым образом: часть пути проходит по Серебряноборским тоннелям; также на этом перегоне планировалась станция Троице-Лыково.
Не менее замысловатые изгибы Филевской и Солнцевской линий.
Не менее замысловатые изгибы Филевской и Солнцевской линий.

Пересечение станций

Далее обратим внимание, что координаты некоторых станций настолько близки, что накладываются друг на друга на схеме — выглядит это не очень хорошо.

Двигаем точки (в пределах реальных размеров станций метро), чтобы максимально разнести их на схеме:

Было: станции “Деловой центр” Солнцевской и Большой Кольцевой линий, а также станций станции “Киевская” Кольцевой и Арбатско-Покровской линий практически сливаются.
Было: станции “Деловой центр” Солнцевской и Большой Кольцевой линий, а также станций станции “Киевская” Кольцевой и Арбатско-Покровской линий практически сливаются.

Также исправляем ситуации, когда станция метро одной ветки накладывается на линию другой ветки:

Было: станции “Белорусская” и “Новослободская” Кольцевой линии накладываются поверх радиальных линий — это не очень красиво.
Было: станции “Белорусская” и “Новослободская” Кольцевой линии накладываются поверх радиальных линий — это не очень красиво.

Пересечение линий

Далее упорядочим отображение линий по глубине, которое проявляется на пересечении линий: более глубокие линии должны быть на заднем плане.

В старой версии порядок отрисовки линий никак не управлялся, поэтому один и тот же участок мог отображаться по разному для разных дат:

Для обозначения относительной глубины залегания вводим новый атрибут — layer — который привязывается к линии (way).

Более глубоким тоннелям соответствует меньшее значение layer. Дорабатываем логику отрисовки линий (ways): начиная с самых нижних уровней поэтапно отрисовываем все линии до самых высоких значений layer.

Теперь все пересечения линий соответствуют реальному расположению путей:

Википедия

У нас интерактивная карта — значит, не лишним будет добавить информацию и детали про станции и линии метро. Но всё уже сделано до нас. Поэтому просто добавляем ссылку на Википедию:

 Нажатие на иконку Википедии в левом нижнем углу откроет в новой табе соответствующую статью.
Нажатие на иконку Википедии в левом нижнем углу откроет в новой табе соответствующую статью.

Кнопки навигации

Добавляем кнопки навигации по событиям (events). При нажатии происходит, соответственно, переключение текущей даты на ближайшее предыдущее, либо будущее событие.

Вместе с кнопками добавляем управление с клавиатуры:

  • влево/вправо — переключение даты на предыдущее / будущее событие;

  • вверх/вниз — переключение даты на один день вперед / назад.

Будущее метро

В комментариях к предыдущей статье предложили прекрасную идею: добавить на карту планируемые линии и станции.

Общие планы по развитию метро на ближайшие лет 5 известны и доступны.

Конечно же, за такой срок  что-то может измениться (и, наверняка, изменится). К тому же, неизвестны, хотя бы, примерные даты открытия новых станций и участков. Но, в целом, в сети достаточно много материалов, чтобы предположить, как будет развиваться метро в ближайшие 5 лет.

Открываем, изучаем, фантазируем:

Изображение из открытых источников.
Изображение из открытых источников.
Изображение из открытых источников.
Изображение из открытых источников.
Изображение из открытых источников.
Изображение из открытых источников.
Изображение из открытых источников.
Изображение из открытых источников.

Где-то к 2028 году будут открыты новые линии Троицкая, Бирюлёвская, Рублево-Архангельская, а также Солнцевская и Калининская линии объединятся в Калининско-Солнцевскую:

Новые линии: Троицкая, Бирюлёвская, Рублево-Архангельская, а также объединение Солнцевской и Калининской линий в Калининско-Солнцевскую.
Новые линии: Троицкая, Бирюлёвская, Рублево-Архангельская, а также объединение Солнцевской и Калининской линий в Калининско-Солнцевскую.

Ложка дегтя

Красота требует жертв. Для того, чтобы линии на карте соответствовали реальному расположению путей, общее количество точек многократно увеличено. Также, добавлены новые линии и дополнительные данные.

Это всё увеличивает объем обрабатываемой информации и усложняет рендеринг изображения, что не самым лучшим образом сказывается на производительности.

Стали заметны задержки и рывки при навигации — и это предмет для дальнейшей оптимизации.

Итоги

Помимо перечисленных в статье моментов, добавлен ещё ряд менее заметных улучшений.

На проработку карты, включая статью для Хабра, было затрачено около 55 часов.

Что получилось: https://mm.timelapsemap.com.

Ссылка на эту версию для истории: https://timelapsemap.com/h/256d54.

Теги:
Хабы:
+19
Комментарии10

Публикации