Search code examples
iconsopenlayers-3

questions about icon property in openlayers 3


I have a question about icon property including anchor, anchor Origin, offset, offset Origin. because the open layers web didn't give more explanation and it confuses me, when i change anchor or offset, they both can change icon position, and offset and size both can cut the icon, and what does Origin mean, those properties confuse me for a long time. Thanks for any help in advance.


Solution

  • anchor: specifies where the "tip" point of the icon is. To use mouse pointers as an analogy, standard arrow has its anchor on the top-left corner, a cross has the active part exactly in the middle, etc. OpenLayers allows you to specify that via a vector between [0,0] and [1,1] (e.g. [0.5, 0.5] is in the middle, etc.).

    anchorOrigin: which part of the icon should the anchor be applied from. Default is top-left, meaning that the top-left corner would be used as a point of reference if anchor is to be applied. I'd say that it's probably best to ignore it and go with the default, only modifying anchor.

    offset: if you only want to use a part of your input image as the icon (because, for instance, there's some unnecessary margin), you can shift the active area by [x, y] pixels

    offsetOrigin: which point of the icon should be used as the point of reference for the offset property.

    Note that if you use offset then it makes sense to have a look at size.