Question

有没有办法使用Semantic UI或FontAwseome中的图标作为OpenLayers3中的标记图标？

OpenLayers具有功能样式文本，可按如下方式使用：

var blackFill   = new ol.style.Fill({color: 'black'})
var whiteStroke = new ol.style.Stroke({color: 'white', width: 1})
var iconText    = new ol.style.Text({font: "<my font>", text: "<some string>", fill: blackFill, stroke: whiteStroke })
var featureStyle = new ol.style.Style({ text: iconText });

在检查语义UI元素的样式后，我发现它正在使用＆＃34; Icons＆＃34;作为font-family和转义字符来选择符号（例如＆＃34; \ f073＆＃34;用于日历图标）;因此我尝试了（使用Semantic-UI＆c; css包含在我页面的头部）：

var iconText    = new ol.style.Text({font: "Icons", text: "\f073", fill: blackFill, stroke: whiteStroke })

这只是写＆＃34; \ f073＆＃34;作为标记。我尝试使用＆＃34;＆amp; #xf073＆＃34;，就像我在HTML中所做的那样，但这显示了相同的行为（它写了＆＃34;＆amp;＃xf073＆＃34;）我也试过了＃34; \ uf073＆＃34;，这显示了一些死亡方面表明一个未知的角色。

有什么建议吗？

Answer 1

您需要使用font属性将字体显式设置为FontAwesome，如下所示：

var style = new ol.style.Style({
  text: new ol.style.Text({
    text: '\uf041',
    font: 'normal 18px FontAwesome',
    textBaseline: 'Bottom',
    fill: new ol.style.Fill({
      color: 'white',
    })
  })
});

干杯！

Answer 2

即使有上述答案，我也无法正常工作。我的问题是我直接复制了FontAwesome通常在CSS元素中分配的内容而不是完整的代码。

例如，我尝试使用代码fa-chevron-down显示\f077。但是，要使图标显示在OpenLayers中，您需要使用\uf077。

Answer 3

如果您想使用Font Awesome图标的规范名称，可以使用fontawesome包：

var fa = require('fontawesome');
var style = new ol.style.Style({
  text: new ol.style.Text({
    text: fa('map-marker'),
    font: 'normal 18px FontAwesome',
    textBaseline: 'Bottom',
    fill: new ol.style.Fill({
      color: 'white'
    })
  })
});

Node.js示例：

$ node
> var fa = require("fontawesome");
> fa("map-marker")
''

Answer 4

我使用此代码将其与OpenLayers v6.0.1和Font Awesome 5.11.2配合使用：

var style = new ol.style.Style({
    text: new ol.style.Text({
        text: '\uf04b',                         // fa-play, unicode f04b
        font: '900 18px "Font Awesome 5 Free"', // font weight must be 900
    })
});

Answer 5

任何希望使用 Openlayers 6.x 和 Material Design Icons 实现这一目标的人都可能会发现这很有用：

const style = new Style({
  text: new Text({
    text: String.fromCodePoint(0xF0470), // the value of the CSS' content property (\ replaced with 0x)
    font: 'normal normal 400 24px "Material Design Icons"'
  }),
})

您可以在图标的 CSS 类中找到代码点的值：

.mdi-satellite::before {
  content: "\F0470"; // becomes String.fromCodePoint(0xF0470)
}

在OpenLayers3中使用Semantic-UI（或Font Awesome）图标作为标记

5 个答案: