OpenLayers 6 图标定位问题：anchor详解

因为OpenLayers不像Leaflet这种面向UI的地图框架一样有marker的概念，所有的“Marker”都是通过以下两种方式之一实现的：

1. Overlay承载<img>元素；
2. Point类型的要素使用image属性进行样式化。

它们的区别是：Overlay会实实在在的在网页上生成一个DOM容器，把图片放到里面；而样式化的Point要素则是通过样式化过程，将图标绘制在canvas上。实际使用中，我还是提倡使用第二种方式，可以提高渲染效率。

另外在实际使用中，我们经常会用到图标锚准的问题，就是将类似：

这样的图标要始终对准地图上的POI。

OpenLayers的ol.style.Icon类提供了几个用于锚准的属性：

anchor: [0.5, 0.5]	图标锚点位置，单位由anchorXUnits和anchorYUnits确定，缺省为百分比；
anchorOrigin: 'top-left'	原点位置，取值为bottom-left, bottom-right, top-left 或 top-right;
anchorXUnits: 'fraction'	图标锚点位置x轴的单位，缺省是百分比，可设置为'pixels'（有s）
anchorYUnits: 'fraction'	图标锚点位置y轴的单位，缺省是百分比，可设置为'pixels'（有s）

下面实际玩一下。

为了说明问题，我将图标打在了天安门广场的人民英雄纪念碑附近，首先使用默认的设置看一下几个zoom级别之下的效果：

 

 

可以看到图标的小尖尖并没有像我们预期的那样始终指着我们需要的地方，而是随着zoom级别改变不断在变化。这是因为现在anchor的值是[0.5, 0.5]，定位点在图标的中心。

 

接下来我们把anchor做一下调整：

 pAnchor.setStyle(new ol.style.Style({
                        image: new ol.style.Icon({
                                anchor: [0.5, 1],
                                src: 'data/marker-icon.png',
                        })
                }))
                vSource.addFeature(pAnchor);

 将y方向的偏移量调整为100%，也就是从默认的top-left出发的图标的基线，再看看现在的定位：

 

现在可以看到，图标的尖端就始终指向纪念碑右上角那个点了 。