Class: Style

ol/style/Style~Style


import Style from 'ol/style/Style.js';

Container for vector feature rendering styles. Any changes made to the style or its children through set*() methods will not take effect until the feature or layer that uses the style is re-rendered.

Feature styles

If no style is defined, the following default style is used:

 import {Circle, Fill, Stroke, Style} from 'ol/style.js';

 const fill = new Fill({
   color: 'rgba(255,255,255,0.4)',
 });
 const stroke = new Stroke({
   color: '#3399CC',
   width: 1.25,
 });
 const styles = [
   new Style({
     image: new Circle({
       fill: fill,
       stroke: stroke,
       radius: 5,
     }),
     fill: fill,
     stroke: stroke,
   }),
 ];

A separate editing style has the following defaults:

 import {Circle, Fill, Stroke, Style} from 'ol/style.js';

 const styles = {};
 const white = [255, 255, 255, 1];
 const blue = [0, 153, 255, 1];
 const width = 3;
 styles['Polygon'] = [
   new Style({
     fill: new Fill({
       color: [255, 255, 255, 0.5],
     }),
   }),
 ];
 styles['MultiPolygon'] =
     styles['Polygon'];
 styles['LineString'] = [
   new Style({
     stroke: new Stroke({
       color: white,
       width: width + 2,
     }),
   }),
   new Style({
     stroke: new Stroke({
       color: blue,
       width: width,
     }),
   }),
 ];
 styles['MultiLineString'] = styles['LineString'];

 styles['Circle'] = styles['Polygon'].concat(
   styles['LineString']
 );

 styles['Point'] = [
   new Style({
     image: new Circle({
       radius: width * 2,
       fill: new Fill({
         color: blue,
       }),
       stroke: new Stroke({
         color: white,
         width: width / 2,
       }),
     }),
     zIndex: Infinity,
   }),
 ];
 styles['MultiPoint'] =
     styles['Point'];
 styles['GeometryCollection'] =
     styles['Polygon'].concat(
         styles['LineString'],
         styles['Point']
     );

new Style(options)

Name Type Description
geometry string | Geometry | GeometryFunction | undefined

Feature property or geometry or function returning a geometry to render for this style.

fill Fill | undefined

Fill style.

image ImageStyle | undefined

Image style.

renderer RenderFunction | undefined

Custom renderer. When configured, fill, stroke and image will be ignored, and the provided function will be called with each render frame for each geometry.

hitDetectionRenderer RenderFunction | undefined

Custom renderer for hit detection. If provided will be used in hit detection rendering.

stroke Stroke | undefined

Stroke style.

text Text | undefined

Text style.

zIndex number | undefined

Z index.

Methods

Clones the style.

Returns:
The cloned style.

Get the fill style.

Returns:
Fill style.

getGeometry(){string | Geometry | GeometryFunction}

Get the geometry to be rendered.

Returns:
Feature property or geometry or function that returns the geometry that will be rendered with this style.

getGeometryFunction(){GeometryFunction}

Get the function used to generate a geometry for rendering.

Returns:
Function that is called with a feature and returns the geometry to render instead of the feature's geometry.

getHitDetectionRenderer(){RenderFunction | null}

Get the custom renderer function that was configured with #setHitDetectionRenderer or the hitDetectionRenderer constructor option.

Returns:
Custom renderer function.

Get the image style.

Returns:
Image style.

getRenderer(){RenderFunction | null}

Get the custom renderer function that was configured with #setRenderer or the renderer constructor option.

Returns:
Custom renderer function.

Get the stroke style.

Returns:
Stroke style.

Get the text style.

Returns:
Text style.

getZIndex(){number | undefined}

Get the z-index for the style.

Returns:
ZIndex.

setFill(fill)

Set the fill style.

Name Type Description
fill Fill

Fill style.

setGeometry(geometry)

Set a geometry that is rendered instead of the feature's geometry.

Name Type Description
geometry string | Geometry | GeometryFunction

Feature property or geometry or function returning a geometry to render for this style.

setHitDetectionRenderer(renderer)

Sets a custom renderer function for this style used in hit detection.

Name Type Description
renderer RenderFunction | null

Custom renderer function.

setImage(image)

Set the image style.

Name Type Description
image ImageStyle

Image style.

setRenderer(renderer)

Sets a custom renderer function for this style. When set, fill, stroke and image options of the style will be ignored.

Name Type Description
renderer RenderFunction | null

Custom renderer function.

setStroke(stroke)

Set the stroke style.

Name Type Description
stroke Stroke

Stroke style.

setText(text)

Set the text style.

Name Type Description
text Text

Text style.

setZIndex(zIndex)

Set the z-index.

Name Type Description
zIndex number | undefined

ZIndex.