Интерактивная карта Московского метрополитена: наводим красоту
Продолжаем работу над интерактивной картой, созданной в прошлой части. В этот раз займемся косметикой, сфокусируемся на визуальных изменениях с минимумом технических деталей.
Геометрия линий
Проведение прямых отрезков метро от станции к станции не передает истинную геометрию путей. В отдельных случаях линии мало отличается от прямых, но чаще это не так.
Для отрисовки более точных линий используем данные OSM и добавляем промежуточные точки между станциями.
В первой версии карты было 252 точки. В новой версии — почти в 23 раза больше — 5688 точек:
Тоннель от Крылатского до Строгино идет очень замысловатым образом: часть пути проходит по Серебряноборским тоннелям; также на этом перегоне планировалась станция Троице-Лыково.
Не менее замысловатые изгибы Филевской и Солнцевской линий.
Пересечение станций
Далее обратим внимание, что координаты некоторых станций настолько близки, что накладываются друг на друга на схеме — выглядит это не очень хорошо.
Двигаем точки (в пределах реальных размеров станций метро), чтобы максимально разнести их на схеме:
Было: станции «Деловой центр» Солнцевской и Большой Кольцевой линий, а также станций станции «Киевская» Кольцевой и Арбатско-Покровской линий практически сливаются.
Также исправляем ситуации, когда станция метро одной ветки накладывается на линию другой ветки:
Было: станции «Белорусская» и «Новослободская» Кольцевой линии накладываются поверх радиальных линий — это не очень красиво.
Пересечение линий
Далее упорядочим отображение линий по глубине, которое проявляется на пересечении линий: более глубокие линии должны быть на заднем плане.
В старой версии порядок отрисовки линий никак не управлялся, поэтому один и тот же участок мог отображаться по разному для разных дат:
Для обозначения относительной глубины залегания вводим новый атрибут — layer— который привязывается к линии (way).
Более глубоким тоннелям соответствует меньшее значение layer. Дорабатываем логику отрисовки линий (ways): начиная с самых нижних уровней поэтапно отрисовываем все линии до самых высоких значений layer.
Теперь все пересечения линий соответствуют реальному расположению путей:
Википедия
У нас интерактивная карта — значит, не лишним будет добавить информацию и детали про станции и линии метро. Но всё уже сделано до нас. Поэтому просто добавляем ссылку на Википедию:
Нажатие на иконку Википедии в левом нижнем углу откроет в новой табе соответствующую статью.
Кнопки навигации
Добавляем кнопки навигации по событиям (events). При нажатии происходит, соответственно, переключение текущей даты на ближайшее предыдущее, либо будущее событие.
Вместе с кнопками добавляем управление с клавиатуры:
влево/вправо — переключение даты на предыдущее / будущее событие;
вверх/вниз — переключение даты на один день вперед / назад.
Будущее метро
В комментариях к предыдущей статье предложили прекрасную идею: добавить на карту планируемые линии и станции.
Общие планы по развитию метро на ближайшие лет 5 известны и доступны.
Конечно же, за такой срок что-то может измениться (и, наверняка, изменится). К тому же, неизвестны, хотя бы, примерные даты открытия новых станций и участков. Но, в целом, в сети достаточно много материалов, чтобы предположить, как будет развиваться метро в ближайшие 5 лет.
Открываем, изучаем, фантазируем:
Изображение из открытых источников.
Изображение из открытых источников.
Изображение из открытых источников.
Изображение из открытых источников.
Где-то к 2028 году будут открыты новые линии Троицкая, Бирюлёвская, Рублево-Архангельская, а также Солнцевская и Калининская линии объединятся в Калининско-Солнцевскую:
Новые линии: Троицкая, Бирюлёвская, Рублево-Архангельская, а также объединение Солнцевской и Калининской линий в Калининско-Солнцевскую.
Ложка дегтя
Красота требует жертв. Для того, чтобы линии на карте соответствовали реальному расположению путей, общее количество точек многократно увеличено. Также, добавлены новые линии и дополнительные данные.
Это всё увеличивает объем обрабатываемой информации и усложняет рендеринг изображения, что не самым лучшим образом сказывается на производительности.
Стали заметны задержки и рывки при навигации — и это предмет для дальнейшей оптимизации.
Итоги
Помимо перечисленных в статье моментов, добавлен ещё ряд менее заметных улучшений.
На проработку карты, включая статью для Хабра, было затрачено около 55 часов.
Что получилось: https://mm.timelapsemap.com.
Ссылка на эту версию для истории: https://timelapsemap.com/h/256d54.
