Javascript OpenLayers 3矢量缩放位置错误

我尝试使用OpenLayers 3在地图上绘制矢量图像。在地图上使用“缩放”时，图像的行为会很奇怪。为了演示这一点，我们制作了一个JSFIDLE：

---

只需使用放大/缩小按钮即可。有人知道这是为什么吗？

你没有说清楚“行为奇怪”是什么意思，但我假设这是关于放大和缩小后标记“浮动”的问题。这是因为您使用的自定义标记图像的顶端位于底部，但OpenLayers默认情况下会将图标的中心设置为其中间（因为它无法推断“尖头”侧的位置）

您可以通过定义锚来轻松解决此问题。有多种方法，在这种情况下，使用

锚定

可能是最简单的方法：

var iconStyle=new ol.style.style({
图片：新的ol.style.Icon（/**@type{olx.style.IconOptions}*/({
不透明度：0.75，
锚点：[0.5,1]，//位于X轴中间，位于Y轴底部
src:“//cdn4.iconfinder.com/data/icons/pictype-free-vector-icons/16/location-alt-32.png”
}))
});

---

下面是您更新的JSFIDLE，它显示了锚定义的新行为：

我在文档中看到了，但没有时间回顾。谢谢你解决了我的问题。

 var iconStyle = new ol.style.Style({
        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
        opacity: 0.75,
        src: '//cdn4.iconfinder.com/data/icons/pictype-free-vector-icons/16/location-alt-32.png'
      }))
    });