OpenLayers Extension ol：ext FontSymbol格式不正确

Question

I'm trying to create a map with a simple marker based on OpenLayers with ol:ext. When defining the style of the marker via FontSymbol the surrounding form does not look like in the example , but like a strangely transformed triangle.

I'm a totally newbie in using OpenLayers, so I'm not sure, whether the problem is elsewhere (eg I'm really not sure about the definition of ol.Feature), but the problem results in rendering the form and the triangles transformation changes when selecting a different one (values from the API-Docs ), so I think it's got somthing to do with that.

The relevant Part of my code so far:

 var pos = {lat: 50.06882, lng: 16.71712}; var zoom = 15; var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([ pos.lng, pos.lat]), zoom: zoom }) }); var vector = new ol.layer.Vector({ name: 'marker', source: new ol.source.Vector({ features: [ new ol.Feature({ geometry: new ol.geom.Point( ol.proj.fromLonLat([ pos.lng, pos.lat]) ) }) ] }), style: [ new ol.style.Style({ image: new ol.style.FontSymbol({ glyph: 'fa-star', form: 'marker', radius: '20', offsetY: -15, gradient: true, fontSize: 1.0, fontStyle: '', rotation: 0*Math.PI/180, rotateWithView: false, color: 'white', fill: new ol.style.Fill({ color: 'green', }), stroke: new ol.style.Stroke({ color: 'white', width: 2, }), }), stroke: new ol.style.Stroke({ width: 3, color: 'white' }), fill: new ol.style.Fill({ color: [255, 136, 0, 0.6] }) }), new ol.style.Style( { image: new ol.style.Shadow( { radius: 15, blur: 5, offsetX: 0, offsetY: 0, fill: new ol.style.Fill( { color: "rgba(0,0,0,0.5)" }) }) }) ] }) map.addLayer(vector); 

 <!-- OL --> <link rel="stylesheet" href="//openlayers.org/en/latest/css/ol.css" /> <script type="text/javascript" src="//openlayers.org/en/latest/build/ol.js"></script> <link rel="stylesheet" href="//cdn.rawgit.com/Viglino/ol-ext/master/dist/ol-ext.css" /> <script type="text/javascript" src="//cdn.rawgit.com/Viglino/ol-ext/master/dist/ol-ext.min.js"></script> <script type="text/javascript" src="//cdn.rawgit.com/Viglino/ol-ext/master/dist/extra/FontAwesomeDef.js"></script> <!-- Map div --> <div id="map" style="width:600px; height:400px;"></div> 

Answer 1

The radius must be a number (or the position may be on error) and the font must be loaded before the style creation (or the symbol will not be drawn).

 var pos = {lat: 50.06882, lng: 16.71712}; var zoom = 15; var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([ pos.lng, pos.lat]), zoom: zoom }) }); var vector = new ol.layer.Vector({ name: 'marker', source: new ol.source.Vector({ features: [ new ol.Feature({ geometry: new ol.geom.Point( ol.proj.fromLonLat([ pos.lng, pos.lat]) ) }) ] })}); var style = function() { return [ new ol.style.Style({ image: new ol.style.FontSymbol({ glyph: 'fa-star', form: 'marker', radius: 20, offsetY: -15, gradient: true, fontSize: 1.0, fontStyle: '', rotation: 0*Math.PI/180, rotateWithView: false, color: 'white', fill: new ol.style.Fill({ color: 'green', }), stroke: new ol.style.Stroke({ color: 'white', width: 2, }), }), stroke: new ol.style.Stroke({ width: 3, color: 'white' }), fill: new ol.style.Fill({ color: [255, 136, 0, 0.6] }) }), new ol.style.Style( { image: new ol.style.Shadow( { radius: 15, blur: 5, offsetX: 0, offsetY: 0, fill: new ol.style.Fill( { color: "rgba(0,0,0,0.5)" }) }), zIndex:-1 }) ]}; // Use a style function to redraw layer when font is load vector.setStyle (style); map.addLayer(vector); 

 <!-- FontAwesome --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- OL --> <link rel="stylesheet" href="//openlayers.org/en/latest/css/ol.css" /> <script type="text/javascript" src="//openlayers.org/en/latest/build/ol.js"></script> <link rel="stylesheet" href="//cdn.rawgit.com/Viglino/ol-ext/master/dist/ol-ext.css" /> <script type="text/javascript" src="//cdn.rawgit.com/Viglino/ol-ext/master/dist/ol-ext.min.js"></script> <script type="text/javascript" src="//cdn.rawgit.com/Viglino/ol-ext/master/dist/extra/FontAwesomeDef.js"></script> <!-- Map div --> <div id="map" style="width:600px; height:400px;"></div> <i class="fa fa-star"></i>