ol/style/flat

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

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} {Массив}

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

ColorExpression{Цвет} {строка} {Массив}

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

DefaultStyle{Объект}

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

Свойства:

Имя	Тип	Описание
fill-color	строка	'rgba(255,255,255,0.4)'
stroke-color	строка	'#3399CC'
stroke-width	число	1.25
circle-radius	число	5
circle-fill-color	строка	'rgba(255,255,255,0.4)'
circle-stroke-width	число	1.25
circle-stroke-color	строка	'#3399CC'

FlatCircle{Объект}

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

Свойства:

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

FlatFill{Объект}

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

Свойства:

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

FlatIcon{Объект}

Свойства стиля иконок, применяемые к точкам. 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 для загружаемых изображений. Обратите внимание, что вам необходимо предоставить значение icon-cross-origin, если вы хотите получить доступ к данным пикселей с помощью рендерера Canvas. Подробнее см. 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	Индекс z стиля. (Только 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	Смещение обводки в пикселях. Положительное значение смещает линию вправо относительно направления линии. (Только WebGL)
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, если не определено.
z-index	NumberExpression | undefined	zIndex стиля.

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

Для статической стилизации метод layer.setStyle() может быть вызван с объектной литеральной записью, имеющей свойства fill, stroke, text, icon, regular shape, и/или circle.

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'. По умолчанию 'center' для 'text-placement': 'point'. Для '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	Индекс z стиля.

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']. Каждая переменная должна содержать литеральное значение (не выражение).