Class: Text

ol/style/Text~Text 


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

Set text style for vector features.

new Text(options)

style/Text.js, line 74
Name Type Description
font string | undefined

Font style as CSS font value, see: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/font. Default is '10px sans-serif'
maxAngle number (defaults to Math.PI/4)

When placement is set to 'line', allow a maximum angle between adjacent characters. The expected value is in radians, and the default is 45° (Math.PI / 4).
offsetX number (defaults to 0)

Horizontal text offset in pixels. A positive will shift the text right.
offsetY number (defaults to 0)

Vertical text offset in pixels. A positive will shift the text down.
overflow boolean (defaults to false)

For polygon labels or when placement is set to 'line', allow text to exceed the width of the polygon at the label position or the length of the path that it follows.
placement TextPlacement (defaults to 'point')

Text placement.
repeat number | undefined

Repeat interval. When set, the text will be repeated at this interval, which specifies the distance between two text anchors in pixels. Only available when placement is set to 'line'. Overrides 'textAlign'.
scale number | Size | undefined

Scale.
rotateWithView boolean (defaults to false)

Whether to rotate the text with the view.
keepUpright boolean (defaults to true)

Whether the text can be rotated 180° to prevent being rendered upside down.
rotation number (defaults to 0)

Rotation in radians (positive rotation clockwise).
text string | Array.<string> | undefined

Text content or rich text content. For plain text provide a string, which can contain line breaks (\n). For rich text provide an array of text/font tuples. A tuple consists of the text to render and the font to use (or '' to use the text style's font). A line break has to be a separate tuple (i.e. '\n', ''). Example: ['foo', 'bold 10px sans-serif', ' bar', 'italic 10px sans-serif', ' baz', ''] will yield "foo bar baz". Note: Rich text is not supported for placement: 'line' or the immediate rendering API.
textAlign CanvasTextAlign | undefined

Text alignment. Possible values: 'left', 'right', 'center', 'end' or 'start'. Default is 'center' for placement: 'point'. For placement: 'line', the default is to let the renderer choose a placement where maxAngle is not exceeded.
justify TextJustify | undefined

Text justification within the text box. If not set, text is justified towards the textAlign anchor. Otherwise, use options 'left', 'center', or 'right' to justify the text within the text box. Note: justify is ignored for immediate rendering and also for placement: 'line'.
textBaseline CanvasTextBaseline (defaults to 'middle')

Text base line. Possible values: 'bottom', 'top', 'middle', 'alphabetic', 'hanging', 'ideographic'.
fill Fill | null | undefined

Fill style. If none is provided, we'll use a dark fill-style (#333). Specify null for no fill.
stroke Stroke | undefined

Stroke style.
backgroundFill Fill | undefined

Fill style for the text background when placement is 'point'. Default is no fill.
backgroundStroke Stroke | undefined

Stroke style for the text background when placement is 'point'. Default is no stroke.
padding Array.<number> (defaults to [0, 0, 0, 0])

Padding in pixels around the text for decluttering and background. The order of values in the array is [top, right, bottom, left].
declutterMode DeclutterMode | undefined

Declutter mode: declutter, obstacle, none

Methods

clone(){Text}

style/Text.js, line 228

Clones the style.

Returns:
The cloned style.

getBackgroundFill(){Fill | null}

style/Text.js, line 425

Get the background fill style for the text.

Returns:
Fill style.

getBackgroundStroke(){Stroke | null}

style/Text.js, line 434

Get the background stroke style for the text.

Returns:
Stroke style.

getDeclutterMode(){DeclutterMode}

style/Text.js, line 452

Get the declutter mode of the shape

Returns:
Shape's declutter mode

getFill(){Fill | null}

style/Text.js, line 327

Get the fill style for the text.

Returns:
Fill style.

getFont(){string | undefined}

style/Text.js, line 273

Get the font name.

Returns:
Font.

getJustify(){TextJustify | undefined}

style/Text.js, line 407

Get the justification.

Returns:
Justification.

getKeepUpright(){boolean | undefined}

style/Text.js, line 345

Determine whether the text can be rendered upside down.

Returns:
Keep text upright.

getMaxAngle(){number}

style/Text.js, line 282

Get the maximum angle between adjacent characters.

Returns:
Angle in radians.

getOffsetX(){number}

style/Text.js, line 309

Get the x-offset for the text.

Returns:
Horizontal text offset.

getOffsetY(){number}

style/Text.js, line 318

Get the y-offset for the text.

Returns:
Vertical text offset.

getOverflow(){boolean}

style/Text.js, line 264

Get the overflow configuration.

Returns:
Let text overflow the length of the path they follow.

getPadding(){Array.<number> | null}

style/Text.js, line 443

Get the padding for the text.

Returns:
Padding.

getPlacement(){TextPlacement}

style/Text.js, line 291

Get the label placement.

Returns:
Text placement.

getRepeat(){number | undefined}

style/Text.js, line 300

Get the repeat interval of the text.

Returns:
Repeat interval in pixels.

getRotateWithView(){boolean | undefined}

style/Text.js, line 336

Determine whether the text rotates with the map.

Returns:
Rotate with map.

getRotation(){number | undefined}

style/Text.js, line 354

Get the text rotation.

Returns:
Rotation.

getScale(){number | Size | undefined}

style/Text.js, line 363

Get the text scale.

Returns:
Scale.

getStroke(){Stroke | null}

style/Text.js, line 380

Get the stroke style for the text.

Returns:
Stroke style.

getText(){string | Array.<string> | undefined}

style/Text.js, line 389

Get the text to be rendered.

Returns:
Text.

getTextAlign(){CanvasTextAlign | undefined}

style/Text.js, line 398

Get the text alignment.

Returns:
Text align.

getTextBaseline(){CanvasTextBaseline | undefined}

style/Text.js, line 416

Get the text baseline.

Returns:
Text baseline.

setBackgroundFill(fill)

style/Text.js, line 632

Set the background fill.

Name Type Description
fill Fill | null

Fill style.

setBackgroundStroke(stroke)

style/Text.js, line 642

Set the background stroke.

Name Type Description
stroke Stroke | null

Stroke style.

setFill(fill)

style/Text.js, line 551

Set the fill.

Name Type Description
fill Fill | null

Fill style.

setFont(font)

style/Text.js, line 472

Set the font.

Name Type Description
font string | undefined

Font.

setJustify(justify)

style/Text.js, line 612

Set the justification.

Name Type Description
justify TextJustify | undefined

Justification.

setKeepUpright(keepUpright)

style/Text.js, line 541

Set whether the text can be rendered upside down.

Name Type Description
keepUpright boolean

Keep text upright.

setMaxAngle(maxAngle)

style/Text.js, line 482

Set the maximum angle between adjacent characters.

Name Type Description
maxAngle number

Angle in radians.

setOffsetX(offsetX)

style/Text.js, line 492

Set the x offset.

Name Type Description
offsetX number

Horizontal text offset.

setOffsetY(offsetY)

style/Text.js, line 502

Set the y offset.

Name Type Description
offsetY number

Vertical text offset.

setOverflow(overflow)

style/Text.js, line 462

Set the overflow property.

Name Type Description
overflow boolean

Let text overflow the path that it follows.

setPadding(padding)

style/Text.js, line 652

Set the padding ([top, right, bottom, left]).

Name Type Description
padding Array.<number> | null

Padding.

setPlacement(placement)

style/Text.js, line 512

Set the text placement.

Name Type Description
placement TextPlacement

Placement.

setRepeat(repeat)

style/Text.js, line 521

Set the repeat interval of the text.

Name Type Description
repeat number | undefined

Repeat interval in pixels.

setRotateWithView(rotateWithView)

style/Text.js, line 531

Set whether to rotate the text with the view.

Name Type Description
rotateWithView boolean

Rotate with map.

setRotation(rotation)

style/Text.js, line 561

Set the rotation.

Name Type Description
rotation number | undefined

Rotation.

setScale(scale)

style/Text.js, line 571

Set the scale.

Name Type Description
scale number | Size | undefined

Scale.

setStroke(stroke)

style/Text.js, line 582

Set the stroke.

Name Type Description
stroke Stroke | null

Stroke style.

setText(text)

style/Text.js, line 592

Set the text.

Name Type Description
text string | Array.<string> | undefined

Text.

setTextAlign(textAlign)

style/Text.js, line 602

Set the text alignment.

Name Type Description
textAlign CanvasTextAlign | undefined

Text align.

setTextBaseline(textBaseline)

style/Text.js, line 622

Set the text baseline.

Name Type Description
textBaseline CanvasTextBaseline | undefined

Text baseline.