设置图标位置

如果像之前那样设置图标，不做任何位置设置，那么默认情况下，图标的中心点对应于地图位置。下面这个地图显示了这个位置，中心那个红点所处位置就是[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]会让图标处于什么位置？

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