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

Popular posts from this blog

c - Bitwise operation with (signed) enum value -

xslt - Unnest parent nodes by child node -

YouTubePlayerFragment cannot be cast to android.support.v4.app.Fragment -