ol/style/flat

Векторные слои можно стилизовать с помощью литерала объекта, содержащего свойства для стилей обводки, заливки, изображений и текста. Типы ниже можно объединить в один объект. Например, стиль с обоими свойствами — обводки и заливки — может выглядеть так:

const style = {
  'stroke-color': 'yellow',
  'stroke-width': 1.5,
  'fill-color': 'orange',
};

Подробнее о доступных свойствах в зависимости от типа применяемого символа: Stroke — свойства для применения обводки к линиям и полигонам Fill — свойства для заливки полигонов Text — свойства для подписей точек, линий и полигонов Icon — свойства для отображения точек с помощью значка Circle — свойства для отображения точек в виде круга Shape — свойства для отображения точек с помощью правильной фигуры

Для условного применения стилей на основе фильтра можно использовать список rules. Например, чтобы отображать точки большим оранжевым кругом, если численность населения превышает 1 миллион, и маленьким синим кругом в противном случае:

const rules = [
  {
    filter: ['>', ['get', 'population'], 1_000_000],
    style: {
      'circle-radius': 10,
      'circle-fill-color': 'red',
    }
  },
  {
    else: true,
    style: {
      'circle-radius': 5,
      'circle-fill-color': 'blue',
    },
  },
];

Определения типов

BooleanExpression{boolean} {Array}

Логическое значение-литерал (например, true) или выражение, результатом которого является логическое значение (например, ['>', ['get', 'population'], 1_000_000]).

ColorExpression{Color} {string} {Array}

Именованный цвет CSS (например, 'blue'), массив из 3 значений RGB (например, [0, 255, 0]), массив из 4 значений RGBA (например, [0, 255, 0, 0.5]) или выражение, результатом которого является один из этих типов цвета (например, ['get', 'color']).

DefaultStyle{Object}

Эти свойства стиля по умолчанию применяются, если не задан другой стиль.

Свойства:

Имя	Тип	Описание
`fill-color`	string	`'rgba(255,255,255,0.4)'`
`stroke-color`	string	`'#3399CC'`
`stroke-width`	number	`1.25`
`circle-radius`	number	`5`
`circle-fill-color`	string	`'rgba(255,255,255,0.4)'`
`circle-stroke-width`	number	`1.25`
`circle-stroke-color`	string	`'#3399CC'`

FlatCircle{Object}

Свойства стиля круга для отображения точечных объектов. Необходимо указать как минимум circle-radius.

Свойства:

Имя	Тип	Описание
`circle-radius`	NumberExpression \| undefined	Радиус круга.
`circle-fill-color`	ColorExpression \| undefined	Цвет заливки. `'none'` означает отсутствие заливки и проверки попадания.
`circle-stroke-color`	ColorExpression \| undefined	Цвет обводки.
`circle-stroke-width`	NumberExpression \| undefined	Толщина обводки в пикселях.
`circle-stroke-line-cap`	StringExpression (по умолчанию 'round')	Стиль окончания линии: `butt`, `round` или `square`. (Только Canvas)
`circle-stroke-line-join`	StringExpression (по умолчанию 'round')	Стиль соединения линий: `bevel`, `round` или `miter`. (Только Canvas)
`circle-stroke-line-dash`	NumberArrayExpression \| undefined	Шаблон штриховой линии. (Только Canvas)
`circle-stroke-line-dash-offset`	NumberExpression (по умолчанию 0)	Смещение штриховой линии. (Только Canvas)
`circle-stroke-miter-limit`	NumberExpression (по умолчанию 10)	Предел среза. (Только Canvas)
`circle-displacement`	NumberArrayExpression (по умолчанию [0,0])	Смещение
`circle-scale`	SizeExpression (по умолчанию 1)	Масштаб. Двумерное масштабирование создаст эллипс. Если двумерное масштабирование не требуется, лучшего результата можно добиться, задав подходящее значение для `circle-radius`.
`circle-opacity`	NumberExpression \| undefined	Непрозрачность круга. (Только WebGL)
`circle-rotation`	NumberExpression (по умолчанию 0)	Угол поворота в радианах (положительное значение соответствует повороту по часовой стрелке; имеет смысл только при использовании вместе с двумерным масштабированием).
`circle-rotate-with-view`	BooleanExpression (по умолчанию false)	Определяет, следует ли поворачивать фигуру вместе с видом (выражения поддерживаются только в Canvas; имеет смысл только при использовании вместе с двумерным масштабированием).
`circle-declutter-mode`	DeclutterMode \| undefined	Режим предотвращения наложения (только Canvas)
`z-index`	NumberExpression \| undefined	Значение zIndex стиля. (Только Canvas)

FlatFill{Object}

Свойства стиля заливки, применяемые к полигональным объектам.

Свойства:

Имя	Тип	Описание
`fill-color`	ColorExpression \| undefined	Цвет заливки. `'none'` означает отсутствие заливки и проверки попадания (применяется только к Canvas).
`fill-pattern-src`	StringExpression \| undefined	URI источника изображения для шаблона заливки. Если также задано `fill-color`, оно будет использоваться для тонирования изображения. (Выражения доступны только в Canvas)
`fill-pattern-size`	SizeExpression \| undefined	Размер изображения шаблона заливки в пикселях. Можно использовать вместе с `fill-pattern-offset`, чтобы задать подпрямоугольник спрайт-листа изображения шаблона заливки.
`fill-pattern-offset`	SizeExpression (по умолчанию [0, 0])	Смещение, которое вместе с размером и началом координат смещения определяет подпрямоугольник исходного изображения шаблона заливки.
`fill-pattern-offset-origin`	IconOrigin (по умолчанию 'top-left')	Начало координат смещения: `bottom-left`, `bottom-right`, `top-left` или `top-right`. (Только WebGL)

FlatIcon{Object}

Свойства стиля значка, применяемые к точечным объектам. Чтобы отображать точки в виде значка, необходимо указать icon-src.

Свойства:

Имя	Тип	Описание
`icon-src`	string \| undefined	URI источника изображения.
`icon-anchor`	NumberArrayExpression (по умолчанию [0.5, 0.5])	Якорь. По умолчанию используется центр значка.
`icon-anchor-origin`	IconOrigin (по умолчанию 'top-left')	Начало координат якоря: `bottom-left`, `bottom-right`, `top-left` или `top-right`.
`icon-anchor-x-units`	IconAnchorUnits (по умолчанию 'fraction')	Единицы измерения, в которых задано значение x якоря. Значение `'fraction'` означает, что значение x является долей размера значка. Значение `'pixels'` означает, что значение x указано в пикселях.
`icon-anchor-y-units`	IconAnchorUnits (по умолчанию 'fraction')	Единицы измерения, в которых задано значение y якоря. Значение `'fraction'` означает, что значение y является долей размера значка. Значение `'pixels'` означает, что значение y указано в пикселях.
`icon-color`	ColorExpression \| undefined	Цвет тонирования значка. Если не задан, значок останется без изменений.
`icon-cross-origin`	null \| string \| undefined	Атрибут `crossOrigin` для загруженных изображений. Обратите внимание: чтобы получить доступ к данным пикселей с помощью средства визуализации Canvas, необходимо указать значение `icon-cross-origin`. Подробнее см. https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image.
`icon-offset`	SizeExpression (по умолчанию [0, 0])	Смещение, которое вместе с размером и началом координат смещения определяет подпрямоугольник исходного изображения значка.
`icon-displacement`	NumberArrayExpression (по умолчанию [0,0])	Смещение значка.
`icon-offset-origin`	IconOrigin (по умолчанию 'top-left')	Начало координат смещения: `bottom-left`, `bottom-right`, `top-left` или `top-right`.
`icon-opacity`	NumberExpression (по умолчанию 1)	Непрозрачность значка.
`icon-scale`	SizeExpression (по умолчанию 1)	Масштаб.
`icon-width`	NumberExpression \| undefined	Ширина значка. Если не задана, используется фактическая ширина изображения. Нельзя сочетать с `scale`. (Выражения доступны только в WebGL)
`icon-height`	NumberExpression \| undefined	Высота значка. Если не задана, используется фактическая высота изображения. Нельзя сочетать с `scale`. (Выражения доступны только в WebGL)
`icon-rotation`	NumberExpression (по умолчанию 0)	Угол поворота в радианах (положительное значение соответствует повороту по часовой стрелке).
`icon-rotate-with-view`	BooleanExpression (по умолчанию false)	Определяет, следует ли поворачивать значок вместе с видом. (Выражения поддерживаются только в Canvas)
`icon-size`	SizeExpression \| undefined	Размер значка в пикселях. Можно использовать вместе с `icon-offset`, чтобы задать подпрямоугольник исходного изображения значка (спрайта). (Выражения доступны только в WebGL)
`icon-declutter-mode`	DeclutterMode \| undefined	Режим предотвращения наложения (только Canvas)
`z-index`	NumberExpression \| undefined	Значение zIndex стиля. (Только Canvas)

FlatShape{Object}

Свойства стиля правильной фигуры для отображения точечных объектов. Необходимо указать как минимум shape-points.

Свойства:

Имя	Тип	Описание
`shape-points`	NumberExpression \| undefined	Количество вершин звёзд и правильных многоугольников. Для многоугольника количество вершин равно количеству сторон. (Выражения доступны только в WebGL)
`shape-fill-color`	ColorExpression \| undefined	Цвет заливки. `'none'` означает отсутствие заливки и проверки попадания.
`shape-stroke-color`	ColorExpression \| undefined	Цвет обводки.
`shape-stroke-width`	NumberExpression \| undefined	Толщина обводки в пикселях.
`shape-stroke-line-cap`	StringExpression (по умолчанию 'round')	Стиль окончания линии: `butt`, `round` или `square`. (Только Canvas)
`shape-stroke-line-join`	StringExpression (по умолчанию 'round')	Стиль соединения линий: `bevel`, `round` или `miter`. (Только Canvas)
`shape-stroke-line-dash`	NumberArrayExpression \| undefined	Шаблон штриховой линии. (Только Canvas)
`shape-stroke-line-dash-offset`	NumberExpression (по умолчанию 0)	Смещение штриховой линии. (Только Canvas)
`shape-stroke-miter-limit`	NumberExpression (по умолчанию 10)	Предел среза. (Только Canvas)
`shape-radius`	NumberExpression \| undefined	Радиус правильного многоугольника. (Выражения доступны только в WebGL)
`shape-radius2`	NumberExpression \| undefined	Второй радиус, позволяющий создать звезду вместо правильного многоугольника. (Выражения доступны только в WebGL)
`shape-angle`	NumberExpression (по умолчанию 0)	Угол фигуры в радианах. При значении 0 одна из вершин фигуры будет направлена вверх. (Выражения доступны только в WebGL)
`shape-displacement`	NumberArrayExpression (по умолчанию [0,0])	Смещение фигуры
`shape-opacity`	NumberExpression \| undefined	Непрозрачность фигуры. (Только WebGL)
`shape-rotation`	NumberExpression (по умолчанию 0)	Угол поворота в радианах (положительное значение соответствует повороту по часовой стрелке).
`shape-rotate-with-view`	BooleanExpression (по умолчанию false)	Определяет, следует ли поворачивать фигуру вместе с видом. (Выражения поддерживаются только в Canvas)
`shape-scale`	SizeExpression (по умолчанию 1)	Масштаб. Если двумерное масштабирование не требуется, лучшего результата можно добиться, задав подходящие значения для `shape-radius` и `shape-radius2`.
`shape-declutter-mode`	DeclutterMode \| undefined	Режим предотвращения наложения. (Только Canvas)
`z-index`	NumberExpression \| undefined	Значение zIndex стиля. (Только Canvas)

FlatStroke{Object}

Свойства стиля обводки, применяемые к линейным объектам и границам полигонов. Для применения обводки необходимо указать как минимум один из параметров stroke-color или stroke-width.

Свойства:

Имя	Тип	Описание
`stroke-color`	ColorExpression \| undefined	Цвет обводки.
`stroke-width`	NumberExpression \| undefined	Толщина обводки в пикселях.
`stroke-line-cap`	StringExpression (по умолчанию 'round')	Стиль окончания линии: `butt`, `round` или `square`.
`stroke-line-join`	StringExpression (по умолчанию 'round')	Стиль соединения линий: `bevel`, `round` или `miter`.
`stroke-line-dash`	NumberArrayExpression \| undefined	Шаблон штриховой линии.
`stroke-line-dash-offset`	NumberExpression (по умолчанию 0)	Смещение штриховой линии.
`stroke-miter-limit`	NumberExpression (по умолчанию 10)	Предел среза.
`stroke-offset`	NumberExpression \| undefined	Смещение обводки в пикселях вдоль нормали. Положительное значение смещает линию вправо относительно направления линии.
`stroke-pattern-src`	string \| undefined	URI источника изображения для шаблона обводки. Если также задано `stroke-color`, оно будет использоваться для тонирования изображения. (Только WebGL)
`stroke-pattern-offset`	SizeExpression (по умолчанию [0, 0])	Смещение, которое вместе с размером и началом координат смещения определяет подпрямоугольник исходного изображения шаблона обводки. (Только WebGL)
`stroke-pattern-offset-origin`	IconOrigin (по умолчанию 'top-left')	Начало координат смещения: `bottom-left`, `bottom-right`, `top-left` или `top-right`. (Только WebGL)
`stroke-pattern-size`	SizeExpression \| undefined	Размер изображения шаблона обводки в пикселях. Можно использовать вместе с `stroke-pattern-offset`, чтобы задать подпрямоугольник исходного изображения шаблона заливки (спрайта). (Только WebGL)
`stroke-pattern-spacing`	NumberExpression \| undefined	Расстояние между повторениями шаблона в пикселях; если значение не задано, используется 0. (Только WebGL)
`stroke-pattern-start-offset`	NumberExpression \| undefined	Смещение шаблона обводки в пикселях в начале линии. (Только WebGL)
`z-index`	NumberExpression \| undefined	Значение zIndex стиля.

FlatStyle{FlatFill} {FlatStroke} {FlatText} {FlatIcon} {FlatShape} {FlatCircle}

Для статической стилизации метод layer.setStyle() можно вызвать с объектом-литералом, содержащим свойства заливки, обводки, текста, значка, правильной фигуры и/или круга.

FlatStyleLike{FlatStyle} {Array<FlatStyle>} {Array<Rule>}

Литерал плоского стиля или массив таких литералов.

FlatText{Object}

Свойства стиля подписей, применяемые ко всем объектам. Как минимум, необходимо указать text-value. Примечание: стилизация текста в слоях WebGL в настоящее время не поддерживается

Свойства:

Имя	Тип	Описание
`text-value`	StringExpression \| undefined	Содержимое текста (с `\n` для переноса строк).
`text-font`	StringExpression (по умолчанию '10px sans-serif')	Стиль шрифта в виде значения CSS-свойства `font`.
`text-max-angle`	NumberExpression (по умолчанию Math.PI/4)	Если для `text-placement` задано значение `'line'`, задаёт максимальный угол между соседними символами. Значение указывается в радианах, значение по умолчанию — 45° (`Math.PI / 4`).
`text-offset-x`	NumberExpression (по умолчанию 0)	Горизонтальное смещение текста в пикселях. Положительное значение сдвигает текст вправо.
`text-offset-y`	NumberExpression (по умолчанию 0)	Вертикальное смещение текста в пикселях. Положительное значение сдвигает текст вниз.
`text-overflow`	BooleanExpression (по умолчанию false)	Для подписей полигонов или если для `placement` задано значение `'line'`, разрешает тексту выходить за пределы ширины полигона в месте размещения подписи или длины пути, вдоль которого он расположен.
`text-placement`	StringExpression (по умолчанию 'point')	Размещение текста.
`text-repeat`	NumberExpression \| undefined	Интервал повторения в пикселях. Если задан, текст будет повторяться с этим интервалом. Доступно только если для `text-placement` задано значение `'line'`. Переопределяет `text-align`.
`text-scale`	SizeExpression \| undefined	Масштаб.
`text-rotate-with-view`	BooleanExpression (по умолчанию false)	Следует ли поворачивать текст вместе с видом карты.
`text-rotation`	NumberExpression (по умолчанию 0)	Угол поворота в радианах (положительное значение соответствует повороту по часовой стрелке).
`text-align`	StringExpression \| undefined	Выравнивание текста. Возможные значения: `'left'`, `'right'`, `'center'`, `'end'` или `'start'`. Для `'text-placement': 'point'` значение по умолчанию — `'center'`. Для `'text-placement': 'line'` по умолчанию средство визуализации выбирает расположение, при котором `text-max-angle` не превышено.
`text-justify`	StringExpression \| undefined	Выравнивание текста внутри текстового блока. Если значение не задано, текст выравнивается относительно якоря `textAlign`. В противном случае используйте параметры `'left'`, `'center'` или `'right'`, чтобы выровнять текст внутри блока. Примечание: `text-justify` игнорируется при непосредственной отрисовке, а также для `'text-placement': 'line'`.
`text-baseline`	StringExpression (по умолчанию 'middle')	Базовая линия текста. Возможные значения: `'bottom'`, `'top'`, `'middle'`, `'alphabetic'`, `'hanging'`, `'ideographic'`.
`text-padding`	NumberArrayExpression (по умолчанию [0, 0, 0, 0])	Внутренние отступы в пикселях вокруг текста для предотвращения наложений и фона. Порядок значений в массиве: `[top, right, bottom, left]`.
`text-fill-color`	ColorExpression \| undefined	Цвет заливки. `'none'` означает отсутствие заливки и проверки попадания.
`text-background-fill-color`	ColorExpression \| undefined	Цвет заливки. `'none'` означает отсутствие заливки и проверки попадания.
`text-stroke-color`	ColorExpression \| undefined	Цвет обводки.
`text-stroke-line-cap`	StringExpression (по умолчанию 'round')	Стиль окончания линии: `butt`, `round` или `square`.
`text-stroke-line-join`	StringExpression (по умолчанию 'round')	Стиль соединения линий: `bevel`, `round` или `miter`.
`text-stroke-line-dash`	NumberArrayExpression \| undefined	Шаблон штриховой линии.
`text-stroke-line-dash-offset`	NumberExpression (по умолчанию 0)	Смещение штриховой линии.
`text-stroke-miter-limit`	NumberExpression (по умолчанию 10)	Предел скоса.
`text-stroke-width`	NumberExpression \| undefined	Толщина обводки в пикселях.
`text-background-stroke-color`	ColorExpression \| undefined	Цвет обводки.
`text-background-stroke-line-cap`	StringExpression (по умолчанию 'round')	Стиль окончания линии: `butt`, `round` или `square`.
`text-background-stroke-line-join`	StringExpression (по умолчанию 'round')	Стиль соединения линий: `bevel`, `round` или `miter`.
`text-background-stroke-line-dash`	NumberArrayExpression \| undefined	Шаблон штриховой линии.
`text-background-stroke-line-dash-offset`	NumberExpression (по умолчанию 0)	Смещение штриховой линии.
`text-background-stroke-miter-limit`	NumberExpression (по умолчанию 10)	Предел скоса.
`text-background-stroke-width`	NumberExpression \| undefined	Толщина обводки в пикселях.
`text-declutter-mode`	DeclutterMode \| undefined	Режим предотвращения наложения
`z-index`	NumberExpression \| undefined	zIndex стиля.

NumberArrayExpression{Array.<number>} {Array}

Массив чисел (например, [1, 2, 3]) или выражение, результатом которого является такой массив (например, ['get', 'values']).

NumberExpression{number} {Array}

Числовой литерал (например, 42) или выражение, результатом которого является число (например, ['+', 40, 2]).

Rule{Object}

Правило используется для условного применения стиля. Если фильтр правила возвращает true, стиль будет применён.

Свойства:

Имя	Тип	Описание
`style`	FlatStyle \| Array<FlatStyle>	Стиль, который будет применён, если фильтр сработает.
`filter`	EncodedExpression \| undefined	Фильтр, определяющий, применяется ли стиль. Если фильтр не указан, правило применяется всегда (если только это не правило else).
`else`	boolean \| undefined	Если значение равно true, правило применяется, только если не применяется ни одно из предыдущих правил. Если для правила else также задан фильтр, правило не применяется, когда фильтр не срабатывает.

SizeExpression{number} {Array.<number>} {Array}

Массив из двух чисел (например, [10, 20]) или выражение, результатом которого является такой массив (например, ['get', 'size']).

StringExpression{string} {Array}

Строковый литерал (например, 'hello') или выражение, результатом которого является строка (например, ['get', 'greeting']).

StyleVariables{Object.<string, (number|Array.<number>|string|boolean)>}

Переменные стиля задаются в виде объекта. К переменным можно обращаться в style expression с помощью оператора ['var', 'varName']. Каждая переменная должна содержать литеральное значение (не выражение).