Расширение OpenLayers ol: ext FontSymbol неверная форма

Question

Я пытаюсь создать карту с простым маркером на основе OpenLayers с ol: ext.При определении стиля маркера с помощью FontSymbol окружающая форма выглядит не так, как в примере , а похожа на странно преобразованный треугольник.

Я совершенно новичок в использовании OpenLayers, поэтомуЯ не уверен, есть ли проблема в другом месте (например, я действительно не уверен насчет определения ol.Feature), но проблема приводит к визуализации формы и изменению преобразования треугольников при выборе другого (значения из API-Docs ), поэтому я думаю, что с этим что-то связано.

Соответствующая часть моего кода:

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

Радиус должен быть числом (или позиция может быть ошибочной), и шрифт должен быть загружен до создания стиля (или символ не будет нарисован).

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>