OpenLayers 3矢量错误的位置与缩放

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

要发生这种情况,只需使用放大/缩小功能.有谁知道为什么会这样？

Answer 1

你没有说清楚你的行为是什么意思"行为奇怪",但我假设这是关于放大和缩小后标记为"浮动"的标记.这是因为您使用的是自定义标记图像,其顶部位于底部,但默认情况下OpenLayers将图标的中心设置在其中间(因为它无法推断"尖尖"的位置) "方是).

您可以通过定义锚点轻松解决此问题.有多种方法可以指定锚点的位置,anchor在这种情况下使用is可能是最直接的:

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/