Class: Icon

ol/style/Icon~Icon 


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

Set icon style for vector features.

new Icon(options)

style/Icon.js, line 82
Name Type Description
anchor Array.<number> (defaults to [0.5, 0.5])

Anchor. Default value is the icon center.
anchorOrigin IconOrigin (defaults to 'top-left')

Origin of the anchor: bottom-left, bottom-right, top-left or top-right.
anchorXUnits IconAnchorUnits (defaults to 'fraction')

Units in which the anchor x value is specified. A value of 'fraction' indicates the x value is a fraction of the icon. A value of 'pixels' indicates the x value in pixels.
anchorYUnits IconAnchorUnits (defaults to 'fraction')

Units in which the anchor y value is specified. A value of 'fraction' indicates the y value is a fraction of the icon. A value of 'pixels' indicates the y value in pixels.
color Color | string | undefined

Color to tint the icon. If not specified, the icon will be left as is.
crossOrigin null | string | undefined

The crossOrigin attribute for loaded images. Note that you must provide a crossOrigin value if you want to access pixel data with the Canvas renderer. See https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image for more detail.
img HTMLImageElement | HTMLCanvasElement | ImageBitmap | undefined

Image object for the icon.
displacement Array.<number> (defaults to [0, 0])

Displacement of the icon in pixels. Positive values will shift the icon right and up.
opacity number (defaults to 1)

Opacity of the icon.
width number | undefined

The width of the icon in pixels. This can't be used together with scale.
height number | undefined

The height of the icon in pixels. This can't be used together with scale.
scale number | Size (defaults to 1)

Scale.
rotateWithView boolean (defaults to false)

Whether to rotate the icon with the view.
rotation number (defaults to 0)

Rotation in radians (positive rotation clockwise).
offset Array.<number> (defaults to [0, 0])

Offset which, together with size and offsetOrigin, defines the sub-rectangle to use from the original (sprite) image.
offsetOrigin IconOrigin (defaults to 'top-left')

Origin of the offset: bottom-left, bottom-right, top-left or top-right.
size Size | undefined

Icon size in pixels. Used together with offset to define the sub-rectangle to use from the original (sprite) image.
src string | undefined

Image source URI.
declutterMode DeclutterMode | undefined

Declutter mode.

Extends

Methods

clone(){Icon}

style/Icon.js, line 294

Clones the style. The underlying Image/HTMLCanvasElement is not cloned.

Returns:
The cloned style.

getAnchor(){Array.<number>}

style/Icon.js, line 335

Get the anchor point in pixels. The anchor determines the center point for the symbolizer.

Returns:
Anchor.

getColor(){Color}

style/Icon.js, line 405

Get the icon color.

Returns:
Color.

getDeclutterMode(){DeclutterMode} inherited

style/Image.js, line 148

Get the declutter mode of the shape

Returns:
Shape's declutter mode

getDisplacement(){Array.<number>} inherited

style/Image.js, line 139

Get the displacement of the shape

Returns:
Shape's center displacement

getHeight(){number}

style/Icon.js, line 532

Get the height of the icon (in pixels). Will return undefined when the icon image is not yet loaded.

Returns:
Icon height (in pixels).

getImage(pixelRatio){HTMLImageElement | HTMLCanvasElement | ImageBitmap}

style/Icon.js, line 417

Get the image icon.

Name Type Description
pixelRatio number

Pixel ratio.
Returns:
Image or Canvas element. If the Icon style was configured with src or with a not let loaded img, an ImageBitmap will be returned.

getOpacity(){number} inherited

style/Image.js, line 95

Get the symbolizer opacity.

Returns:
Opacity.

getOrigin(){Array.<number>}

style/Icon.js, line 462

Get the origin of the symbolizer.

Returns:
Origin.

getPixelRatio(pixelRatio){number}

style/Icon.js, line 428

Get the pixel ratio.

Name Type Description
pixelRatio number

Pixel ratio.
Returns:
The pixel ratio of the image.

getRotateWithView(){boolean} inherited

style/Image.js, line 104

Determine whether the symbolizer rotates with the map.

Returns:
Rotate with map.

getRotation(){number} inherited

style/Image.js, line 113

Get the symoblizer rotation.

Returns:
Rotation.

getScale(){number | Size} inherited

style/Image.js, line 122

Get the symbolizer scale.

Returns:
Scale.

getSize(){Size}

style/Icon.js, line 507

Get the size of the icon (in pixels).

Returns:
Image size.

getSrc(){string | undefined}

style/Icon.js, line 497

Get the image URL.

Returns:
Image src.

getWidth(){number}

style/Icon.js, line 516

Get the width of the icon (in pixels). Will return undefined when the icon image is not yet loaded.

Returns:
Icon width (in pixels).

load()

style/Icon.js, line 571

Load not yet loaded URI. When rendering a feature with an icon style, the vector renderer will automatically call this method. However, you might want to call this method yourself for preloading or other purposes.

setAnchor(anchor)

style/Icon.js, line 395

Set the anchor point. The anchor determines the center point for the symbolizer.

Name Type Description
anchor Array.<number>

Anchor.

setDisplacement(displacement) inherited

style/Image.js, line 229

Set the displacement.

Name Type Description
displacement Array.<number>

Displacement.

setOpacity(opacity) inherited

style/Image.js, line 239

Set the opacity.

Name Type Description
opacity number

Opacity.

setRotateWithView(rotateWithView) inherited

style/Image.js, line 249

Set whether to rotate the style with the view.

Name Type Description
rotateWithView boolean

Rotate with map.

setRotation(rotation) inherited

style/Image.js, line 259

Set the rotation.

Name Type Description
rotation number

Rotation.

setScale(scale)

style/Icon.js, line 550

Set the scale.

Name Type Description
scale number | Size

Scale.