5.2. Styling Grundlagen

Wenn man HTML-Elemente ausgestaltet, kann man zum Beispiel ein CSS wie das folgende verwenden:

.someClass {
    background-color: blue;
    border-width: 1px;
    border-color: olive;
}

.someClass ist ein Selektor (in diesem Fall einer, der jedwedes Element mit der Klasse "someClass" selektieren würde) und der mit geschwungen Klammern umschlossene Block stellt eine Gruppe von Schlüssel-Wert-Paaren dar: die eigentlichen Stildeklarationen.

5.2.1. Layer style

Ein Vektorlayer akzeptiert als Wert für die style-Konfigurationsoption eine Instanz von ol.style.Style, ein Array von ol.style.Style oder eine Funktion, in welcher ein unterschiedlicher Stil anhand eines Featureattributes zurückgegeben werden kann. Der Funktion werden zwei Argumente übergeben: Das zu stylende feature und die aktuelle resolution. Der Rückgabewert der Funktion ist ein Array von ol.style.Style-Objekten. Nehmen wir an, Sie wollten alle Features, die ein Attribut class mit Wert someClass besitzen, speziell stylen, so könnte Ihre Stylingfunktion wie folgt aussehen:

Schauen wir uns zunächst die verwendung eines statischen ol.style.Style Objektes an:

var layer = new ol.layer.Vector({
  source: new ol.source.Vector(),
  style: new ol.style.Style({
    // ...
  })
});

5.2.2. Style-Funktion

Ein Vektorlayer akzeptiert als Wert für die style-Konfigurationsoption aber auch eine Funktion, in welcher unterschiedliche Stile anhand von Featureattributen zurückgegeben werden kann.

Der Funktion werden wie bereits erwähnt zwei Argumente übergeben: Das zu stylende feature und die aktuelle resolution. Nehmen wir an, Sie wollten alle Features, die ein Attribut class mit Wert someClass besitzen, speziell stylen, so könnte Ihre Stylingfunktion wie folgt aussehen:

var layer = new ol.layer.Vector({
  source: new ol.source.Vector(),
  style: function(feature, resolution) {
    if (feature.get('class') === 'someClass') {
      // create styles...
      return styles;
    }
  },
});

5.2.3. Stildeklarationsböcke: Symbolizer

Das Äquivalent zu einem Block von Stildeklarationen aus CSS sind in ol3 sogenannte symbolizer. Üblicherweise handelt es sich hierbei um Instanzen der Klassen im Namensraum ol.style. Um Polygon-Features etwa mit blauem Hintergrund und einem 1-Pixel breiten Rahmen in olivgrün zu zeichnen, würde man zwei symbolizer verwenden können:

new ol.style.Style({
  fill: new ol.style.Fill({
    color: 'blue'
  }),
  stroke: new ol.style.Stroke({
    color: 'olive',
    width: 1
  })
});

Je nach Geometrietyp können verschiedene symbolizer verwendet werden. Linien verhalten sich weitestgehend wie Polygone, akzeptieren jedoch keine Füllung. Punkte können derzeit mittels ol.style.Circle (für Kreissymbole) oder ol.style.Icon (z.B. für png-Bilder) ausgestaltet werden. Zudem gibt es die Klasse ol.style.RegularShape. Schauen wir uns ein Beispiel mit Kreissymbolen an:

new ol.style.Circle({
  radius: 20,
  fill: new ol.style.Fill({
    color: '#ff9900',
    opacity: 0.6
  }),
  stroke: new ol.style.Stroke({
    color: '#ffcc00',
    opacity: 0.4
  })
});

5.2.4. ol.style.Style

Jedes ol.style.Style-Objekt hat vier Schlüssel: fill, image, stroke und text. Optional existiert eine zIndex-Eigenschaft. Die Stylefunktion gibt ein Array von ol.style.Style-Objekten zurück.

Angenommen alle Features sollten rot gezeichnet werden, außer denjenigen, die ein class-Attribut mit dem Wert "someClass" haben (und diese sollen wie oben blau gefüllt sein und einen 1-Pixel breiten Rand in oliv haben), so könnte die Funktion wie folgt aussehen.

style: (function() {
  var someStyle = [new ol.style.Style({
    fill: new ol.style.Fill({
      color: 'blue'
    }),
    stroke: new ol.style.Stroke({
      color: 'olive',
      width: 1
    })
  })];
  var otherStyle = [new ol.style.Style({
    fill: new ol.style.Fill({
      color: 'red'
    })
  })];
  return function(feature, resolution) {
    if (feature.get('class') === "someClass") {
      return someStyle;
    } else {
      return otherStyle;
    }
  };
}())

Wenn möglich, sollten die tatsächlichen Stil-Objekte außerhalb der Funktion möglichst nur einmal erzeugt werden, und in der Funktion nur Referenzen hierauf zurückgegeben werden (bessere Performance). Im obigen Beispiel wird hierzu eine closure verwendet.

Bemerkung

Auch Features akzeptieren in ihrer style-Konfigurationsoption eine Funktion. Jene wird mit der aktuellen resolution aufgerufen und erlaubt ein sehr indivuelles Stylen je Feature und Maßstab.

5.2.5. Pseudoklassen

CSS kennt das Konzept sogenannter Pseudoklassen, die die Anwendung von Stildeklaration weiter einschränkt um spezielle Kontexte abzubilden, die nicht oder nur schwerlich über klassische Selektoren abgebildet werden können (z.B. :hover oder :active).

In ol3 ist ein in mancher Hinsicht ähnliches Konzept mittels der style-Konfiguration ol.interaction.Select realisiert.

Ein Beispiel wäre etwa:

var select = new ol.interaction.Select({
  style: new ol.style.Style({
    fill: new ol.style.Fill({
      color: 'rgba(255,255,255,0.5)'
    })
  })
});

Nachdem wir die Basiskonzepte nun kennen, können wir uns nun der konkreten Ausgestaltung von Vektorlayern zuwenden.