OpenLayers Extension ol：ext FontSymbol格式不正确

Question

我正在尝试使用ol：ext基于OpenLayers的简单标记创建地图。 通过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>