OpenLayers 3矢量错误位置与缩放答案

【问题标题】：OpenLayers 3 Vector wrong position with zoomOpenLayers 3矢量错误位置与缩放
【发布时间】：2015-07-21 20:19:12
【问题描述】：

我尝试使用 OpenLayers 3 在地图上绘制矢量图像。在地图上使用缩放时图像的行为很奇怪。为了证明这一点，制作了一个 jsffidle：http://jsfiddle.net/aderbas/8kpoqoow/

 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'
      }))
    });

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

【问题讨论】：

标签： javascript maps openstreetmap openlayers-3

【解决方案1】：

您没有明确“行为奇怪”的含义，但我假设它是关于放大和缩小后“浮动”的标记。这是由于您使用的自定义标记图像的尖端位于底部，但 OpenLayers 默认将图标的中心设置在其中间（因为它无法推断“尖"边是)。

您可以通过定义锚点轻松解决此问题。 specify where the anchor should be 有多种方法，在这种情况下使用 anchor 可能是最直接的：

var iconStyle = new ol.style.Style({
    image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
    opacity: 0.75,

    anchor: [0.5, 1], // middle on the X axis, bottom on the Y axis

    src: '//cdn4.iconfinder.com/data/icons/pictype-free-vector-icons/16/location-alt-32.png'
  }))
});

这是您更新后的 JSFiddle，它显示了定义了锚点的新行为：http://jsfiddle.net/kryger/hv8w4o3u/2/

【讨论】：

我在文档中看到了，但是没时间复习。谢谢你解决了我的问题。