Вот пример сложного случая, на нем опишу все детали
line|z10-[highway=secondary]{
width: eval( zlinear(11, 1.3pt,2pt,2pt,2pt,max(3pt, metric(any(tag(lanes),2)*2)) ));
color: #EB8;
z-index: 2;
linecap: round;
}
line|z14-[highway=secondary]{
color: #FC9;
casing-color: #EB8;
casing-width: 1pt;
}
line|z10-[highway=secondary],
line значит, что нам нужна именно линия,
|z10- говорит что правило надо применять только на 10 уровне зума и ниже. Могло бы быть z5-10 т.е.5-10 зум или z-10, все что до 10-го зума включительно. Т.е. интервал с большей границей, с обеими или с меньшей границей.
[highway=secondary] - это фильтр по тэгу-значению. Их может быть несколько. Если значение тэга числовое, можно использовать мат. операции [highway=secondary][layer<0] для всех тоннелей, к примеру.
теперь разберемся с тем что внутри.
**width: eval( zlinear( 11, 1.3pt,2pt,2pt,2pt,max(3pt, metric(any(tag(lanes),2)*2)) ));**
самая страшная часть устанавливает ширину линии. до 11-го зума включительно ширина должна быть 1.3pt (поинты переводятся в пиксели с учетом плотности пикселей экрана устройства, на старом iPad - это 1.3 пикселя, на iPad 3 и позже это уже 2.6 пикслей и т.д.) и дальше ,2pt,2pt,2pt - это ширина для 12,13,14-го зума. Т.е. линия станет толще с 11 до 12 зума, потом будет постоянной толщины 12-13-14 и дальше max(3pt, metric(any(tag(lanes),2)*2)) будет увеличиваться пропорционально толщине дороги в метрах, причем с учетом числа полос. Выглядит страшно, но работает красиво.
color: #EB8; - короткая запись цвета #EEBB88, устанавливаем цвет дороги
z-index: 2; приоритет прорисовки линии. т.е. если будет линия, у которой z-index: 1, или z-index не будет указан и мы будем считать его равным 0, то такая линия будет рисоваться под нашей линией. Установление z-index полезно для перекрестков, чтобы крупная дорога закрашивала перекресток своим цветом.
linecap: round; в конце линии рисовать круглое закругление.
line|z14-[highway=secondary]{
color: #FC9;
casing-color: #EB8;
casing-width: 1pt;
}
дальше дорога становится чуть светлее, основной цвет заливки #FFCC99, а для обводки используем тот цвет, который использовали раньше #EEBB88 и устанавливаем обводке толщину 1 поинт.
Это что касается обычных дорог, теперь о пунктирах.
line|z15-[highway=footway],
line|z15-[highway=path],
line|z15-[highway=cycleway],
line|z15-[highway=bridleway]
{
width: eval( zlinear( 16,3pt,4pt ) );
dashes-width: eval( zlinear( 16, 1pt,2pt ) );
galileo-fast-draw:true;
dashes:4,4,4,4;
}
line|z15-[highway=path],
line|z15-[highway=bridleway] {
dashes-color: #FEFEFE;
}
line|z15-[highway=footway]
{
dashes-color: #bd9692;
}
line|z15-[highway=cycleway] {
dashes-color: #6876e1;
dashes:2,2,2,2;
}
В dashes мы задаем 4 числа, сумма которых должна быть равна степени двойки. 4, 8, 16, 32, любой. Цифры эти - это размер штришков в нашем пунктире. чем меньше число - тем короче штришок. Так пешеходная дорожка - это 4,4,4,4 а мелкие штришки ступенек - это 2,2,2,2. Штрих пунктир будет к примеру 6,4,2,4.
Для пунктира цвет задается отдельно, т.к. может быть мост с пешеходной дорожкой и там мы будем рисовать подложку, цветом заливки color, границы моста casing-color, и пунктир цветом dashes-color.
galileo-fast-draw:true; Говорит системе использовать быструю прорисовку на основе линий (GL_LINE), а не медленную, на основе треугольников (GL_TRIANGLE_STRIP).