Программа для рисования схемы метро

Программа для создания карт метро MetroMapEditor

У Вас есть идея, как лучше построить метро? Своя трассировка предполагаемой линии? Нарисовали свою схему будущего метро?
Вам сюда!

14 сообщений • Страница 1 из 1

Программа для создания карт метро MetroMapEditor

Сообщение Manhattan » 03 мар 2013, 23:47

Всем привет!
Сделал небольшую программку для создания сколь угодно сложных карт метро и фэнтезимапов в несколько кликов мыши.
Программа создана на основе открытого проекта OpenStreetMap (и в частности исходных кодов демонстрационного проекта OSMCtrlApp), использует в качестве подложки карты OpenStreetMap и поэтому требует подключения к интернету для подгрузки тайлов.

Возможности:
Создание неограниченного количества линий, как линейных так и кольцевых
Сохранение и загрузка схем метро в файле
Динамическое масштабирование (колесом мыши или кнопками масштаба)
Макимальное количество станций в линии 200, максимальное количество линий, пересекающихся в одной станции 12 (просто для оптимизации, вряд ли в где-то мире есть пересадка на 12 линий сразу)

Вымышленная схема метро (Совет)

Все линии рисуются красивыми сплайнами
Создание новых линий одним кликом мыши, создание станций кликом мыши, перемещение станций мышью, управление режимами мыши через контекстное меню по правой кнопке
Автоматическое создание пересадок при добавлении станции в позицию уже существующей
Все метро представлено в древовидном окне сбоку, там тоже есть контекстное меню, позвляющее переименовывать и удалять станции и линии, назначать станциям каждой линии цвет, группировать и разгруппировывать пересадки, включать и отключать закольцованность линии

В общем-то и все. Запускаться вроде бы должна на любой Windows, ничего особо не требует кроме GDI+, который сейчас есть везде. В качестве бонуса в архиве — карта существующего метро, которую можно загрузить, посмотреть и использовать как основу для создания других карт. Если будет возможность, буду развивать ее, сделаю экспорт в png в произвольном масштабе, настройки шрифтов и цветов, улучшения интерфейса и т.п.
P.S. Почаще сохраняйте промежуточные результаты, у меня программа один раз вылетела в странном месте при попытке изменить цвет станций линии, причину так и не нашел.

У вас нет необходимых прав для просмотра вложений в этом сообщении.

Re: Программа для создания карт метро MetroMapEditor

Не стоит забывать про сложные ситуации вроде вилок, петель, прокладки нескольких линий в одном тоннеле, и пересадки с линии на саму себя (даже такое встречается, например в Лондоне разорвали и продлили Сёркл-лайн, в результате линия стала напоминать цифру 6 [отзеркаленную и положенную набок] с пересадкой в стыке, при этом несколько линий в одном тоннеле тоже имеются). За границей вообще много тяжёлых случаев, советую погуглить.

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

Чей дизайн схемы метро лучше?

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

Запустил программу и обнаружил один косяк — невозможно менять расположение станций на линии, хотел добавить «Театральную», а она упорно вставляется после «Улицы Дыбенко» и нет возможности перенести её в положение перед «Спасской». Даже если такая возможность и есть, она не очевидна (по хорошему нужно менять последовательность станций на линии таская их по списку станций слева). Переведите программы на русский (или сделайте дополнительно русскую версию).

А это что за фигня:

Untitled-1.jpg
почему не подписано?
И самое главное добавьте UNDO .
У вас нет необходимых прав для просмотра вложений в этом сообщении.

Re: Программа для создания карт метро MetroMapEditor

Сообщение Manhattan » 04 мар 2013, 08:47

Косяки там конечно есть, через недельку исправлю. Вставлять станции можно в любое место линии, после выделенной станции или перед ней, как раз эти кнопочки и управляют как вставлять — после станции или перед ней. Для этого нужно выбрать линию (сделать ее активной).
С Театральной тем ни менее косяк в том, что там пересадка, а при выделении пересадки мышью выделяется какая-то одна станция этой пересадки (первая попавшаяся), а надо чтобы выделялась та, которая находится на «активной» линии. Временное решение — «разгруппировать» Сенную-Садовую-Спасскую, отвести Спасскую немного в сторону, сделать Театральную, вернуть Спасскую на место и сгруппировать обратно. Но это действительно косяк, я его исправлю как только будет время. Ну и в целом с интерфейсом неясно — поскольку я придумывал все сам, то изначально было неочевидно, какой способ работы будет наиболее удобным и интуитивно понятным.
Ну и плюс еще несколько вещей надо сделать — выделение станции на карте при выделени ее в дереве, например.
Вилки не поддердживаются, просто непонятно как их наложить на иерархическую структуру (можно сделать пересадку и еще одну линию). Петли (пересечения линии с собой) поддерживаются уже сейчас. Параллельные линии тоже — возможно будет немного некрасиво визуально.
Смысл программы пока — просто проектировать новые ветки метро, без подробностей типа расположения выходов, но если кому-то будет интересно — можно будет открыть исходники.

Re: Программа для создания карт метро MetroMapEditor

Manhattan писал(а): Вилки не поддердживаются, просто непонятно как их наложить на иерархическую структуру (можно сделать пересадку и еще одну линию).

А вот нарисуйте-ка мне таким способом Киевский узел в Москве, там три станции, одна из которых развилка. По вашему способу «Киевская» Филёвской линии займёт половину кружка, в то время как на Арбатско-Покровскую и Кольцевую достанется по 1/4.

Ещё несколько замечаний:
1. Очень неудобно, что в режиме рисования схемы нельзя подвинуть карту не поставив на ней станции, в большинстве программ передвижение схемы организовано по нажатию на среднюю клавишу мыши (она же колёсико).
2. Режим выбора способа добавления станции до или после существующей должен быть активен всегда, а то при активации карты левым щелчком мыши автоматически ставится станция приходится менять режим потом удалять станцию и ставить заново.
3. Надписи на схеме располагаются несколько странно, и далековато от кружка. Это может иметь смысл, когда линия располагается горизонтально, но когда она располагается вертикально появляется ощущение, что что-то не то. На пересадках вообще получается невесть что, вторая добавленная станция оказывается снизу, а название второй добавленной станции иногда пишется сверху. Непорядок.
4. При сильном отдалении схемы надписи надо убирать, а то получается несъедобная каша.
5. Чисто эстетически, на тройном пересадочном узле — сектора лучше располагать как эмблему Mercedes’а.
6. Переименование станций лучше делать не через контекстное меню, а по двойному щелчку мыши прямо в списке, примерно как в Photoshop’е с текстовыми слоями.
7. Удаление станции нужно реализовать через её выделение и последующем нажатием на клавишу delete.

Может добавить возможность выделять строящиеся и проектируемые участки?

Re: Программа для создания карт метро MetroMapEditor

Сообщение Фуфсяк » 05 мар 2013, 09:51

Да хватит придираться, я вот, например, давно мечтал о такой программе. Косяки есть, но ведь и работа над программой только начата. Это ведь, если не ошибаюсь первый её релиз? В общем, спасибо, очень интересно! Буду ждать следующие версии!

От вселенской любви только морды в крови.

Re: Программа для создания карт метро MetroMapEditor

Сообщение Divan » 06 мар 2013, 17:50

Программа конечно с характером. Пусть и не из раздела «без поллитры не разобраться», но тем не менее. Я долго не втыкал, что нужно линию делать активной, чтобы добавлять станции. Но в целом — зачёт!
Вот, попытался сделать. Может, кого заинтересует.

P.S. Внезапно «Расширение metro запрещено администратором.» Ну да что там, пусть будет архивчик.

У вас нет необходимых прав для просмотра вложений в этом сообщении.

Жаль только, жить в эту пору прекрасную
Уж не придётся ни мне, ни тебе.

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

Re: Программа для создания карт метро MetroMapEditor

Сообщение 6o4ka » 08 мар 2013, 11:29

Может торможу, но чего-то не понял, как станции к северу добавлять? например после Приморской.
у меня линия упорно разворачивается назад от Рыбацкого

Re: Программа для создания карт метро MetroMapEditor

Я позволю ещё раз ответить на эту цитату, но в другом ключе.

Manhattan писал(а): Вилки не поддердживаются, просто непонятно как их наложить на иерархическую структуру (можно сделать пересадку и еще одну линию).

Вы же сами почти решили задачу с иерархией. Можно сделать ещё одну линию (лучше оформить как суб-линию), но при этом не добавлять новую станцию в узел (можно реализовать как опцию, например через checkbox). Кстати возможность поставить на линии ключевую точку без добавления станции явно не помешает, особенно если кривая плохо соответствует реально существующему перегону (очень хорошо заметно при попытке нарисовать наземный участок).

Re: Программа для создания карт метро MetroMapEditor

Сообщение taigaa » 08 мар 2013, 18:40

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

Re: Программа для создания карт метро MetroMapEditor

Сообщение Manhattan » 08 мар 2013, 23:06

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

Сейчас, как я понял, наиболее неудобным оказалось именно редактирование линий — добавление новых станций и т.д.
Сейчас логика такая — есть два режима: добавление после выделенной станции и добавление перед выделенной. Каждая новая добавленная станция становится выделенной. Это обеспечивает возможность добавлять станции в начало и в конец ветки, а также вставлять их после и перед любой станцией.
Какие есть идеи как это можно улучшить?

Re: Программа для создания карт метро MetroMapEditor

Сообщение Divan » 08 мар 2013, 23:53

Хотелось бы, чтобы он сам додумывался, добавлять станцию перед, или после текущей. Например, сравнивая расстояния.
То есть, например, хочу я развить НВЛ. Для этого выбираю режим добавления станций, тыкаю в Приморскую — он делает НВЛ активной линией, тыкаю в, условно говоря, Смоленское кладбище, и он понимает — ага, от этой станции до Приморской и до Василеостровской ближе, чем длина перегона Василеостровская-Приморская, значит, юзер хочет воткнуть промежуточную станцию. Или тыкаю я на Крестовский остров, и он — ага, эта станция дальше от Василеостровской, чем Приморская, значит, это продолжение линии за Приморскую. Как-то так.

Ну, это в идеале. На худой конец, надо, чтобы было очевидно, где какой конец у линии. А то из двух кнопок мне приходилось методом тыка выбирать нужную. Или я до чего-то не допёр?

Надо ли делать промежуточные точки, рассчёт длин линий — не знаю. Не знаю, насколько это соответствует идеи этой программы. Всё же она, насколько я вижу, нужна чисто для рисования схемок.
Если уж кто хочет точную трассировку, то это делать нужно прежде всего в 3d — иначе не так интересно.

Лично я хочу увидеть в следующей версии экспорт в виде картинки. И конечно, кнопку «undo».

Жаль только, жить в эту пору прекрасную
Уж не придётся ни мне, ни тебе.

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

Re: Программа для создания карт метро MetroMapEditor

Manhattan писал(а): Сейчас, как я понял, наиболее неудобным оказалось именно редактирование линий — добавление новых станций и т.д.
Сейчас логика такая — есть два режима: добавление после выделенной станции и добавление перед выделенной. Каждая новая добавленная станция становится выделенной. Это обеспечивает возможность добавлять станции в начало и в конец ветки, а также вставлять их после и перед любой станцией.
Какие есть идеи как это можно улучшить?

Единственное, что я могу предложить — это сортировку последовательности станций перемещением их по списку слева (как слои в Photoshop’е, например). Станции соединяются линиями в той последовательности в которой обозначены в списке, то есть создал станцию нажатием на её местоположением, допустим она добавилась в конце линии, а нужно в начале, лезешь мышкой список и мышкой drag станцию и тащишь её в то место, где она должна быть и там её drop. При этом станцию можно перенести и на другую линию (напр., выделил в списке «Крылатское» и «Молодёжную» на Филёвской линии, затем drag’n’drop их на Арбатско-Покровскую). Однако ваш переключатель тем не менее имеет смысл, когда одну линию нужно продлить в одну сторону, а другую в другую, иначе уперетаскиваешься. Но сделайте его доступным постоянно, пусть не блокируется при ковырянии со списком.

Убейте напрочь контекстное меню на карте, у вас эти кнопки расположены в основном меню, создание новой линии поместите туда, используйте нажатие на правую кнопку, чтобы двигать карту. Ещё такая мысль, что контекстное меню можно сделать и на левой кнопке, нажал на точку и вылезает меню с вариантами (добавить станцию » в конец линии, в начало линии; добавить контрольную точку), но это меню может быть удобно не каждому, поэтому если его и реализовывать, то исключительно через Опции.

Режим выделения желательно использовать только для перемещения станций, всё остальное можно реализовать другим способом.

Филёвская линия
|Александровский сад
|Арбатская
|Смоленская
|Киевская
−сублиния1
||точка1 (соответствует координатам «Киевской» и изменяется вместе с ними, лучше скрыть из списка)
||Выставочная
||Международная
|Студенческая
|Кутузовская
|Фили
.
|Кунцевская

Внимание, в некоторых случаях узловая станция соответствует всем критериям пересадочной станции и имеет две отдельные платформы, поэтому решение отображать узловую станцию самостоятельно (как «Киевскую» Филёвской линии [пересадки на Кольцевую и Арбатско-Покровскую линии к данному вопросу не относятся]) или же как пересадочную (как «Каширскую» в бытность вилочного движения на Горьковско-Замоскворецкой линии) нужно оставить за пользователем.

При этом цвет сублинии соответствует цвету линии в состав которой она входит.

И ещё раз повторю неплохо было бы и перегоны красить в цвет линии.

Источник: www.subwaytalks.ru

Создаём интерактивную векторную схему московского метро

Московское метро меняется. Желающий представить себе схему, скажем, 1945 года без проблем соберёт данные из открытых источников; остаётся вопрос с представлением результата, — не на круговой диаграмме же его показывать. В статье я расскажу об основных шагах в создании proof-of-concept сервиса, позволяющего показать схему метро, например, на 1 мая 74 года (слева) или станции с глубиной заложения больше 30 метров (справа).

Формируем требования

1. Показ станций и линий для выбранного диапазона дат
2. Красота — «Студия Лебедева» разработала замечательную схему; её и возьмём за основу.
3. Удобство использования.
4. Для ввода значений я решил использовать ползунки (range slider). С ними мы добьёмся интерактивности и изменений «на лету».
5. Я привык к функционалу картографических сервисов, позволяющих менять масштаб и двигать карту, — реализуем его; тем более что наша схема, по факту, и есть карта.
6. Добавим возможность поделиться ссылкой на выборку.

Отображаем схему

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

Станции

Самое главное на схеме, — станции, поэтому начнём с них. Всего 3 типа: конечные, пересадочные и обычные. 2 прямоугольника и круг. Что может быть проще? Кропотливо расставим их на полотне, а некоторые ещё и повернём.

1 совет

Сохраните схему как картинку, задайте невысокую прозрачность и расположите её под нашим svg-холстом, которому задайте такие же размеры. Это упростит расстановку станций.

Получим что-то вроде этого

Чтобы с комфортом двигаться дальше, я так же добавил в свойства станций их индекс (числовой) и линию, — чуть ниже вы поймёте, для чего это сделано.

2 совет

Если вы делаете нечто большее, нежели proof of concept, не пожалейте нескольких часов на написание редактора с возможностью перетаскивания станций и указания их свойств. Обслуживать вашу карту станет на порядок проще. Целесообразность прямо пропорциональна количеству станций и их свойств.

Линии

Что же такое линия? Это набор отрезков между станциями. У нас есть координаты, индексы и линии станций — а значит мы легко нарисуем отрезки. Пройдёмся по станциям и будем руководствоваться следующей логикой для каждой из них: если есть станция той же линии, но с индексом старше на единицу, то рисуем между ними сегмент.

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

1. отрезок на кольцевой, соединяющий «младшую» и «старшую» по индексу станции
2. отрезок между «Выставочной» и «Киевской»

Как мы увидим, начало и конец сегмента идут не совсем так, как нам надо. Добавим для каждого из 3 типов станций смещение, высчитанное опытным путём. Так же наши сегменты заданы прямыми, но сами линии много где причудливо изогнуты. Пожалуй, это самая кропотливая часть работы над проектом, для ряда сегментов добавим исключение в поведении. Благо, синтаксис несложный.

Вот наш промежуточный вариант

Переходы

Svg графика использует модель слоёв, а значит чтобы получить нужный результат, каждый переход сделаем с помощью двух кривых: цветная с толстой обводкой пониже и белая с тонкой повыше. Итогое расположение элементов следующее, от нижних к верхним: линии, отрезки переходов с цветной толстой обводкой, станции, отрезки переходов с тонкой белой обводкой, подложка названия станций, название станций.

Названия станций и подложка

Отобразим названия и выровняем текст с помощью свойства text-anchor. Способа осуществить перенос строки, кроме как созданием дополнительного элемента, к сожалению, нет.

Подложку текста сделаем обычным полупрозрачным прямоугольком. Размеры и координаты текста мы получим с помощью getBBox.

3 совет

Потратив некоторое время на поиски более изящного решения подложки текста, на stackoverflow вы найдёте заплюсованное предложение использовать фильтр. Я советую использовать это решение только в случае единичного отображения графики. Если предполагаются дальнейшие манипуляции с графикой, фильтр поведёт себя некорректно.

Перекрашиваем

Я выбрал цвета по умолчанию для станций как цвета их линий. Но что, если мы хотим перекрасить всё по произвольному градиенту? Это не так сложно как может показаться.

Создание схемы линий Московского метро 3.0

Перед версткой вагонной схемы решаем пересмотреть формат. Раньше у нас было шесть разных форматов с разными пропорциями для всех типов вагонов.

Такое многообразие трудно поддерживать. Поэтому решаем объединить два формата (В и Е, которые предназначены для «Оки» и «Яузы») и сделать единые пропорции сторон. За основу берем формат ДИН. Заверстываем базовый формат.

Для примерки идем в метро. Нужно обмерить три вагона: номерной, «Оку» и «Яузу». Чтобы не светить новую схему раньше времени, для примерки делаем пиксельную картинку. Для оценки размера этого хватит, и ничего лишнего мы не покажем.

Во время примерки выясняется, что формат А для «Ежей» и номерных вагонов поменять не получится. Высоту формата менять нельзя, а новая схема в таких рамках становится маленькой.

А подружить «Яузу» и «Оку» вполне реально. Существующие форматы для этих вагонов велики — лист занимает всю ширину простенка между дверью и окном. Если сделать новый формат чуть ýже, станет хорошо.

Схемы для вагонов и инфососов

После вычитки основной схемы редактором и переводчиком верстаем ее на пять форматов для разных вагонов (один с рекламным модулем) и плюс два формата для инфососа.

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

Легенда существенно не поменялась: набрана Москоу Сансом, добавилась 14-я линия МКЖД, наземные пересадки и транспорт перекрашены в брендо-синий цвет. На всех вагонных схемах легенда одна, на прозрачной и на инфососе — другая.

В подвале тоже есть незначительные обновления: теперь там стандартный блок контактной информации Мосгортранса. Подвал везде либо складываем стопкой, либо раскатываем в линию.

Для колонны экстренного вызова верстаем схемы с алфавитным указателем, куда теперь добавлены новые строящиеся станции и МКЖД. Инфоблок красиво размещаем в середине макета.

Сверстав все форматы, отдаем схему в печать.

Берем с сервера рабочий макет правил, расширяем формат и заверстываем новый текст дополнений, утвержденных Постановлением Правительства Москвы № 452-ПП от 21.07.2015. Отправляем текст редактору на вычитку. Кегль теперь крупнее, поля шире — красота!

Дизайнер предлагает заголовок сделать короче, логотип крупнее, убрать серые круги, сделать один отступ у абзацев, а весь п. 2.13 разместить целиком в третьей колонке. Идеалочка!

Заказчик в восторге и просит сверстать правила так же красиво еще на два формата. И набрать их не Директом, а Москоу Сансом, как новую схему метро.

Верстаем правила Москоу Сансом, узкие форматы набираем в две колонки — короткая строка позволяет уменьшить межстрочный интервал, а кегль взять крупнее. Метранпаж доволен набором и советует поставить заголовок во всю ширь узкого формата. Получается красивая и богатая шапка над двумя газетными колонками — любо-дорого посмотреть! Дизайнер одобряет макет сдержанным оканьем. Редактор терпеливо проверяет переносы в словах на всех трех форматах.

Вскоре от заказчика приходит требование: правила должны быть оформлены в соответствии с брендом «Московского транспорта». После внесения этих правок отдаем правила в печать.

Источник: www.artlebedev.ru