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 \| null	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.