Class: Icon

ol/style/Icon~Icon


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

Set icon style for vector features.

new Icon(options)

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

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

Returns:
The cloned style.

getAnchor(){Array.<number>}

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

Returns:
Anchor.

Get the icon color.

Returns:
Color.

Get the declutter mode of the shape

Returns:
Shape's declutter mode

getDisplacement(){Array.<number>} inherited

Get the displacement of the shape

Returns:
Shape's center displacement

getHeight(){number}

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}

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

Get the symbolizer opacity.

Returns:
Opacity.

getOrigin(){Array.<number>}

Get the origin of the symbolizer.

Returns:
Origin.

getPixelRatio(pixelRatio){number}

Get the pixel ratio.

Name Type Description
pixelRatio number

Pixel ratio.

Returns:
The pixel ratio of the image.

getRotateWithView(){boolean} inherited

Determine whether the symbolizer rotates with the map.

Returns:
Rotate with map.

getRotation(){number} inherited

Get the symoblizer rotation.

Returns:
Rotation.

getScale(){number | Size} inherited

Get the symbolizer scale.

Returns:
Scale.

Get the size of the icon (in pixels).

Returns:
Image size.

getSrc(){string | undefined}

Get the image URL.

Returns:
Image src.

getWidth(){number}

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 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)

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

Name Type Description
anchor Array.<number>

Anchor.

setDisplacement(displacement) inherited

Set the displacement.

Name Type Description
displacement Array.<number>

Displacement.

setOpacity(opacity) inherited

Set the opacity.

Name Type Description
opacity number

Opacity.

setRotateWithView(rotateWithView) inherited

Set whether to rotate the style with the view.

Name Type Description
rotateWithView boolean

Rotate with map.

setRotation(rotation) inherited

Set the rotation.

Name Type Description
rotation number

Rotation.

setScale(scale)

Set the scale.

Name Type Description
scale number | Size

Scale.