OpenLayers Extension ol:ext FontSymbol 格式不正确

Question

我正在尝试使用 ol:ext 基于 OpenLayers 的简单标记创建地图。当通过 FontSymbol 定义标记的样式时，周围的形式看起来不像 example，而是一个奇怪的变形三角形。

我是一个完全使用 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>

OpenLayers Extension ol:ext FontSymbol 格式不正确

OpenLayers Extension ol:ext FontSymbol form incorrect

javascript

openlayers