设置图标位置

如果像之前那样设置图标,不做任何位置设置,那么默认情况下,图标的中心点对应于地图位置。下面这个地图显示了这个位置,中心那个红点所处位置就是[104, 30],可以这个点对应于图标的中心位置:

有时候我们可能并不想这样,比如我们希望锚点图标下方的箭头指向地图位置。 比如这样:

要做到这个效果,我们只需要把设置样式的代码加上anchor的设置:

image: new ol.style.Icon({
  src: '../img/anchor.png',
  anchor: [0.5, 1]    // 设置图标位置
})

为什么是[0.5, 1]这种值,表示什么? 默认情况下,位置坐标是按照比例的方式来设置的,范围从0到1,x轴上0表示最左边,1表示最右边,y轴上0表示最上边,1表示最下边。 如代码所示,x设置为0.5可以让图片在x方向上居中,y设置为1可以让图片在y方向上移动到最底端。 大家可以给予上面这个代码修改一下,试试[0, 0]会让图标处于什么位置?

除了按照比例进行移动之外,还可以按照像素来计算位置,但必须显示设置anchorXUnitsanchorYUnitspixels。 根据不同的需要,可以采用不同的单位来设置。