Перейти к содержанию

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

Материал из MURS вики
← Предыдущая правка
отменитьTringoli (обсуждение | вклад)
Автомодерируемые
266 правок
ВизуальныйВики-текст
мНет описания правки
мНет описания правки
 
(не показано 8 промежуточных версий этого же участника)
Строка 1: Строка 1:
<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 }};">
<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 }};">


<!-- Графическая схема (отображается ТОЛЬКО если указан файл) -->
<!-- Графическая или интерактивная ImageMap схема -->
{{#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 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>
   <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> }}
   {{#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>
</div>
}}
}} }}


<!-- Единый блок: легенда линий + реестр станций -->
<!-- Единый блок: легенда линий + реестр станций -->
Строка 39: Строка 44:


</div></includeonly><noinclude>
</div></includeonly><noinclude>
== Пример схемы (статическое изображение) ==
 
== Пример схемы <small>(статическое изображение)</small> ==
{{Схема транспортной системы
{{Схема транспортной системы
|название = Скоростной транспорт Муроморска
|название = Скоростной транспорт Муроморска
Строка 49: Строка 55:
{{СтМ|1|линия}}
{{СтМ|1|линия}}
|список =  
|список =  
* '''[[Невско-Заводская линия]]'''
'''[[Невско-Заводская линия]]'''
** {{СтМ|1|Владимирский проспект|пересадка={{СтМ|D1|Северный вокзал}}}}
* {{СтМ|1|Владимирский проспект|пересадка={{СтМ|Св|Северный вокзал}}}}
** {{СтМ|1|Театральная}}
* {{СтМ|1|Театральная}}
** {{СтМ|1|Народная|ссылка=Народная (станция метро, Невско-Заводская линия)|пересадка={{СтМ|3|Народная|ссылка=Народная (станция метро, Павловская линия)}}}}
* {{СтМ|1|Народная|ссылка=Народная (станция метро, Невско-Заводская линия)|пересадка={{СтМ|2|Народная|ссылка=Народная (станция метро, Павловская линия)}}}}
** {{СтМ|1|Площадь Метростроителей|пересадка={{СтМ|2|Площадь Метростроителей}}}}
* {{СтМ|1|Площадь Метростроителей|пересадка={{СтМ|3|Площадь Метростроителей}}}}
** {{СтМ|1|Морской бульвар}}
* {{СтМ|1|Морской бульвар}}
** {{СтМ|1|Ауктува}}
* {{СтМ|1|Ауктува}}
** {{СтМ|1|Машиностроителей}}
* {{СтМ|1|Машиностроителей}}
** {{СтМ|1|Пролетарская|строящаяся=да}}
* {{СтМ|1|Пролетарская|строящаяся=да}}
}}
 
== Пример схемы <small>(векторное интерактивное изображение)</small> ==
 
{{Схема транспортной системы
|карта = {{#invoke:ТранспортнаяСхема|canvas|пример|прокрутка=да|ширина=850|высота=600}}
|подпись = Интерактивная схема линий
|заголовок линий = Линии скоростного транспорта
|заголовок списка = 🚇 Станции скоростного транспорта по линиям
|линии =
{{СтМ|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}}
}}
}}


Строка 64: Строка 94:
== Руководство по интеграции схем ==
== Руководство по интеграции схем ==


Шаблон поддерживает 3 способа вывода транспортных схем:
Шаблон поддерживает 2 способа вывода транспортных схем:
 
=== 1. Классический вариант (статический файл или реестр без схемы) ===
Использует загруженное изображение (.png, .jpg, .svg) или отображает только блок легенды и реестра станций (если параметр <code>|файл=</code> не указан):


=== 1. Статичный графический файл <small>(.png, .jpg, .svg)</small> ===
В параметр <code>|файл=</code> передаётся имя загруженного изображения:
<pre>
<pre>
{{Схема транспортной системы
{{Схема транспортной системы
|название = Муроморский скоростной транспорт
|название         = Муроморский скоростной транспорт
|файл     = Схема_Муроморского_метрополитена.png
|файл             = Схема_Муроморского_метрополитена.png
|ширина   = 850px
|ширина           = 850px
|подпись = Схема линий скоростного транспорта Муроморска
|подпись         = Схема линий скоростного транспорта Муроморска
|линии   =  
|заголовок линий  = Линии скоростного транспорта
{{Линия|1}}
|заголовок списка = 🚇 Станции скоростного транспорта по линиям
{{Линия|2}}
|линии           =  
{{Линия|3}}
{{СтМ|1|линия}}
{{Линия|4}}
{{СтМ|2|линия}}
{{Линия|D1}}
{{СтМ|D1|линия}}
{{Линия|D2}}
|список          =
|список  =  
* {{СтМ|1|линия|отображение=Линия 1 (Невско-Заводская)}}
* '''[[Марининский район (Муроморск)|Марининский район]]'''
** {{СтМ|1|Владимирский проспект|пересадка={{СтМ|D1|Северный вокзал|уточнение=нет}}}}
** {{СтМ|1|Владимирский проспект|пересадка={{СтМ|D1|Северный вокзал|уточнение=нет}}}}
** {{СтМ|3|Лесная}}
** {{СтМ|1|Площадь Метростроителей|пересадка={{СтМ|2|Площадь Метростроителей}}}}
 
* {{СтМ|2|линия|отображение=Линия 2 (Замуррецкая)}}
** {{СтМ|2|Приморская|строящаяся=да}}
** {{СтМ|2|ВДНиТ|пересадка={{СтМ|А60}} {{СтМ|А61}}}}
}}
}}
</pre>
</pre>
=== 2. Ручная интерактивная разметка <small>(ImageMap)</small> ===
 
Позволяет сделать кликабельными зоны на изображении с помощью тега <code>&lt;imagemap&gt;</code> в параметре <code>|карта=</code>:
=== 2. Автоматическая интерактивная векторная схема (SVG / JSON + Модуль:ТранспортнаяСхема) ===
Полная генерация кликабельной интерактивной карты линий и станций на лету из структурированной базы данных без необходимости ручной нарезки зон:
 
<pre>
<pre>
{{Схема транспортной системы
{{Схема транспортной системы
|название = Муроморский скоростной транспорт
|карта           =  
|карта   = <imagemap>
 
Файл:Схема_Муроморского_метрополитена.png|850px|center|alt=Схема скоростного транспорта
{{#invoke:ТранспортнаяСхема|canvas|Муроморского|ширина=850|высота=620}}
# Координаты станций: circle X Y Радиус [[Целевая_статья]]
 
circle 420 310 16 [[Площадь Метростроителей (станция метро)|Площадь Метростроителей]]
{{#invoke:ТранспортнаяСхема|canvas|Муроморского|ширина_блока=280|высота_блока=205}}
circle 510 240 16 [[Владимирский проспект (станция метро)|Владимирский проспект]]
 
circle 330 450 16 [[Машиностроителей (станция метро)|Машиностроителей]]
{{#invoke:ТранспортнаяСхема|canvas|Муроморского|кадрирование=310 240 300 220|ширина_блока=280|шапка=нет}}
# Зоны пересадок: rect X1 Y1 X2 Y2 [[Целевая_статья]]
rect 400 290 450 330 [[Площадь Метростроителей (станция метро)|Площадь Метростроителей]]
desc none
</imagemap>
|подпись  = Кликните по станции на схеме для перехода к статье
|линии    =  
{{Линия|1}}
{{Линия|2}}
{{Линия|D1}}
|список  =
* '''[[Центральный район (Муроморск)|Центральный район]]'''
** {{СтМ|1|Площадь Метростроителей|пересадка={{СтМ|2|Площадь Метростроителей}}}}
}}
</pre>


=== 3. Автоматическая интерактивная схема <small>(JSON + Модуль:ТранспортнаяСхема)</small> ===
{{#invoke:ТранспортнаяСхема|canvas|Муроморского|фокус=420 310|ширина_фокуса=260|высота_фокуса=180|ширина_блока=260|шапка=нет}}
Полная генерация кликабельной карты, легенды и реестра станций из структурированной базы данных.


Шаблон вызывает Lua-модуль через отдельную страницу <code>[[Модуль:ТранспортнаяСхема]]</code>:
|подпись          = Интерактивная векторная схема (кликните по станции для перехода к статье)
<pre>
|заголовок линий  = Линии Муроморского метрополитена
{{#invoke:ТранспортнаяСхема|render|Муроморского метрополитена}}
|заголовок списка = 🚇 Станции Муроморского метрополитена по линиям
|линии            =
{{СтМ|1|линия}}
{{СтМ|2|линия}}
|список          =
* {{СтМ|1|линия|отображение=Линия 1 (Невско-Заводская)}}
** {{СтМ|1|Владимирский проспект|пересадка={{СтМ|D1|Северный вокзал|уточнение=нет}}}}
** {{СтМ|1|Театральная}}
}}
</pre>
</pre>
* Данные берутся автоматически из подстраницы <code>[[Шаблон:Интерактивная схема Муроморского метрополитена/data.json]]</code>.
* Данные о координатах, цветах и пересадках берутся автоматически из страницы <code>[[Шаблон:Интерактивная схема Муроморского метрополитена/data.json]]</code>.
* При изменении названий или координат станций в JSON-файле интерактивная карта, легенда и список обновляются автоматически.
* При изменении трассировок или добавлении станций в JSON-файле интерактивная карта перерисовывается автоматически.


</div>
</div>

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


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

[править код]
Скоростной транспорт Муроморска
Скоростной транспорт Муроморска
🗺 Схема линий Муроморского метрополитена
Линии скоростного транспорта
     🚇 Станции Муроморского метрополитена

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

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

[править код]
M
Пример системы
Интерактивная схема линий
⌨ ⇄ ⇅ Скролл
🗺 Интерактивная схема линий
Линии скоростного транспорта

1 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|Театральная}}
}}
Источник — https://wiki.murs-mc.ru/w/index.php?title=Шаблон:Схема_транспортной_системы&oldid=2869