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默認會將圖標的中心設置在中間（因爲它無法推斷「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/