OpenLayers

Class: Style

ol/style/Style~Style 


import Style from 'ol/style/Style';

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 {Fill, Stroke, Circle, Style} from 'ol/style';

 var fill = new Fill({
   color: 'rgba(255,255,255,0.4)'
 });
 var stroke = new Stroke({
   color: '#3399CC',
   width: 1.25
 });
 var 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 {Fill, Stroke, Circle, Style} from 'ol/style';
 import GeometryType from 'ol/geom/GeometryType';

 var white = [255, 255, 255, 1];
 var blue = [0, 153, 255, 1];
 var width = 3;
 styles[GeometryType.POLYGON] = [
   new Style({
     fill: new Fill({
       color: [255, 255, 255, 0.5]
     })
   })
 ];
 styles[GeometryType.MULTI_POLYGON] =
     styles[GeometryType.POLYGON];
 styles[GeometryType.LINE_STRING] = [
   new Style({
     stroke: new Stroke({
       color: white,
       width: width + 2
     })
   }),
   new Style({
     stroke: new Stroke({
       color: blue,
       width: width
     })
   })
 ];
 styles[GeometryType.MULTI_LINE_STRING] =
     styles[GeometryType.LINE_STRING];
 styles[GeometryType.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[GeometryType.MULTI_POINT] =
     styles[GeometryType.POINT];
 styles[GeometryType.GEOMETRY_COLLECTION] =
     styles[GeometryType.POLYGON].concat(
         styles[GeometryType.LINE_STRING],
         styles[GeometryType.POINT]
     );

new Style(opt_options)

style/Style.js, line 154
Name Type Description
options

Style options.

Name Type Description
geometry string | module:ol/geom/Geometry~Geometry | module:ol/style/Style~GeometryFunction

Feature property or geometry or function returning a geometry to render for this style.
fill module:ol/style/Fill~Fill

Fill style.
image module:ol/style/Image~ImageStyle

Image style.
renderer module:ol/style/Style~RenderFunction

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.
stroke module:ol/style/Stroke~Stroke

Stroke style.
text module:ol/style/Text~Text

Text style.
zIndex number

Z index.

Methods

clone(){module:ol/style/Style~Style}

style/Style.js, line 217

Clones the style.

Returns:
The cloned style.

getFill(){module:ol/style/Fill~Fill}

style/Style.js, line 278

Get the fill style.

Returns:
Fill style.

getGeometry(){string|module:ol/geom/Geometry~Geometry|module:ol/style/Style~GeometryFunction}

style/Style.js, line 259

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(){module:ol/style/Style~GeometryFunction}

style/Style.js, line 269

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.

getImage(){module:ol/style/Image~ImageStyle}

style/Style.js, line 296

Get the image style.

Returns:
Image style.

getRenderer(){module:ol/style/Style~RenderFunction|null}

style/Style.js, line 238

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

Returns:
Custom renderer function.

getStroke(){module:ol/style/Stroke~Stroke}

style/Style.js, line 314

Get the stroke style.

Returns:
Stroke style.

getText(){module:ol/style/Text~Text}

style/Style.js, line 332

Get the text style.

Returns:
Text style.

getZIndex(){number|undefined}

style/Style.js, line 350

Get the z-index for the style.

Returns:
ZIndex.

setFill(fill)

style/Style.js, line 287

Set the fill style.

Name Type Description
fill module:ol/style/Fill~Fill

Fill style.

setGeometry(geometry)

style/Style.js, line 362

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

Name Type Description
geometry string | module:ol/geom/Geometry~Geometry | module:ol/style/Style~GeometryFunction

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

setImage(image)

style/Style.js, line 305

Set the image style.

Name Type Description
image module:ol/style/Image~ImageStyle

Image style.

setRenderer(renderer)

style/Style.js, line 248

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 module:ol/style/Style~RenderFunction | null

Custom renderer function.

setStroke(stroke)

style/Style.js, line 323

Set the stroke style.

Name Type Description
stroke module:ol/style/Stroke~Stroke

Stroke style.

setText(text)

style/Style.js, line 341

Set the text style.

Name Type Description
text module:ol/style/Text~Text

Text style.

setZIndex(zIndex)

style/Style.js, line 389

Set the z-index.

Name Type Description
zIndex number | undefined

ZIndex.