Class: Icon

ol/style/Icon~Icon 


import Icon from 'ol/style/Icon';

Set icon style for vector features.

new Icon(opt_options)

style/Icon.js, line 54
Name Type Description
options

Options.

Name Type Description
anchor Array.<number> (defaults to [0.5, 0.5])

Anchor. Default value is the icon center.
anchorOrigin module:ol/style/IconOrigin (defaults to 'top-left')

Origin of the anchor: bottom-left, bottom-right, top-left or top-right.
anchorXUnits module:ol/style/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 module:ol/style/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 module:ol/color~Color | string

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

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

Image object for the icon. If the src option is not provided then the provided image must already be loaded. And in that case, it is required to provide the size of the image, with the imgSize option.
offset Array.<number> (defaults to [0, 0])

Offset, which, together with the size and the offset origin, define the sub-rectangle to use from the original icon image.
displacement Array.<number> (defaults to [0,0])

Displacement the icon
offsetOrigin module:ol/style/IconOrigin (defaults to 'top-left')

Origin of the offset: bottom-left, bottom-right, top-left or top-right.
opacity number (defaults to 1)

Opacity of the icon.
scale number | module:ol/size~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).
size module:ol/size~Size

Icon size in pixel. Can be used together with offset to define the sub-rectangle to use from the origin (sprite) icon image.
imgSize module:ol/size~Size

Image size in pixels. Only required if img is set and src is not, and for SVG images in Internet Explorer 11. The provided imgSize needs to match the actual size of the image.
src string

Image source URI.

Extends

Methods

clone(){module:ol/style/Icon~Icon}

style/Icon.js, line 217

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

Returns:
The cloned style.

getAnchor(){Array.<number>}

style/Icon.js, line 246

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

Returns:
Anchor.

getColor(){module:ol/color~Color}

style/Icon.js, line 313

Get the icon color.

Returns:
Color.

getDisplacement(){Array.<number>} inherited

style/Image.js, line 131

Get the displacement of the shape

Returns:
Shape's center displacement

getImage(pixelRatio){HTMLImageElement|HTMLCanvasElement}

style/Icon.js, line 323

Get the image icon.

Name Type Description
pixelRatio number

Pixel ratio.
Returns:
Image or Canvas element.

getOpacity(){number} inherited

style/Image.js, line 87

Get the symbolizer opacity.

Returns:
Opacity.

getOrigin(){Array.<number>}

style/Icon.js, line 363

Get the origin of the symbolizer.

Returns:
Origin.

getPixelRatio(pixelRatio){number}

style/Icon.js, line 333

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 96

Determine whether the symbolizer rotates with the map.

Returns:
Rotate with map.

getRotation(){number} inherited

style/Image.js, line 105

Get the symoblizer rotation.

Returns:
Rotation.

getScale(){number|module:ol/size~Size} inherited

style/Image.js, line 114

Get the symbolizer scale.

Returns:
Scale.

getSize(){module:ol/size~Size}

style/Icon.js, line 407

Get the size of the icon (in pixels).

Returns:
Image size.

getSrc(){string|undefined}

style/Icon.js, line 398

Get the image URL.

Returns:
Image src.

load()

style/Icon.js, line 425

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 303

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

Name Type Description
anchor Array.<number>

Anchor.

setOpacity(opacity) inherited

style/Image.js, line 212

Set the opacity.

Name Type Description
opacity number

Opacity.

setRotateWithView(rotateWithView) inherited

style/Image.js, line 222

Set whether to rotate the style with the view.

Name Type Description
rotateWithView boolean

Rotate with map.

setRotation(rotation) inherited

style/Image.js, line 232

Set the rotation.

Name Type Description
rotation number

Rotation.

setScale(scale) inherited

style/Image.js, line 241

Set the scale.

Name Type Description
scale number | module:ol/size~Size

Scale.