Шаблон:Схема транспортной системы: различия между версиями

Текущая версия от 07:26, 23 августа 2026

Пример схемы (статическое изображение)

🗺 Схема линий Муроморского метрополитена

Линии скоростного транспорта

     🚇 Станции Муроморского метрополитена

Невско-Заводская линия

Пример схемы (векторное интерактивное изображение)

M

Пример системы

Интерактивная схема линий

⌨ ⇄ ⇅ Скролл

🗺 Интерактивная схема линий

Линии скоростного транспорта

1 2

     🚇 Станции скоростного транспорта по линиям

1Линия 1

2Линия 2

Руководство по интеграции схем

Шаблон поддерживает 2 способа вывода транспортных схем:

1. Классический вариант (статический файл или реестр без схемы)

Использует загруженное изображение (.png, .jpg, .svg) или отображает только блок легенды и реестра станций (если параметр |файл= не указан):

{{Схема транспортной системы
|название         = Муроморский скоростной транспорт
|файл             = Схема_Муроморского_метрополитена.png
|ширина           = 850px
|подпись          = Схема линий скоростного транспорта Муроморска
|заголовок линий  = Линии скоростного транспорта
|заголовок списка = 🚇 Станции скоростного транспорта по линиям
|линии            = 
{{СтМ|1|линия}}
{{СтМ|2|линия}}
{{СтМ|D1|линия}}
|список           = 
* {{СтМ|1|линия|отображение=Линия 1 (Невско-Заводская)}}
** {{СтМ|1|Владимирский проспект|пересадка={{СтМ|D1|Северный вокзал|уточнение=нет}}}}
** {{СтМ|1|Площадь Метростроителей|пересадка={{СтМ|2|Площадь Метростроителей}}}}

* {{СтМ|2|линия|отображение=Линия 2 (Замуррецкая)}}
** {{СтМ|2|Приморская|строящаяся=да}}
** {{СтМ|2|ВДНиТ|пересадка={{СтМ|А60}} {{СтМ|А61}}}}
}}

2. Автоматическая интерактивная векторная схема (SVG / JSON + Модуль:ТранспортнаяСхема)

Полная генерация кликабельной интерактивной карты линий и станций на лету из структурированной базы данных без необходимости ручной нарезки зон:

{{Схема транспортной системы
|карта            = 

{{#invoke:ТранспортнаяСхема|canvas|Муроморского|ширина=850|высота=620}}

{{#invoke:ТранспортнаяСхема|canvas|Муроморского|ширина_блока=280|высота_блока=205}}

{{#invoke:ТранспортнаяСхема|canvas|Муроморского|кадрирование=310 240 300 220|ширина_блока=280|шапка=нет}}

{{#invoke:ТранспортнаяСхема|canvas|Муроморского|фокус=420 310|ширина_фокуса=260|высота_фокуса=180|ширина_блока=260|шапка=нет}}

|подпись          = Интерактивная векторная схема (кликните по станции для перехода к статье)
|заголовок линий  = Линии Муроморского метрополитена
|заголовок списка = 🚇 Станции Муроморского метрополитена по линиям
|линии            = 
{{СтМ|1|линия}}
{{СтМ|2|линия}}
|список           = 
* {{СтМ|1|линия|отображение=Линия 1 (Невско-Заводская)}}
** {{СтМ|1|Владимирский проспект|пересадка={{СтМ|D1|Северный вокзал|уточнение=нет}}}}
** {{СтМ|1|Театральная}}
}}

Данные о координатах, цветах и пересадках берутся автоматически из страницы Шаблон:Интерактивная схема Муроморского метрополитена/data.json.
При изменении трассировок или добавлении станций в JSON-файле интерактивная карта перерисовывается автоматически.

@@ Строка 1: / Строка 1: @@
-<includeonly>{{#if: {{{данные|{{{json|}}}}}} |
+<includeonly><div class="ts-transport-scheme" style="clear: both; margin: 1.2em auto; width: 100%; box-sizing: border-box; text-align: {{#switch: {{{прижатие|{{{выравнивание|центр}}}}}} | лево = left | право = right | center }};">
-  {{#invoke:ТранспортнаяСхема|render|данные={{{данные|{{{json}}}}}}|файл={{{файл|}}}|ширина={{{ширина|}}}|подпись={{{подпись|}}}|карточка={{{карточка|}}}}}
-|
-<div class="ts-transport-scheme" style="clear: both; margin: 1.2em auto; width: 100%; box-sizing: border-box; text-align: {{#switch: {{{прижатие|{{{выравнивание|центр}}}}}} | лево = left | право = right | center }};">
-<!-- Контейнер графической / интерактивной схемы -->
+<!-- Графическая или интерактивная ImageMap схема -->
-<div class="ts-transport-map-card" style="display: inline-block; max-width: 100%; box-sizing: border-box; background: var(--background-color-base, #ffffff); border: 1px solid var(--border-color-base, #d0d7de); border-radius: 10px; padding: 10px; box-shadow: 0 3px 12px rgba(0,0,0,0.06); text-align: center;">
+{{#if: {{{карта|}}} |
-{{#if: {{{файл|{{{изображение|}}}}}} |
+<div class="ts-transport-map-card" style="display: inline-block; max-width: 100%; box-sizing: border-box; background: var(--background-color-base, #ffffff); border: 1px solid var(--border-color-base, #d0d7de); border-radius: 10px; padding: 10px; box-shadow: 0 3px 12px rgba(0,0,0,0.06); text-align: center; margin-bottom: 12px;">
+  <div style="overflow-x: auto; max-width: 100%;">{{{карта}}}</div>
+  {{#if: {{{подпись|}}} | <div style="font-size: 12px; color: #57606a; margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--border-color-base, #e1e4e8); text-align: center; line-height: 1.4;">🗺 {{{подпись}}}</div> }}
+</div>
+| {{#if: {{{файл|{{{изображение|}}}}}} |
+<div class="ts-transport-map-card" style="display: inline-block; max-width: 100%; box-sizing: border-box; background: var(--background-color-base, #ffffff); border: 1px solid var(--border-color-base, #d0d7de); border-radius: 10px; padding: 10px; box-shadow: 0 3px 12px rgba(0,0,0,0.06); text-align: center; margin-bottom: 12px;">
    <div style="overflow-x: auto; max-width: 100%;">[[Файл:{{{файл|{{{изображение}}}}}}|{{#if: {{{ширина|}}} | {{{ширина}}} | 900px }}|center|alt={{{название|Схема транспортной системы}}}|{{{описание|{{{название|}}}}}}]]</div>
-|
+   {{#if: {{{подпись|}}} | <div style="font-size: 12px; color: #57606a; margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--border-color-base, #e1e4e8); text-align: center; line-height: 1.4;">🗺 {{{подпись}}}</div> }}
-   <div style="overflow-x: auto; max-width: 100%; display: inline-block;">{{{карта|{{{схема|<div style="padding: 20px; color: #57606a;">''Файл схемы или интерактивная карта не указаны''</div>}}}}}}</div>
-}}
-{{#if: {{{подпись|}}} | <div style="font-size: 12px; color: #57606a; margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--border-color-base, #e1e4e8); text-align: center; line-height: 1.4;">🗺 {{{подпись}}}</div> }}
 </div>
+}} }}
-<!-- Блок легенды линий -->
+<!-- Единый блок: легенда линий + реестр станций -->
-{{#if: {{{линии|}}} |
+{{#if: {{{линии|}}}{{{список|{{{1|}}}}}} |
-<div class="ts-transport-lines-legend" style="margin: 10px auto; max-width: 950px; text-align: center; padding: 8px 12px; background: #f6f8fa; border: 1px solid #d0d7de; border-radius: 8px;">
+<div class="ts-transport-legend-container" style="margin: 0 auto; max-width: 950px; text-align: center; padding: 14px 16px; background: #f6f8fa; border: 1px solid #d0d7de; border-radius: 10px; box-sizing: border-box; box-shadow: 0 2px 6px rgba(0,0,0,0.03);">
-<div style="font-size: 11px; font-weight: bold; color: #57606a; text-transform: uppercase; margin-bottom: 4px; letter-spacing: 0.5px;">Линии скоростного транспорта</div>
-<div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; align-items: center;">
+  <!-- Верхний блок: плашки линий -->
+  {{#if: {{{линии|}}} |
+  <div class="ts-transport-lines-legend" style="margin-bottom: {{#if: {{{список|{{{1|}}}}}} | 14px | 0 }};">
+    <div style="font-size: 11px; font-weight: bold; color: #57606a; text-transform: uppercase; margin-bottom: 10px; letter-spacing: 0.6px;">{{{заголовок линий|Линии скоростного транспорта}}}</div>
+    <div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; align-items: center;">
 {{{линии}}}
-</div>
+    </div>
-</div>
+  </div>
-}}
+  }}
-<!-- Сворачиваемый реестр станций -->
+  <!-- Нижний блок: сворачиваемый реестр станций -->
-{{#if: {{{список|{{{1|}}}}}} |
+  {{#if: {{{список|{{{1|}}}}}} |
-<div class="mw-collapsible {{#ifeq: {{{свёрнут|}}} | да | mw-collapsed | }} toccolours ts-transport-list-card" style="margin: 12px auto 0 auto; max-width: 950px; text-align: left; box-sizing: border-box; background: var(--background-color-neutral-subtle, #f8f9fa); border: 1px solid var(--border-color-base, #d0d7de); border-radius: 8px; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,0.04); padding: 0;">
+  <div class="mw-collapsible {{#ifeq: {{{свёрнут|}}} | да | mw-collapsed | }} toccolours ts-transport-list-card" style="margin: 0 auto; width: 100%; text-align: left; box-sizing: border-box; background: #ffffff; border: 1px solid #d0d7de; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.04); padding: 0;">
-<div style="font-weight: bold; font-size: 13.5px; color: var(--color-base, #1f2328); background: linear-gradient(180deg, #f6f8fa 0%, #eaeef2 100%); padding: 9px 14px; border-bottom: 1px solid var(--border-color-base, #d0d7de); display: flex; align-items: center; justify-content: space-between;">
+    <div style="font-weight: bold; font-size: 13.5px; color: var(--color-base, #1f2328); background: #f6f8fa; padding: 9px 14px; border-bottom: 1px solid #d0d7de; display: flex; align-items: center; justify-content: space-between;">
-  <span>{{{заголовок списка|📋 Реестр станций метрополитена и железной дороги}}}</span>
+      <span>{{{заголовок списка|📋 Реестр станций и остановочных пунктов}}}</span>
-</div>
+    </div>
-<div class="mw-collapsible-content" style="padding: 14px 18px; column-width: {{{ширина колонок|20em}}}; -webkit-column-width: {{{ширина колонок|20em}}}; -moz-column-width: {{{ширина колонок|20em}}}; column-gap: 2em; column-rule: 1px solid #e1e4e8; font-size: 13px; line-height: 1.7;">
+    <div class="mw-collapsible-content" style="padding: 16px 20px; font-size: 13px; line-height: 1.6; column-width: {{{ширина колонок|280px}}}; column-gap: 24px; column-rule: 1px solid #e1e4e8;">
 {{{список|{{{1}}}}}}
-</div>
+    </div>
+  </div>
+  }}
 </div>
 }}
-</div>
+</div></includeonly><noinclude>
-}}</includeonly><noinclude>
-<includeonly>{{#if: {{{данные|{{{json|}}}}}} |
-  {{#invoke:ТранспортнаяСхема|render|данные={{{данные|{{{json}}}}}}|файл={{{файл|}}}|ширина={{{ширина|}}}|подпись={{{подпись|}}}|карточка={{{карточка|}}}}}
-|
-<div class="ts-transport-scheme" style="clear: both; margin: 1.2em auto; width: 100%; box-sizing: border-box; text-align: {{#switch: {{{прижатие|{{{выравнивание|центр}}}}}} | лево = left | право = right | center }};">
-<!-- Контейнер графической / интерактивной схемы -->
+== Пример схемы <small>(статическое изображение)</small> ==
-<div class="ts-transport-map-card" style="display: inline-block; max-width: 100%; box-sizing: border-box; background: var(--background-color-base, #ffffff); border: 1px solid var(--border-color-base, #d0d7de); border-radius: 10px; padding: 10px; box-shadow: 0 3px 12px rgba(0,0,0,0.06); text-align: center;">
+{{Схема транспортной системы
-{{#if: {{{файл|{{{изображение|}}}}}} |
+|название = Скоростной транспорт Муроморска
-  <div style="overflow-x: auto; max-width: 100%;">[[Файл:{{{файл|{{{изображение}}}}}}|{{#if: {{{ширина|}}} | {{{ширина}}} | 900px }}|center|alt={{{название|Схема транспортной системы}}}|{{{описание|{{{название|}}}}}}]]</div>
+|файл = Схема_Муроморского_метрополитена.png
-|
+|ширина = 850px
-  <div style="overflow-x: auto; max-width: 100%; display: inline-block;">{{{карта|{{{схема|<div style="padding: 20px; color: #57606a;">''Файл схемы или интерактивная карта не указаны''</div>}}}}}}</div>
+|подпись = Схема линий Муроморского метрополитена
+|заголовок списка = 🚇 Станции Муроморского метрополитена
+|линии =
+{{СтМ|1|линия}}
+|список =
+'''[[Невско-Заводская линия]]'''
+* {{СтМ|1|Владимирский проспект|пересадка={{СтМ|Св|Северный вокзал}}}}
+* {{СтМ|1|Театральная}}
+* {{СтМ|1|Народная|ссылка=Народная (станция метро, Невско-Заводская линия)|пересадка={{СтМ|2|Народная|ссылка=Народная (станция метро, Павловская линия)}}}}
+* {{СтМ|1|Площадь Метростроителей|пересадка={{СтМ|3|Площадь Метростроителей}}}}
+* {{СтМ|1|Морской бульвар}}
+* {{СтМ|1|Ауктува}}
+* {{СтМ|1|Машиностроителей}}
+* {{СтМ|1|Пролетарская|строящаяся=да}}
 }}
-{{#if: {{{подпись|}}} | <div style="font-size: 12px; color: #57606a; margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--border-color-base, #e1e4e8); text-align: center; line-height: 1.4;">🗺 {{{подпись}}}</div> }}
-</div>
-<!-- Блок легенды линий -->
+== Пример схемы <small>(векторное интерактивное изображение)</small> ==
-{{#if: {{{линии|}}} |
-<div class="ts-transport-lines-legend" style="margin: 10px auto; max-width: 950px; text-align: center; padding: 8px 12px; background: #f6f8fa; border: 1px solid #d0d7de; border-radius: 8px;">
+{{Схема транспортной системы
-<div style="font-size: 11px; font-weight: bold; color: #57606a; text-transform: uppercase; margin-bottom: 4px; letter-spacing: 0.5px;">Линии скоростного транспорта</div>
+|карта = {{#invoke:ТранспортнаяСхема|canvas|пример|прокрутка=да|ширина=850|высота=600}}
-<div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; align-items: center;">
+|подпись = Интерактивная схема линий
-{{{линии}}}
+|заголовок линий = Линии скоростного транспорта
-</div>
+|заголовок списка = 🚇 Станции скоростного транспорта по линиям
-</div>
+|линии =
+{{СтМ|1}}
+{{СтМ|2}}
+|список =
+* {{СтМ|1|линия|отображение=Линия 1}}
+** {{СтМ|1|Станция 1-1}}
+** {{СтМ|1|Станция 1-2}}
+** {{СтМ|1|Станция 1-3}}
+** {{СтМ|1|Станция 1-4}}
+* {{СтМ|2|линия|отображение=Линия 2}}
+** {{СтМ|2|Станция 2-1}}
+** {{СтМ|2|Станция 2-2}}
+** {{СтМ|2|Станция 2-3}}
+** {{СтМ|2|Станция 2-4}}
 }}
-<!-- Сворачиваемый реестр станций -->
+<div style="background: #ffffff; border: 1px solid #d0d7de; border-radius: 8px; padding: 18px 22px; margin-top: 24px; box-shadow: 0 1px 4px rgba(0,0,0,0.05);">
-{{#if: {{{список|{{{1|}}}}}} |
-<div class="mw-collapsible {{#ifeq: {{{свёрнут|}}} | да | mw-collapsed | }} toccolours ts-transport-list-card" style="margin: 12px auto 0 auto; max-width: 950px; text-align: left; box-sizing: border-box; background: var(--background-color-neutral-subtle, #f8f9fa); border: 1px solid var(--border-color-base, #d0d7de); border-radius: 8px; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,0.04); padding: 0;">
+== Руководство по интеграции схем ==
-<div style="font-weight: bold; font-size: 13.5px; color: var(--color-base, #1f2328); background: linear-gradient(180deg, #f6f8fa 0%, #eaeef2 100%); padding: 9px 14px; border-bottom: 1px solid var(--border-color-base, #d0d7de); display: flex; align-items: center; justify-content: space-between;">
-  <span>{{{заголовок списка|📋 Реестр станций метрополитена и железной дороги}}}</span>
+Шаблон поддерживает 2 способа вывода транспортных схем:
-</div>
-<div class="mw-collapsible-content" style="padding: 14px 18px; column-width: {{{ширина колонок|20em}}}; -webkit-column-width: {{{ширина колонок|20em}}}; -moz-column-width: {{{ширина колонок|20em}}}; column-gap: 2em; column-rule: 1px solid #e1e4e8; font-size: 13px; line-height: 1.7;">
+=== 1. Классический вариант (статический файл или реестр без схемы) ===
-{{{список|{{{1}}}}}}
+Использует загруженное изображение (.png, .jpg, .svg) или отображает только блок легенды и реестра станций (если параметр <code>|файл=</code> не указан):
-</div>
-</div>
+<pre>
+{{Схема транспортной системы
+|название         = Муроморский скоростной транспорт
+|файл             = Схема_Муроморского_метрополитена.png
+|ширина           = 850px
+|подпись          = Схема линий скоростного транспорта Муроморска
+|заголовок линий  = Линии скоростного транспорта
+|заголовок списка = 🚇 Станции скоростного транспорта по линиям
+|линии            =
+{{СтМ|1|линия}}
+{{СтМ|2|линия}}
+{{СтМ|D1|линия}}
+|список           =
+* {{СтМ|1|линия|отображение=Линия 1 (Невско-Заводская)}}
+** {{СтМ|1|Владимирский проспект|пересадка={{СтМ|D1|Северный вокзал|уточнение=нет}}}}
+** {{СтМ|1|Площадь Метростроителей|пересадка={{СтМ|2|Площадь Метростроителей}}}}
+* {{СтМ|2|линия|отображение=Линия 2 (Замуррецкая)}}
+** {{СтМ|2|Приморская|строящаяся=да}}
+** {{СтМ|2|ВДНиТ|пересадка={{СтМ|А60}} {{СтМ|А61}}}}
 }}
+</pre>
+=== 2. Автоматическая интерактивная векторная схема (SVG / JSON + Модуль:ТранспортнаяСхема) ===
+Полная генерация кликабельной интерактивной карты линий и станций на лету из структурированной базы данных без необходимости ручной нарезки зон:
+<pre>
+{{Схема транспортной системы
+|карта            =
-</div>
+{{#invoke:ТранспортнаяСхема|canvas|Муроморского|ширина=850|высота=620}}
-}}</includeonly><noinclude>
-== Использование через JSON-базу (Рекомендуемый способ) ==
+{{#invoke:ТранспортнаяСхема|canvas|Муроморского|ширина_блока=280|высота_блока=205}}
-Теперь вы можете использовать ваш привычный шаблон {{Схема транспортной системы}}, просто передав в него имя датасета:
-<syntaxhighlight lang="mediawiki">
+{{#invoke:ТранспортнаяСхема|canvas|Муроморского|кадрирование=310 240 300 220|ширина_блока=280|шапка=нет}}
-{{Схема транспортной системы|данные = Муроморского метрополитена}}
-</syntaxhighlight>
-При этом автоматически подтянутся координаты из Шаблон:Интерактивная схема Муроморского метрополитена/data.json, построится интерактивная карта, легенда и список станций.
+{{#invoke:ТранспортнаяСхема|canvas|Муроморского|фокус=420 310|ширина_фокуса=260|высота_фокуса=180|ширина_блока=260|шапка=нет}}
-Для вставки компактной схемы '''внутрь карточки статьи''' (например, Шаблон:Метрополитен), добавьте параметры карточки:
+|подпись          = Интерактивная векторная схема (кликните по станции для перехода к статье)
-<syntaxhighlight lang="mediawiki">
+|заголовок линий  = Линии Муроморского метрополитена
-{{Метрополитен
+|заголовок списка = 🚇 Станции Муроморского метрополитена по линиям
-|название = Муроморский метрополитен
+|линии            =
-|схема линий = {{Схема транспортной системы|данные=Муроморского метрополитена|карточка=да|ширина=280px}}
+{{СтМ|1|линия}}
+{{СтМ|2|линия}}
+|список           =
+* {{СтМ|1|линия|отображение=Линия 1 (Невско-Заводская)}}
+** {{СтМ|1|Владимирский проспект|пересадка={{СтМ|D1|Северный вокзал|уточнение=нет}}}}
+** {{СтМ|1|Театральная}}
 }}
-</syntaxhighlight>
+</pre>
+* Данные о координатах, цветах и пересадках берутся автоматически из страницы <code>[[Шаблон:Интерактивная схема Муроморского метрополитена/data.json]]</code>.
+* При изменении трассировок или добавлении станций в JSON-файле интерактивная карта перерисовывается автоматически.
+</div>
 [[Категория:Шаблоны:Транспорт]]
 </noinclude>