[OpenLayers] Tracer des cercles proportionnels à partir de polygones

Sans remettre en cause ses grandes qualités, la librairie OpenLayers ne propose pas (ou peu) d’outil de cartographie thématique « automatique » nativement. Très souvent, c’est au développeur de préparer OpenLayers pour afficher les objets géographiques selon la valeur de tel ou tel champ attributaire.

Au delà de l’utilisation combinée des OpenLayers.Rule et des OpenLayers.Filter.Comparison qui permettent de « simuler » la variable visuelle « Couleur », vous allez donc vite vous sentir à l’étroit. Pour remédier à cela, nous allons aujourd’hui ajouter une nouvelle variable visuelle à OpenLayers (en simulant des cercles proportionnels) : la « Taille ».

Logique de fonctionnement

Dans le cadre d’un projet mené en 2010, j’ai été amené à écrire un bout de code permettant de dessiner des cercles proportionnels en partant d’une couche de polygones déjà chargée par OpenLayers. Pour comprendre le bout de code qui va vous être proposé, voici en pseudo-code la logique qui va être suivie :

Prévoir une couche vide avec new OpenLayers.Layer.Vector() qui recevra les symboles proportionnels
Préparer le style de cette couche avec new OpenLayers.Style() et la propriété pointRadius

Parcourir les objets de la couche avec une boucle for
{
	Construire le centroïde du polygone avec la fonction getCentroid()
	Récupérer le ou les attributs qui nous intéressent et en déduire le rayon du figuré proportionnel
	Rassembler le tout dans une "entité vectorielle" avec new OpenLayers.Feature.Vector()
	Stocker cette "entité vectorielle" dans un array
}

Vider la couche des symboles proportionnels avec destroyFeatures()
Ajouter l'array "d'entités vectorielles" à la couche vide avec addFeatures()

Code source JS

Voici maintenant le bout de code javascript qui va servir d’exemple. Dans cet exemple, on crée une carte, on charge un fichier GML et on redessine les symboles proportionnels selon un des champs.

La petite astuce réside dans la définition d’une sorte de constante, à savoir un « rayon maximum », qui permet de faire en sorte que la taille des cercles proportionnels soit adaptée à celle de la carte et et qui permet dans un second temps de modifier cette taille globale des cercles ! Pour savoir quelle valeur mettre en argument, on peut commencer par essayer la plus petite valeur du champ à représenter…

// PREPARATION DE LA COUCHE "SP"

var style_SP = new OpenLayers.Style({pointRadius:'${RAYON}',strokeColor:'black',strokeWidth:0.5,strokeOpacity:1.0,fillOpacity:0.8,fillColor:'#4281D4'});
var style_couche_SP = new OpenLayers.StyleMap({'default':style_SP});
var couche_SP = new OpenLayers.Layer.Vector('Couche SP',{styleMap:style_couche_SP});
carte.addLayer(couche_SP);

// PEUPLEMENT DE LA COUCHE "SP"

function peupler_couche_SP(couche,champ,rayon_max)
{
	// DETERMINATION DE LA VALEUR MAXIMALE
	var valeurs = [];
	for(var i in couche['features'])
	{
		valeurs.push(couche['features'][i]['attributes'][champ]);
	}
	var valeur_max = Math.max.apply(Math,valeurs);

	// CONSTRUCTION DES ENTITES VECTORIELLES
	var centroides = [];
	for(var i in couche['features'])
	{
		var centroide = couche['features'][i]['geometry'].getCentroid();
		var rayon = Math.sqrt(couche['features'][i]['attributes'][champ])*(rayon_max/(Math.sqrt(valeur_max)));
		centroides.push(new OpenLayers.Feature.Vector(centroide,{RAYON:rayon}));
	}
	couche_SP.destroyFeatures();
	couche_SP.addFeatures(centroides);
}

Démonstration

http://labs.adrienvh.fr/blog/ol_symboles_proportionnels/