Программирование
0,0
рейтинг
24 ноября 2013 в 21:47

Разработка → HTML5 Canvas Схема пригородного движения ж/д сообщения Москвы и МО

Ещё одна схема движения железнодорожного транспорта с использованием возможностей Canvas и dbCartajs.
Moscow Rail Map

В оригинале она называется Moscow Underground and Commuter Rail Map, её можно видеть в тамбурах подмосковных электричек. Изначально я хотел реализовать именно эту карту в качестве очередного демо к проекту dbCartajs, но в Сети нашёл лишь копию карты, снятую на мобильный телефон с неважным качеством. Зато с легкостью нашел с десяток схем Московского метро. Самая красивая, на мой взгляд, в Википедии, самая неказистая оказалась почему-то у Яндекса с его-то возможностями. Собственно SVG-вариант из Википедии я и переделал под Canvas, о чем писал в предыдущей статье.

Спустя некоторое время я нашел на форумах два варианта схем в формате JPEG и решил реализовать первоначальную задумку. Ссылки на источники я потерял, поэтому еще раз выложил эти картинки в оригинале, если кому интересно, здесь: mosrailmap и vkontur.

Онлайн-версию моей версии карты можно увидеть на dbcartajs.appspot.com. Из-за ограничений на количество просмотров на бесплатном хостинге сайт может быть заблокирован, поэтому я советую брать и смотреть проект с github.

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

Все демо, включая этот, полностью написаны на JavaScript. Я старался максимально упрощать код и не использовал сторонних библиотек типа jQuery, ExtJs. Цель — изучение возможностей создания изображений на Canvas.

Для тех, кто впервые видит виджет dbCarta напомню про управление картой:

* Левый клик центрирует точку на карте в плоских проекциях, поворачивает глобус в сферических проекциях;
* Кнопки масштаба [+|-] расположены на правой стороне карты.

Кроме того, навигация возможна по списку станций.

В общем, как говорится, жителям Подольска, Люберец и Луховиц добро пожаловать, москвичам просьба не беспокоить.
Григорий Еремин @egaxegax
карма
14,0
рейтинг 0,0
Программирование
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (22)

  • 0
    Запустил на iphone 4s, htc dream — действительно быстро! только в ± сложно попасть пальцем.
  • +13
    Попытался зажать мышкой и перетянуть карту, результат был невероятен. Как я и хотел, только с точностью до наоборот :)
    • +1
      С масштабированием колесиком мышки тоже не понятно.
    • 0
      Тоже пошел сначала щупать потом читать и был удивлен обратному эффекту перетаскивания мышкой, полному отсутствию нативного зума в виде колесика или клавиш +\- клавиатуры и не работающим клавишам стрелок. Но судя по тексту статьи это фича:
      Для тех, кто впервые видит виджет dbCarta напомню про управление картой:

      * Левый клик центрирует точку на карте в плоских проекциях, поворачивает глобус в сферических проекциях;
      * Кнопки масштаба [+|-] расположены на правой стороне карты.
  • +1
    Я, конечно, понимаю, что «Цель — изучение возможностей создания изображений на Canvas», но если в реальности, то просто картинка в jpg даже в браузере более юзабельна… кроме просто нарисовать не в чисто экспериментальной версии было бы полезно много всего туда приделать, ну и навигацию конечно более интуитивную, а не наоборот.
  • +2
    Not usable
  • +1
    Спасибо, что делаете это продукт.

    Присоединяюсь к выше отписавшимся — надо начинать работать над юзабилити интерфейса (перетаскивание/вращение мышью по зажатию клавиши и зум колесом мыши). Это даст толчок в возможностях применения и развитии.
    • 0
      Поработал насчет юзабилити. Центрирование по клику универсально работает и на планшете и на обычном пк с мышью и или тачпадом. Поэтому оно мне нравилось. Но клиент всегда прав, поэтому я заменил центрирование на таскание мышью. Хотел использовать проект из этого поста, но не стал, поскольку он «заточен» под тайлы (я рисую картинку целиком) и, кроме того, не работает под Firefox 3.5 (мне на работе пока нужно с этим браузером работать). Сделал смещение всей картинки, но работает плавно. Для сферы и планшетов (где не работает mousemove) оставил ценрирование.

      С колесиком мыши пока не получилось плавно менять масштаб. Думаю найти какой-нибудь готовый пример.

      В целом обновления там же на dbcartajs.appspot.com.
  • 0
    Немного оффтопа: удивительно всё же, насколько действительно уродская карта у Яндекс-Метро. Вопрос почему за столько лет они её не заменили?
    А по топику — классно! А реально ли объединить эту с полной картой метро? Ну и сделать нормальное «таскание», а не центрирование по клику.
    • 0
      С метро они и так почти объединены просто вместо всех станций выведены только пересадочные. Можно объединить из demodata файлы mosmetro.js и mosrails.js. Насчет таскания. Пробовал повесить смещение на onmousemove, но тормоза при этом жуткие. Недавно здесь на Хабре читал статью с примером «перетаскивания» на Canvas. Надо будет попробовать.
      • 0
        Просто вот хочется чтобы метро показывало все станции и все ветки были раскрашены. :) Мечты такие, «универсальная карта рельсового транспорта Москвы и МО». )
  • 0
    У вас между Болшево и Воронком три станции потерялись.
    • 0
      Да, не заметил. Исправил. Столько станций много. В метро около 250, здесь свыше 700. Глаз-алмаз!

  • 0
    Железнодорожный потеряли. Не забуду — не прощу :)

    По сравнению с вашей предыдущей схемой метро прогресс, определённо, есть, но:
    — пересадки кошмарны, особенно ТПУ на Комсомольской. Посмотрите в сторону лондонского формата «одна пересадка — один кружок»;
    — опять про пересадки: чем отличается кружок от квадратика ещё можно догадаться, но чем отличается заполненный кружок от незаполненного или чистый коридор от пятнистого — невозможно. Опять же, конечные остановки тоже обозначены квадратиками, как и пересадки, а их бы лучше обозначить как нормальный тупик;
    — остановки лучше рисовать пеньками: они точно указывают на название и паразитный эффект «1+1=3» исчезает;
    — про пунктирные линии можно подумать, что они строящиеся;
    — изгибать линии лучше за пределами станции.

    Но, в целом — зачёт. У меня, в своё время, на переосмысление этой жуткой схемы здоровья не хватило.
    • 0
      Квадратики — это не пересадки. Это конечные для разных электричек. :) А пунктиры — путь следования аэроэкспрессов. К слову, до шереметьева пунктир должен идти от Белорусского, а не от Савёловского вокзала. И ветка от Белорусской продолжается не только на «Савёловской», но и на «Савёловский вокзал» — разветвляется. Есть прямые электрички от Белорусского до Савёловского и обратно — я на них регулярно езжу. )

      И да, пересадки мне почему-то нравятся…
      • 0
        Во, даже и не пересадки. То есть уже и легенда нужна, что плохо.

        На самом деле, для конечного пользователя схемы информация о прямых, кривых и разветвляющихся линиях и промежуточных конечных неактуальна (см. Филёвскую линию в метро и «поезд следует до станции «Новогиреево»») и сильно замусоривает саму схему, задача которой показать этому самому пользователю, что из пункта А можно доехать до пункта Б, а остальное уже забота указателей и прочей навигации на станциях и в поездах.

        Аэроэкспресс — допустим. Решение с пунктиром сомнительно: людей уже приучили, что это строящиеся линии. Я бы, например, сделал линию другой толщины и подписал, что это аэроэкспресс.

        В пересадках какая-то магия есть, но по назначению пользоваться невозможно.
        • 0
          Тут как бы карта скопирована с той, что в тамбурах электричек. Она там серьёзно именно такая — с пунктирами, квадратиками и прочим. Стиль пересадок к слову по-моему тоже оттуда взят. Так сказать, следование оригиналу. :)

          Ну а вообще я люблю, когда на картах указаны все подробности. Максимум информации, но при этом не засоряющая. Я считаю, что те же квадратики не засоряют читаемость «куда и откуда едут электрички чисто теоретически». С пересадками тоже всё понятно.

          Вот пунктиры — тут да, соглашусь, возникает когнитивный диссонанс. Но в остальном всё не так плохо.
    • 0
      ;)
    • 0
      + Железнодорожный. Спасибо за тестирование.
      • 0
        Пожалуйста. Кстати, ещё по родной жёлтой ветке: если вы всё-таки решили обозначать квадратом «промежуточную конечную», то квадраты не нужны в Реутове, Новогирееве, Чухлинке и на Серпе и Молоте, зато нужны в Железнодорожном, Купавне (есть пара таких странных электричек), Крутом и Петушках.
        • 0
          И не нужно на той же Тимирязевской, к слову.
  • 0
    Эта и другие карты теперь доступны в блоге на dbcartajs.blogspot.ru.

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