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将图标的中心设置在其中间（因为它无法推断“尖尖”的位置） “方是）。

您可以通过定义锚点轻松解决此问题。 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矢量错误的位置与缩放

1 个答案: