Lettres blanches, Contour noir ?

**Zebulon777** · 30/05/2013, 11h08

Salut la compagnie,

Pour afficher le noms des principales villes, j'utilise le code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
	var Style_villes = new OpenLayers.StyleMap(
		{
			"default": new OpenLayers.Style(
				{
				pointRadius:0,
				fillText:'black',
				label:'${label}', 
		//      labelBackgroundColor:'black', 
				fontFamily:'Comic Sans MS',
				fontSize:'12',
				fontWeight:'bold',
				fontColor:'white'
				}, 
				{
					context: {
						label: function(feature) 
						{
							return feature.attributes.NOM_COMM;
						}
					}
				}
			)
		}
	);
  
	var layer_villes = new OpenLayers.Layer.Vector(
		"Principales villes", 
		{
			styleMap:Style_villes, 
			projection: map.displayProjection,
			strategies: [new OpenLayers.Strategy.Fixed()],
			protocol: new OpenLayers.Protocol.HTTP(
				{
					url: "./KML/centroide_capitale_prefecture.geojson",
					format: new OpenLayers.Format.GeoJSON()
				}
			)
		}
	);
	map.addLayer(layer_villes);
	iv.setLayerVisibility('Principales villes', true); // INDISPENSABLE POUR NE PAS AFFICHER ou AFIICHER LA COUCHE.

Mon souci est qu'on me demande d'utiliser une autre police pour avoir les lettres blanches et le contour noir.
J'ai bien trouvé ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
.monTexte{
text-shadow:
#FF0000 1px 1px 1px,
#FF0000 -1px 1px 1px,
#FF0000 -1px -1px 1px,
#FF0000 1px -1px 1px;
}

Mais je n'arrive pas à l'utiliser.

Donc si vous avez une solution, je suis preneur...

Merci d'avance.
Donc si

**gcebelieu** · 30/05/2013, 23h44

Bonjour,

l'exemple suivant :

http://openlayers.org/dev/examples/v...with-text.html

utilise des propriétés particulières pour définir le style des labels. Notamment :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
...
                    fontColor: "${favColor}",
                    fontSize: "12px",
                    fontFamily: "Courier New, monospace",
                    fontWeight: "bold",
                    labelAlign: "${align}",
                    labelXOffset: "${xOffset}",
                    labelYOffset: "${yOffset}",
                    labelOutlineColor: "white",
                    labelOutlineWidth: 3
...

tu devrais pouvoir trouver ton bonheur là dedans.

**Zebulon777** · 31/05/2013, 13h02

Bon, ben, j'ai essayé et ça ne fonctionne pas.

**gcebelieu** · 31/05/2013, 15h28

Peux tu nous montrer tes essais infructueux ?

A priori, l'exemple OpenLayers que je t'ai cité a l'air de bien fonctionner.

**Zebulon777** · 05/06/2013, 10h38

Désolé d'avoir tardé à répondre, mais j'étais sur un autre projet.
Voici donc ce que j'ai fait :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
	var Style_villes = new OpenLayers.StyleMap(
		{
			"default": new OpenLayers.Style(
				{
				pointRadius:0,
				fillText:'black',
				label:'${label}', 
		//      labelBackgroundColor:'black', 
				fontFamily:'Comic Sans MS',
				fontSize:'12',
				fontWeight:'bold',
				fontColor:'white',
				labelXOffset: "${xOffset}",
				labelYOffset: "${yOffset}",
				labelOutlineColor: "black",
				labelOutlineWidth: 3				}, 
				{
					context: {
						label: function(feature) 
						{
							return feature.attributes.NOM_COMM;
						}
					}
				}
			)
		}
	);
  
	var layer_villes = new OpenLayers.Layer.Vector(
		"Principales villes", 
		{
			styleMap:Style_villes, 
			projection: map.displayProjection,
			strategies: [new OpenLayers.Strategy.Fixed()],
			protocol: new OpenLayers.Protocol.HTTP(
				{
					url: "./KML/centroide_capitale_prefecture.geojson",
					format: new OpenLayers.Format.GeoJSON()
				}
			)
		}
	);

Et j'ai ensuite varié les plaisirs avec :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
				labelXOffset: 5,
				labelYOffset: 5,
				labelOutlineColor: "black",
				labelOutlineWidth: 3				},

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
				labelXOffset: "5",
				labelYOffset: "5",
				labelOutlineColor: "black",
				labelOutlineWidth: 3				},

etc...

Au secours...

**gcebelieu** · 07/06/2013, 10h22

OK, j'ai compris :

l'exemple OpenLayers que je t'ai cité repose sur la version 2.12 (ou bientôt 2.13) qui amène les propriétés suivantes, par rapport à la version 2.11 :

labelXOffset,
labelYOffset,
labelOutlineColor, // couleur du contour des lettres
labelOutlineWidth // épaisseur du contour des lettres

et quelques autres que l'on peut appliquer à des labels.

Or, la version 2.0.3 de l'API repose sur OpenLayers 2.11 et ne sait donc pas traiter ces propriétés... ou presque, car :

la version 2.0.3 de l'API amène des propriétés spécifiques (non connues d'OpenLayers 2.11) :

labelXOffset,
labelYOffset,
labelBorderColor, // couleur du tour du rectangle englobant du label
labelBorderSize, // épaisseur du tour du rectangle englobant du label
labelBackgroundColor // couleur de remplissage du rectangle englobant du label

Du coup, la version 2.1.0 de l'API, qui reposera sur OpenLayers 2.12 bénéficiera de la réunion de ces propriétés, à savoir :

labelXOffset,
labelYOffset,
labelOutlineColor,
labelOutlineWidth,
labelBorderColor,
labelBorderSize,
labelBackgroundColor

Tu peux d'ores et déjà faire tes tests avec la future version 2.1.0 qui est déployée sur depot.ign.fr en pré-test :

http://depot.ign.fr/geoportail/api/d...T/Geoportal.js

et tu devrais avoir le résultat escompté.

**Zebulon777** · 07/06/2013, 11h13

Merci.
Donc, il ne reste plus qu'à attendre que l'IGN mette à jour ses API.
On sait pour quand c'est prévu ?

**gcebelieu** · 07/06/2013, 12h59

On espère pourvoir la livrer cet été. En tous cas, on y travaille.

**Zebulon777** · 10/06/2013, 15h19

Merci.
Alors on va patienter jusque là et bon courage à vous.

Comment saura-t-on que la mise à jour a été faite ?

**gcebelieu** · 10/06/2013, 18h04

Envoyé par Zebulon777

Merci.
Alors on va patienter jusque là et bon courage à vous.

Comment saura-t-on que la mise à jour a été faite ?

en venant régulièrement sur le forum ou en consultant le blog du site api.ign.fr

**cmail** · 10/06/2013, 21h47

Ce qui serait bien, Zébulon777, quand une de tes questions te parait résolue, c'est de cliquer sur le bouton "résolu" en bas à droite du fil....
Cela nous permet de mieux suivre les différentes interventions...
Merci.

**Zebulon777** · 11/06/2013, 10h38

Oui, oui, je le fais toujours, mais là, je considère que ce n'est pas encore résolu...

**gcebelieu** · 11/06/2013, 21h40

Envoyé par Zebulon777

Oui, oui, je le fais toujours, mais là, je considère que ce n'est pas encore résolu...

Pas de problèmes. Mais est-ce que tu as essayé avec la version 2.1-SNAPSHOT qui est en tests sur depot.ign.fr ?

**Zebulon777** · 12/06/2013, 08h07

Heuuu...
Je ne sais pas ni ce que c'est, ni comment on fait...

**gcebelieu** · 12/06/2013, 08h44

Dans ta page, il faut remplacer le chargement de l'api :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<script type="text/javascript" src="http://api.ign.fr/geoportail/api/js/[version]/Geoportal.js"></script>

par :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<script type="text/javascript" src="http://depot.ign.fr/geoportail/api/develop/geoportail/api/js/2.1.0-SNAPSHOT/Geoportal.js"></script>

**Zebulon777** · 19/06/2014, 10h37

Je relance ce sujet pour savoir s'il serait possible d'avoir l'affichage des villes comme avec la nouvelle interface tout en gardant l'ancien thème (Legacy) ?

Nom : Police.png
Affichages : 111
Taille : 27,1 Ko

Nom : Police.png
Affichages : 111
Taille : 27,1 Ko

**jrenard** · 19/06/2014, 10h56

Simplement en ajoutant les propriétés gérant l'outline de tes labels dans le styleMap, comme conseillé par Gilles à l'époque :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
var Style_villes = new OpenLayers.StyleMap(
		{
			"default": new OpenLayers.Style(
				{
				...
				labelOutlineColor: "#000000",
                		labelOutlineWidth: 3
				}, 
		...
	);

Est-ce bien là ta question ?

**Zebulon777** · 19/06/2014, 11h20

Impeccable.
J'ai du passer à côté "à l'époque".
Donc merci à Gilles pour la solution et merci à toi de me l'avoir rappelé.

Lettres blanches, Contour noir ?

IGN API Géoportail

Discussions similaires

Partager

Partager