当点图标在地图上显示时,会默认图标显示在点的当前坐标上,如果是圆形的图标,图标的正中心就是坐标点,但是可能会存在不规则的图标,比如标注了箭头的图标等。
公司UI就提出了这个需求,希望图标能显示在点的上方,就正好箭头的地方就是点的位置。
起初想的比较简单,以为就是和字体的样式中设置一下offsetY和offsetX,然后等我查openalyers在线api文档才发现,umm参数不太一样。
查看Icon的参数时,就看到了offset,残像这个就是设置偏移量的参数吧,于是设置offset,发现诶,不太对啊,图标偏移没看到,反而图标只显示了一部分,无论offset怎么修改都不对。
再次查看api,又发现有一个offsetOrigin,这个是什么意思呢,和offsetOrigin有关系吗?抱着试一下的态度,又修改了一下,然而还是不对。
一个一个查看参数,又发现了一个size,Can be used together with offset..,OK,就你了。
经过多次尝试和调整位置,就终于搞定啦。
我的理解是size视图标的大小而定,需要能将整个偏移的位置包括进去,offset分别设置x轴和y轴的偏移量,offsetOrigin是设置偏移的起点。
有问题欢迎讨论,等空一点还是要把具体的数字理清楚,每次一点一点尝试修改就很头大。
return new Style({
image: new Icon({
scale: 1,
src: icon,
offset:[-20,-40],
offsetOrigin:'bottom-right',
size:[100,100]
}),
});