RU:MapCSS/0.2

From OpenStreetMap Wiki
Jump to navigation Jump to search
  • MapCSS/0.2
  • In other languages

Дата перевода 15.01.2026

MapCSS - это CSS-подобный язык для таблиц стилей карт.

На этой странице представлен второй вариант формата MapCSS. Смотрите MapCSS/0.1 для первого проекта, [[[Talk:MapCSS/0.2|страницe обсуждения]] и Предложения для предлагаемых улучшений. Существует список рассылки MapCSS.

Установите расширение VS Code, чтобы добавить визуальную подсветку для синтаксиса MapCSS и валидатора. Проверьте также BNF и грамматику antlr.

При вычислениях в MapCSS используется синтаксис оценки.


Структура языка

Таблица стилей MapCSS состоит из ряда правил, описывающих, как стилизовать элементы карты. Каждое правило состоит из двух частей:

  • один или несколько селекторов, используемых для определения того, к каким элементам карты применима инструкция;
  • одно или несколько объявлений, используемых для определения стиля, которын должны быть применены к соответствующим элементам.

Кроме того, можно добавлять комментарии, используя "//", чтобы закомментировать оставшуюся часть строки, или используя "/*" и "*/", чтобы закомментировать все, что находится между этими конечными точками.

broom icon

Эта страница предлагается для очистки. Пожалуйста посетите страницу страницу обсуждения.
Термин "селектор" на самом деле означает "правило", а "тест" - "селектор". Смотрите [1]. Пожалуйста, обновите все соответствующие страницы. Смотрите также Грамматика CSS2.1 и Кандидат на CSS3


Селекторы

Селекторы определяют, применимо ли правило к конкретному объекту или нет. Они могут проверять несколько параметров: тип объекта; уровень масштабирования при визуализации; теги, применяемые к объекту; псевдоклассы и классы, применяемые к объекту.


Типы

Типом селектора может быть любой из основных типов объектов OSM,

  • node
  • way
  • relation

плюс еще несколько интересных кейсов,

  • area (способ, при котором начальная и конечная точка являются одной и той же точкой, или был установлен area=yes)
  • line (способ, при котором начальная и конечная точка не являются одной и той же точкой, или был установлен area=no)
  • canvas (фон для визуализации)
  • * (любое из вышеперечисленных)


Тесты

Чтобы проверить, какие теги применяются к объекту, вы можете записать условие в квадратных скобках после типа объекта, в этих бинарных тестах может использоваться любой из этих операторов: =, !=, =~, >, <, >=, <=. 

way[highway=primary]     /* сопоставляется со всеми линиями с тегом highway' с установленным значением primary */
way[highway=~/.*ary/]    /* сопоставляется со всеми линиями с тегом highway, соответствующими регулярному выражению .*ary */

Обратите внимание, что используемые здесь строки должны начинаться с буквы или символа '-' и содержать только буквы, цифры и символы '-'. Если вам нужно использовать имя тега или значение, содержащее какие-либо другие символы, строка должна быть заключена в кавычки: 

way[highway="~/.*ary/"] /* сопоставляется со всеми линиями с тегом highway с установленным значениеь ~/.*ary/ (не является регулярным выражением). */
way[highway='a"b']      /* сопоставляется со всеми линиями с тегом highway с установленным значением a"b */
way[highway="a\"b"]     /* сопоставляется со всеми линиями с тегом highway с установленным значением a"b */

Вы также можете использовать унарные тесты, чтобы узнать, установлен тег или нет: 

way[highway]       /* сопоставляется со всеми линиями с установленным тегом highway */
way[!highway]      /* сопоставляется со всеми линиями, для которых не установлен тег highway (или установлено значение no/false). */
way.highway        /* сопоставляется со всеми линиями с установленным классом тега highway */

Чтобы протестировать более одного условия для пути, просто добавьте дополнительные условия после типа. Для соответствия этому правилу должны быть выполнены все условия. 

node[place=city][population<50000]    /* сопоставляется со всеми точками, помеченными тегом place=city, значение тега population которых меньше 50000 */
node[place=city][population>=50000]   /* сопоставляется со всеми точками, помеченными тегом place=city, значение тега population которых больше или равно 50000 */

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

way|z12[population<50000]    /* сопоставляется со всеми линиями, у которых тег population имеет значение менее 50000, при условии, что средство визуализации в данный момент работает с уровнем масштабирования 12 */
way|z1-11[population>50000]  /* сопоставляется со всеми линиями, у которых тег population имеет значение менее 50000, при условии, что средство визуализации в данный момент работает с любым уровнем масштабирования между 1 и 11 */

Теоретически это можно было бы расширить, чтобы использовать другие единицы измерения, например, way|s50000 для печатной карты формата 1:50000.


Комбинирование селекторов

Вы можете создать условие ИЛИ, сгруппировав селекторы через запятую: 

way[highway=primary], way[highway=trunk]  /* сопоставляется со всеми линиями с тегом highway, установленной в значение primary или trunk */

Группируя селекторы без запятой между ними, вы создаете селектор-потомок. Это соответствует последнему селектору, если и только если объект найден как часть другого объекта, соответствующего первому селектору: 

way[highway=footpath] node[barrier=gate]  /* сопоставляется с точкой с установленным barrier=gate, которые находятся на линиях с установленным highway=footpath */
relation[type=route] way[highway]         /* сопоставляется с линиями с установленным тегом highway, которые находятся в отношении с установленным type=route */

При подобном объединении селекторов к элементам добавляются псевдотеги, позволяющие получить доступ к дополнительным данным. Здесь псевдотег role добавляется к объекту way, чтобы указать его роль в родительском отношении: 

relation[type=route] way[role=proposed]   /* сопоставляет линии внутри отношения с установленным type=route, с тегом role с установленным  значением proposed */

(это пока не поддерживается Halcyon и Overpass Tubo. Также предлагается другой синтаксис, использующий дочерние селекторы ">" между элементом relation и дочерним элементом child, без добавления какого-либо псевдотега в дочерний элемент)


Синтаксические примечания

Пробелы в селекторах имеют большое значение

Вы можете быть снисходительны к тому, как мы относимся к пробелам. Количество пробелов не имеет значения (1 пробел по сравнению с тремя символами табуляции, CR и пробелом), но наличие или отсутствие пробелов в селекторах имеет значение. Это означает, что мы можем, например, записать приведенный выше селектор следующим образом: 

relation[type=route]
 way[highway]

Но если бы мы написали его так (с пробелом между типом объекта и тестами), он бы не разобрался: 

relation [type=route]
  way [highway]


Поддержка различных библиотек для вышеприведенных селекторов

Selector-Part Пример JOSM pgm
Type node, way, relation, area, line, canvas, * +[1] +
Tag match way[highway=primary] + +
Tag match (quoted) way["highway"="primary"] + +
Tag regexp match way[highway=~/.ary/] + +
Tag is set? way[highway] + +
Tag is not set? way[!highway] + +
Class is set? way.highway + +
Numeric comparision node[population<50000] + +
Zoom selector node|z12- + +
Link selector, relation members relation member + [2] +
Link selector, way nodes way node + [2] +
Comment block style /* ... */ + +
Comment inline style // ... - +
  1. ↑ все, кроме line
  2. ↑ 2.0 2.1 начиная с r7166


Декларация

Декларации записываются путем заключения набора спецификаторов стиля в фигурные скобки: 

{
   opacity: 0.5;
   color: rgb(1.0, 0.0, 0.0);
}

Смотрите раздел #Vocabulary для получения списка всех доступных спецификаторов и того, какие средства визуализации их поддерживают.

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

{ set tag=value; }   /* установить для tag */
{ set tag; }         /* установить для tag значение yes */

Наконец, вы можете вычислить значения, используя инструкцию eval: 

{ opacity: eval("tag('population')/100000"); }
{ set width_in_metres=eval("tag('lanes')*3"); }


Классы

Вы можете установить теги, начинающиеся с полной точки, для имитации классов: 

{ set .minor_road; }

Затем вы можете использовать тест .minor_road (как указано выше) в селекторе: 

way.minor_road

Это открывает новые возможности при использовании правила @import и типа носителя. У вас может быть набор правил для каждого носителя (например, непосредственно из базы данных OSM или из продукта osm2pgsql), каждое из которых устанавливает псевдоклассы. Затем к этим стилям применяется основная таблица стилей: 

 @import url("osmtags.css") osmtags;
 @import url("osmpostgis.css") osmpostgis;

(Правило @import еще не поддерживается Halcyon.)


Псевдоклассы

Интерактивные клиенты могут поддерживать псевдоклассы :hover и :active.


Поддержка различных библиотек для различных деклараций

Описание Примеры JOSM pgm
Назначить свойство opacity: 0.5; + +
Установить tag в значение value set tag=value; - +
Установить tag в значение yes set tag; -[1] +
Назначить вычисление width: eval(2*3) + +
Установить класс set .class; + +
Объявить @import @import url("tags.css"); - +
Псевдокласс из объявленого @import @import url("tags.css") osmtags; - -
Псевдокласс :hover way:hover - -
Псевдокласс :active way:active - -
  1. ↑ устанавливает не tag, а класс вместо него


Лексика

Будут использоваться следующие сокращения:


Свойства холста

Описание Пример Halcyon Kothic Ceyx OSPad alaCarte JOSM pgm
antialiasing Как отобразить сглаживание: full (по умолчанию), text (линии не ровные, текст есть), none (сглаживание не выполняется) - - +* - - - -
fill-color Цвет холста - либо 3-значное, либо 6-значное шестнадцатеричное значение, либо название цвета CSS, либо спецификатор цвета RGB. fill-color: lightgreen
fill-color: #8F8
fill-color: #88FF88
fill-color: rgb(0.53, 1, 0.53) 		- + + + + + [1] +
Цвет холста с помощью альфа-компонента - 8-значного шестнадцатеричного значения или спецификатора цвета RGBA (уровень CSS 3)
(альфа-компонент обычно сочетается с атрибутом прозрачности, если поддерживается одновременно). 		fill-color: #88FF8880
fill-color: rgba(0.53, 1, 0.53, 0.5) 		? ? ? ? + ? +
fill-opacity Степень прозрачности заливки: от 0 (прозрачная) до 1 (непрозрачная) fill-opacity: 0.2 - + + + - [2] - - [3]
fill-image URL-адрес (абсолютный или относительный) изображения, которым нужно заполнить холст fill-image: url('fills/grass.png') - - + + + - +
  1. ↑ начиная с версии 7110, ранее называелся background-color
  2. ↑ Но непрозрачность поддерживается как альфа-компонент соответствующего атрибута цвета (например, fill-color: #FF000080" подразумевает fill-opacity: 0.5)
  3. ↑ Вместо этого вы можете установить альфа-канал для fill-color например, fill-color: #FF000080"


Свойства линии

Описание Пример Halcyon Kothic Ceyx OSPad alaCarte JOSM pgm
z-index Определяет подуровень в слое OSM +[1] + + + + + +
width Ширина линии в пикселях width: 5 + + + + + + +
color Цвет линии - 3-значное или 6-значное шестнадцатеричное значение, название цвета CSS или спецификатор цвета RGB color: blue
color: #00F
color: #0000FF
color: rgb(0.0, 0.0, 1.0) 		+ + + + + + +
Цвет линии с альфа-компонентом - 8-значное шестнадцатеричное значение или спецификатор цвета RGBA (уровень CSS 3)
(альфа-компонент обычно сочетается с атрибутом прозрачности, если поддерживается одновременно) 		color: #0000FF80
color: rgba(0.0, 0.0, 1.0, 0.5) 		? ? ? ? + ? ?
opacity Насколько прозрачна линия, от 0 (прозрачная) до 1 (непрозрачная) opacity: 0.5 + + + + - [2] + +
dashes Массив чередующихся длин включения/выключения dashes: 2,2,4,2 + + + + + + +
image URL-адрес изображения, которое будет использоваться для заполнения линии - + - + + - +
linecap Стиль для конца строки: none (по умолчанию), round или square + + + + + + +
linejoin Стиль для углов линий: round (по умолчанию), miter или bevel + + + + + + +
fill-color Цвет, которым заполняется область, если она замкнута - шестнадцатеричное значение или цвет CSS fill-color: lightgreen + + + + + + +
fill-opacity Степень прозрачности заливки: от 0 (прозрачная) до 1 (непрозрачная) fill-opacity: 0.2 + + + + - [2] + +
fill-image URL-адрес (абсолютный или относительный) изображения, которым нужно заполнить область fill-image: url('fills/grass.png') + + + + + + +
casing-width Ширина обрамления (границы) линии. Например, обрамление шириной 1 пиксель с каждой стороны будет указано как casing-width:1 (изменение по сравнению с MapCSS 0.1) casing-width: 3 - + + + + + +
casing-color Цвет (шестнадцатеричное или название CSS) корпуса + + + + + + +
casing-opacity Прозрачность корпуса + + + + - [2] + +
casing-dashes Массив чередующихся длин включения/выключения + + + + + + +
casing-linecap Стиль для конца линии корпуса (по умолчанию используется значение linecap) - + + + + + +
casing-linejoin Стиль углов линии корпуса (по умолчанию используется значение linejoin) - + + + + + +
extrude Высота выдавливаемой линии extrude: eval('zmetric(tag("height"))') - + - - - - -
extrude-edge-color Цвет рёбер трёхмерного объекта (по умолчанию используется значение color) - + - - - - -
extrude-edge-opacity Непрозрачность выдавливаемых рёбер (по умолчанию используется значение opacity) - + - - - - -
extrude-face-color Цвет выдавленных рёбер (по умолчанию используется значение fill-color) - + - - - - -
extrude-face-opacity Насколько прозрачны выдавливаемые рёбра (по умолчанию используется значение fill-opacity) - + - - - - -
  1. ↑ Halcyon поддерживает значения от 0 до 10
  2. ↑ 2.0 2.1 2.2 Но непрозрачность поддерживается как альфа-компонент соответствующего атрибута цвета (например, fill-color: #FF000080" подразумевает fill-opacity: 0.5)


Свойства точки/значка

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

Описание Пример Halcyon Kothic Ceyx OSPad alaCarte JOSM pgm
icon-image URL-адрес (абсолютный или относительный) изображения, которое будет использоваться в качестве значка icon-image: url('icons/pharmacy.png') + - +* + + +[1] +
icon-width Указывается либо единица измерения, либо коэффициент масштабирования в %. Если задано только одно из значений icon-width и icon-height, масштабирование с сохранением соотношения сторон применяется в обоих направлениях icon-width: 25, icon-width: 70% - - - + + +[2] -
icon-height Указывается либо единица измерения, либо коэффициент масштабирования в %. Если задано только одно из значений icon-width и icon-height, масштабирование с сохранением соотношения сторон применяется в обоих направлениях icon-height: 25; icon-height: 70% - - - + + +[2] -
icon-opacity Непрозрачность изображения значка icon-opacity: 0.3 - - - + + + +
  1. ↑ синтаксис немного отличается от показанного здесь, смотрите JOSM/Help/Styles/Images
  2. ↑ 2.0 2.1 только абсолютное количество пикселей, без процента


Свойства надписи

Описание Пример Halcyon Kothic Ceyx OSPad alaCarte JOSM pgm
font-family Название используемого шрифта font-family: DejaVu + - + + + + +[1]
font-size Размер текста (целое число) font-size: 12 + + + + + + +
font-weight bold или normal font-weight: bold + - + + + + +
font-style italic или normal font-style: italic + - + + + + +
font-variant normal (по умолчанию) или small-caps (новое в MapCSS 0.2) font-style: small-caps - - +* - - - -
text-decoration none или underline text-decoration: underline + - + + - - -
text-transform none, uppercase, lowercase или capitalize text-transform: uppercase + - + + - - +
text-color Шестнадцатеричное значение или название цвета в CSS text-color: #07CF20 + + + + + + +
text-opacity Степень прозрачности текста - от 0 (прозрачный) до 1 (непрозрачный) text-opacity: 0.75 - - - + - [2] + +
text-position Следует ли текст по контуру пути (line) или располагается по центру области (center) text-position: center + + - + + + +
text-offset Смещение по вертикали от центра линии или точки. Смещение на 5 для линии шириной 3 означает, что текст будет располагаться "вдоль" линии, а не внутри нее. Аналогично, смещение на 8 в точке со значком высотой 16 пикселей приведет к размещению текста под значком text-offset: -5 + - + + + + +
max-width Максимальная ширина текстовой надписи для точки, после которой она должна переходить на следующую строку max-width: 30 + - +* + - - +
text Ключ тега, значение которого используется для надписи. Например, text: name будет отображать тег с именем text: name + + + + + + +
text-halo-color Цвет (шестнадцатеричный или CSS) ореола (halo) или выдвижения (pull-out), используемого для выделения текста на фоне объектов под ним text-halo-color: white + + + + + + +
text-halo-radius Радиус ореола text-halo-radius: 2 + + + + + + +
  1. ↑ Список поддерживаемых шрифтов жестко задан
  2. ↑ Но непрозрачность поддерживается как альфа-компонент соответствующего атрибута цвета (например, fill-color: #FF000080" подразумевает fill-opacity: 0.5)


Свойства обрамления

definition example Halcyon Kothic Ceyx alaCarte JOSM pgm
shield-color Цвет обрамления - либо шестнадцатеричное значение, либо название цвета в CSS shield-color: blue
shield-color: #0000FF 		- - - + - -
shield-opacity Степень прозрачности обрамления - от 0 (прозрачный) до 1 (непрозрачный) shield-opacity: 0.5 - - - + - +
shield-frame-color Цвет рамки обрамления - - - + - -
shield-frame-width Ширина рамки. Если значение равно 0, рамка не отображается - - - + - -
shield-casing-color Цвет корпуса экранирования - - - + - -
shield-casing-width Ширина корпуса обрамления - - - + - -
shield-text Текст для отображения на экране - - - + - +
shield-image URL-адрес (абсолютный или относительный) изображения, которое будет использоваться в качестве фона для текста. fill-image: url('fills/grass.png') - - - + - +
shield-shape Форма обрамления. Может быть rounded или rectangular - - - + - -



Применение стилей

Объекты визуализации

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

relation[type=route] way[highway] { color: red; }

Но не этот стиль: 

relation[type=route] { color: red; }

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


Порядок визуализации

Объекты должны отображаться в следующем порядке (спереди назад):

  1. объекты нижнего слоя всегда должны отображаться первыми;
  2. внутри слоя сначала визуализируются все заливки, затем все контуры, затем все обводки, затем все значки и надписи;
  3. внутри каждой из этих категорий объекты упорядочены в соответствии с z-индексом;
  4. если все вышеперечисленное равно, то порядок не определен.


Поддержка различных библиотек для изменения порядка визуализации

Описание JOSM pgm
Использовать слой объектов для упорядочения визуализации - +
Внутри слоя визуализируются заливки, затем контуры, затем обводки, затем значки и надписи + +[1]
  1. ↑ pgmapcss игнорирует слой для значков и надписей и отображает их поверх всего остального


Порядок приложений

Таблица стилей описывает, как определить стиль для любой заданной точки или линии. Чтобы определить стиль, вы должны пошагово ознакомиться с правилами, чтобы определить, применимы ли они к какой-либо заданной линии или точке. Если более позднее правило предоставляет стиль, противоречащий предыдущему, более поздний стиль перезаписывает старый. Обратите внимание, что это означает, что недопустимо обрабатывать селекторы-потомки во время сопоставления родительского элемента, так как это может привести к созданию неправильного стиля, как показано ниже:

Возьмем, к примеру, следующую таблицу стилей: 

node
{
  width: 2;
  color: blue;
}

way node
{
  width: 2;
  color: red;
}

Применяется к следующим объектам (большинство деталей опущено для краткости): 

<way id="1">
  <nd id="2" />
</way>
<node id="2" />

Правильный стиль здесь заключается в том, чтобы линия не отображалась, а точка отображалась в виде красной точки шириной 2 пикселя. Если бы мы обрабатывали селекторы-потомки в то время, когда родительский селектор соответствовал бы родительскому, мы бы вместо этого обработали линию и добавили бы к точке стиль красной точки шириной 2 пикселя, затем обработали бы точку и неправильно заменили красный на синий.

Retrieved from "https://wiki.openstreetmap.org/w/index.php?title=RU:MapCSS/0.2&oldid=2943384"