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

Question

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

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 元素的样式后，我发现它使用 "Icons" 作为字体系列和转义字符来选择符号（例如日历图标的“\f073”） ;因此我尝试了（使用 Semantic-UI 的 css 包含在我页面的头部部分）：

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

这只是写“\f073”作为标记。我尝试像在 HTML 中那样使用“”，但这显示了相同的行为（它写为“”）我也试过“\uf073”，这显示了一些死亡方块，表明一个未知字符。

有什么建议吗？

Answer 1

您需要使用字体属性将字体显式设置为 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 元素中分配的内容而不是完整代码。

例如，我试图使用代码 \f077 让 fa-chevron-down 出现。但是，要让图标出现在 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 设计图标实现这一目标的人可能会发现这很有用：

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 class 中找到图标代码点的值：

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

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

Use Semantic-UI (or Font Awesome) icons as markers in OpenLayers3

font-awesome

semantic-ui

openlayers-3