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)

style/Style.js, line 162
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

clone(){Style}

style/Style.js, line 236

Clones the style.

Returns:
The cloned style.

getFill(){Fill | null}

style/Style.js, line 320

Get the fill style.

Returns:
Fill style.

getGeometry(){string | Geometry | GeometryFunction | null}

style/Style.js, line 301

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}

style/Style.js, line 311

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}

style/Style.js, line 290

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

Returns:
Custom renderer function.

getImage(){ImageStyle | null}

style/Style.js, line 338

Get the image style.

Returns:
Image style.

getRenderer(){RenderFunction | null}

style/Style.js, line 260

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

Returns:
Custom renderer function.

getStroke(){Stroke | null}

style/Style.js, line 356

Get the stroke style.

Returns:
Stroke style.

getText(){Text | null}

style/Style.js, line 374

Get the text style.

Returns:
Text style.

getZIndex(){number | undefined}

style/Style.js, line 392

Get the z-index for the style.

Returns:
ZIndex.

setFill(fill)

style/Style.js, line 329

Set the fill style.

Name Type Description
fill Fill | null

Fill style.

setGeometry(geometry)

style/Style.js, line 404

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)

style/Style.js, line 280

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

Name Type Description
renderer RenderFunction | null

Custom renderer function.

setImage(image)

style/Style.js, line 347

Set the image style.

Name Type Description
image ImageStyle

Image style.

setRenderer(renderer)

style/Style.js, line 270

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)

style/Style.js, line 365

Set the stroke style.

Name Type Description
stroke Stroke | null

Stroke style.

setText(text)

style/Style.js, line 383

Set the text style.

Name Type Description
text Text

Text style.

setZIndex(zIndex)

style/Style.js, line 429

Set the z-index.

Name Type Description
zIndex number | undefined

ZIndex.