Icon~Icon

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

Set icon style for vector features.

new Icon(options) style/Icon.js, line 83

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.
`referrerPolicy`	ReferrerPolicy \| undefined	The `referrerPolicy` property for loaded images.
`img`	HTMLImageElement \| HTMLCanvasElement \| OffscreenCanvas \| 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

ImageStyle

Methods

clone(){Icon} style/Icon.js, line 304

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

Returns:

The cloned style.

getAnchor(){Array.<number>} style/Icon.js, line 346

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

Returns:

Anchor.

getColor(){Color} style/Icon.js, line 416

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 600

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 | OffscreenCanvas | ImageBitmap} style/Icon.js, line 467

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 512

Get the origin of the symbolizer.

Returns:

Origin.

getPixelRatio(pixelRatio){number} style/Icon.js, line 478

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 575

Get the size of the icon (in pixels).

Returns:

Image size.

getSrc(){string | undefined} style/Icon.js, line 547

Get the image URL.

Returns:

Image src.

getWidth(){number} style/Icon.js, line 584

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 639

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 406

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 618

Set the scale.

Name	Type	Description
`scale`	number \| Size	Scale.

setSrc(src) style/Icon.js, line 556

Set the image URI

Name	Type	Description
`src`	string	Image source URI