OpenLayers 3 Vector 缩放错误位置

Question

我尝试使用 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'
      }))
    });

只需使用缩放 in/out 即可实现。有谁知道这是为什么？

Answer 1

你没说清楚你说的"behaves strange"是什么意思，但我假设它是关于放大和缩小后的标记"floating"。这是因为您使用的自定义标记图像的尖端位于底部，但默认情况下 OpenLayers 将图标的中心设置在其中间（因为它无法推断 "pointy"边是）。

您可以通过定义锚点轻松解决这个问题。 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/

OpenLayers 3 Vector 缩放错误位置

OpenLayers 3 Vector wrong position with zoom

javascript

maps

openstreetmap

openlayers-3