javascript - OpenLayers 3 Vector wrong position with zoom -
i try draw vector image on map using openlayers 3. image behaves strange when using zoom on map. demonstrate made 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' })) });
to happen use zoom in/out. know why that?
you didn't make clear mean "behaves strange", i'm assuming it's marker "floating" after zooming in , out. caused fact you're using custom marker image has tip on bottom, openlayers default sets centre of icon in middle (since has no way of inferring "pointy" side is).
you can solve problem defining anchor. there multiple ways specify anchor should be, using anchor
straightforward in case:
var iconstyle = new ol.style.style({ image: new ol.style.icon(/** @type {olx.style.iconoptions} */ ({ opacity: 0.75, anchor: [0.5, 1], // middle on x axis, bottom on y axis src: '//cdn4.iconfinder.com/data/icons/pictype-free-vector-icons/16/location-alt-32.png' })) });
here's updated jsfiddle shows new behaviour anchor defined: http://jsfiddle.net/kryger/hv8w4o3u/2/
Comments
Post a Comment