Du style

Même résultat qu’avec Leaflet, on se retrouve avec les styles de base de la librairie. Les styles à appliquer sont les mêmes que pour la première carte : les lignes de la couleur officielle et de largeur 4, les stations avec le M.

Pareil qu’avec Leaflet, le style d’un calque peut s’appliquer à sa création à l’aide d’un attribut style, qui peut être une fonction prenant en paramètre une feature GeoJSON.

Mais contrairement à Leaflet, cet attribut est le même quel que soit le type des features que l’on rajoute.

Pour les lignes, le principe reste le même, la couleur est récupérée depuis la propriété « color » de la feature, mais ces réglages vont dans un objet ol.style.Stroke qui correspond à l’attribut « stroke » de l’objet ol.style.Style retourné par la fonction :

function(feature) {
	return new ol.style.Style({
		stroke: new ol.style.Stroke({
			width: 4,
			color: feature.get('color')
		})
	});
}

Pour les stations, on place un objet de type ol.style.Icon dans l’attribut « image » de l’objet retourné par la fonction. Avec OpenLayers, on ne peut pas régler précisément les dimensions de l’icône, mais on dispose seulement d’un réglage d’échelle. La fonction de style des stations est la suivante :

function(feature) {
	return new ol.style.Style({
		image: new ol.style.Icon({
			src: '/assets/files/images/symbole_metro.svg',
			scale: 0.15
		})
	});
}

Une fois ces deux fonctions ajoutées à l’attribut « style » de leur calque respectif, on obtient la carte suivante :