Frage Verwenden Sie Symbole für Semantic-UI (oder Font Awesome) als Markierungen in OpenLayers3


Gibt es eine Möglichkeit, Icons von Semantic UI oder FontAwseome als Markersymbole in OpenLayers3 zu verwenden?

OpenLayers bietet den Feature-Stil Text, der wie folgt verwendet werden kann:

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 });

Nachdem ich den Stil von Semantic UI-Elementen überprüft hatte, entdeckte ich, dass es "Icons" als Zeichensatzfamilie und Zeichen mit Escape-Zeichen verwendet, um das Symbol auszuwählen (z. B. "\ f073" für das Kalendersymbol); Deshalb habe ich versucht (mit Semantic-UI's CSS im Kopfbereich meiner Seite):

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

Dies schreibt "\ f073" lediglich als Marker. Ich habe versucht, "& # xf073" zu verwenden, wie ich es in HTML machen würde, aber das zeigt das gleiche Verhalten (schreibt "& # xf073") Ich habe auch "\ uf073" ausprobiert, das zeigte ein Quadrat des Todes, das auf einen unbekannten Charakter hinweist.

Irgendein Vorschlag ?


9
2018-01-07 00:12


Ursprung


Antworten:


Sie müssen die Schriftart explizit auf FontAwesome setzen, indem Sie die Font-Eigenschaft verwenden:

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',
    })
  })
});

Prost!


26
2018-01-13 22:24



Ich hatte Probleme damit, das funktioniert zu haben, sogar mit der obigen Antwort. Mein Problem war, dass ich den Inhalt, der normalerweise von FontAwesome zugewiesen wurde, direkt in ein CSS-Element anstelle des vollständigen Codes kopierte.

Zum Beispiel habe ich versucht zu bekommen fa-chevron-down mit dem Code erscheinen \f077. Um das Symbol in OpenLayers erscheinen zu lassen, müssen Sie es verwenden \uf077.


2
2017-09-15 19:54



Wenn Sie kanonische Namen von Font Awesome-Symbolen verwenden möchten, die Sie verwenden können Fontawesome Paket:

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 Beispiel:

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

2
2018-01-10 09:26