Comment écrire quelque chose à des coordonnées précises ?

**Zebulon777** · 05/06/2013, 15h27

Bonjour tout le monde,
Je m'explique, après une recherche sur la carte, j'affiche une punaise et je voudrai que le nom de la ville soit affiché à côté ou au-dessus de cette punaise.

Voici mon code actuel :

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
        // On crée le point
        var punaise = new OpenLayers.Feature.Vector(
          geocoded_commune_center, 
          {name:resultat.features[0].attributes.address.places[0].name}, // on récupère le nom de la ville géocodé (au cas où il faudrait s'en resservir)
          { // Style du point
//            externalGraphic:'http://blog.zelieux.com/wp-content/uploads/2010/10/punaise.png', 
            externalGraphic:'./Images/Recherche2_32x32.png', 
            pointRadius:25
          }
        );

		WVilleRecherchee = resultat.features[0].attributes.address.places[0].name;
		
        // on ajoute le point à la couche
        commune_layer.addFeatures([punaise]);
        WZoomRecherche = 12;
        // On recentre la carte sur le résultat
        map.setLonLatCenter(geocoded_commune_center.x, geocoded_commune_center.y, WZoomRecherche, false, false);

Merci d'avance pour votre aide.

**acarme** · 06/06/2013, 15h52

Il est possible de le faire comme sur cet exemple : http://api.ign.fr/tech-docs-js/examp...simple6.1.html

en créant un StyleMap de ce type :

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
styleMap:new OpenLayers.StyleMap({
                                    "default": new OpenLayers.Style(
                                        OpenLayers.Util.applyDefaults({
                                            fillColor: "#FFFF00",
                                            fillOpacity: 0.75,
                                            strokeColor: "#FF9900",
                                            strokeWidth: 2,
                                            graphicZIndex: "${zIndex}",
                                            graphicName: "triangle",
                                            pointRadius: 8,
                                            //see context object below
                                            label:"${getName}",
                                            labelAlign: "rb",
                                            labelXOffset: -20,
                                            labelYOffset: -20,
                                            labelBackgroundColor: "#FFFF00",
                                            labelBorderColor: "black",
                                            labelBorderSize: "1px",
                                            fontColor: "black",
                                            fontWeight: "bold",
                                            fontSize: "12px",
                                            fontFamily: "Courier New, monospace"
                                        },OpenLayers.Feature.Vector.style["default"]),{
                                            context:{
                                                getName: function(f) {
                                                    if (f.attributes['typeName']=='wpt') {
                                                        return f.attributes['name'];
                                                    }
                                                    return '';
                                                }
                                            }
                                        }),
                                    "select": new OpenLayers.Style(
                                        OpenLayers.Util.applyDefaults({
                                            fillColor: "#FF9900",
                                            fillOpacity: 0.75,
                                            strokeColor: "#FFFF00",
                                            strokeWidth: 4,
                                            pointRadius: 12
                                        },OpenLayers.Feature.Vector.style["select"]))
                                }),

**Zébulon-21** · 06/06/2013, 19h16

Et voici un autre exemple

**Zebulon777** · 07/06/2013, 08h38

Désolé, mais je ne comprends pas : où est-ce qu'on met les coordonnées ?

**acarme** · 07/06/2013, 09h11

En fait l'idée était d'afficher un label (le nom de ta commune) dans le style d'un point (de ta punaise)..

Je n'ai peut être pas bien compris ton besoin..

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

Envoyé par Zebulon777

Désolé, mais je ne comprends pas : où est-ce qu'on met les coordonnées ?

Avec les réserves levées par acarme (si ton besoin est bien compris) :

les coordonnées d'ancrage de ton texte sont celle du point auquel il est attaché. A savoir, dans ton exemple : geocoded_commune_center.

Ensuite, tu peux déplacer ton texte par rapport à ce point en jouant sur les propriétés de style : labelXOffset et labelYOffset que tu vas rajouter au style de ton point.

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

Purée, c'est super compliqué pour un truc tout simple !

Lorsque je créé le point avec ma punaise, il n'y a pas un moyen simple pour lui adjoindre le texte de la recherche ?
Un truc du genre :

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
        // On crée le point
        var punaise = new OpenLayers.Feature.Vector(
          geocoded_commune_center, 
          {name:resultat.features[0].attributes.address.places[0].name}, // on récupère le nom de la ville géocodé (au cas où il faudrait s'en resservir)
          { // Style du point
//            externalGraphic:'http://blog.zelieux.com/wp-content/uploads/2010/10/punaise.png', 
            externalGraphic:'./Images/Recherche2_32x32.png', 
            pointRadius:25
          }
        );

		WVilleRecherchee = resultat.features[0].attributes.address.places[0].name;
		
        // on ajoute le point à la couche
        commune_layer.addFeatures([punaise]) + WVilleRecherchee ;
        WZoomRecherche = 10;
        // On recentre la carte sur le résultat
        map.setLonLatCenter(geocoded_commune_center.x, geocoded_commune_center.y, WZoomRecherche, false, false);

**gcebelieu** · 07/06/2013, 13h13

Il n' y a rien de compliqué, tu as déjà la solution dans ton code : le texte que tu souhaites afficher est porté par l'attibut name de ton feature. Du coup, tu n'as qu'à rajouter un champ label à ton style qui va être calculé à partir de la valeur de l'attribut :

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
       // On crée le point
        var punaise = new OpenLayers.Feature.Vector(
          geocoded_commune_center, 
          {
             name:resultat.features[0].attributes.address.places[0].name
          },
          // Style du point
          new OpenLayers.Style(
          { 
            externalGraphic:'./Images/Recherche2_32x32.png', 
            pointRadius:25,
            label: ${getLabel}
          },
          context : {
            getLabel: function(feature) {
              return feature.attributes.name ;
            }
          })
        );

       WVilleRecherchee = resultat.features[0].attributes.address.places[0].name;
		
        // on ajoute le point à la couche
        commune_layer.addFeatures([punaise]);
        WZoomRecherche = 10;
        // On recentre la carte sur le résultat
        map.setLonLatCenter(geocoded_commune_center.x, geocoded_commune_center.y, WZoomRecherche, false, false);

Remarque : c'est ce que tu faisais déjà dans la thread :

http://www.developpez.net/forums/d13...-contour-noir/

**Zebulon777** · 07/06/2013, 13h43

Mince, ça ne fonctionne pas, j'ai une erreur sur la ligne LABEL et je ne trouve pas d'où ça vient.

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
        // On crée le point
        var punaise = new OpenLayers.Feature.Vector(
          geocoded_commune_center, 
          {
			  name:resultat.features[0].attributes.address.places[0].name
		  }, // on récupère le nom de la ville géocodé (au cas où il faudrait s'en resservir)
		  
//////          { // Style du point
////////            externalGraphic:'http://blog.zelieux.com/wp-content/uploads/2010/10/punaise.png', 
//////            externalGraphic:'./Images/Recherche2_32x32.png', 
//////            pointRadius:25
//////          }

		new OpenLayers.Style(
          { 
            externalGraphic:'./Images/Recherche2_32x32.png', 
            pointRadius:25,
            label:${getLabel}
          },
          context:{
            getLabel: function(feature) {
              return feature.attributes.name;
            }
          })
        );

**acarme** · 07/06/2013, 14h18

Essaie de mettre des "" comme ça : label:"${getLabel}"

**Zebulon777** · 07/06/2013, 14h23

Ca change pas grand chose : l'erreur se déplace sur CONTEXT.
J'ai essayé aussi avec des apostrophes et ça ne change rien
Je ne suis pas doué avec ces API... rhaaalala...

**acarme** · 07/06/2013, 14h52

As-tu plus de détail sur l'erreur ?

Au cas où, essaie de modifier ta fonction de cette manière :
getLabel: function(feature) {
return feature.attributes['name'];
}

**gcebelieu** · 07/06/2013, 15h54

Envoyé par Zebulon777

Mince, ça ne fonctionne pas, j'ai une erreur sur la ligne LABEL et je ne trouve pas d'où ça vient.

j'ai trouvé : c'est ma faute, il manque un niveau d'accolades autour de context :

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
        // On crée le point
        var punaise = new OpenLayers.Feature.Vector(
          geocoded_commune_center, 
          {
			  name:resultat.features[0].attributes.address.places[0].name
		  }, // on récupère le nom de la ville géocodé (au cas où il faudrait s'en resservir)
		  
		new OpenLayers.Style(
          { 
            externalGraphic:'./Images/Recherche2_32x32.png', 
            pointRadius:25,
            label:${getLabel}
          },
          {
          context:{
            getLabel: function(feature) {
              return feature.attributes.name;
            }
          }
          })
        );

ça devrait le faire...

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

Oups, désolé, je vais t'embêter, ça passe je n'ai plus d'erreur avec le code suivant, par contre, je n'ai plus du tout ni la punaise, ni le nom de la commune recherchée.

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
// On crée le point
        var punaise = new OpenLayers.Feature.Vector(
          geocoded_commune_center, 
          {
			  name:resultat.features[0].attributes.address.places[0].name
		  }, // on récupère le nom de la ville géocodé (au cas où il faudrait s'en resservir)
		  
		new OpenLayers.Style(
          { 
            externalGraphic:'./Images/Recherche2_32x32.png', 
            pointRadius:25,
            label:'${getLabel}'
          },
          {
          context:{
            getLabel: function(feature) {
              return feature.attributes.name;
            }
          }
          })
        );

**gcebelieu** · 10/06/2013, 17h59

OK. Je pense avoir compris :

le constructeur OpenLayers.Feature.Vector peux prendre trois paramètres en entrée, la geometrie, les attributs et le style :

Code :

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

1
2
3
4
5
6
feature= new OpenLayers.Feature.Vector(
  geometry, 
  attributs,
  style
);

le troisième paramètre est de type OpenLayers.Feature.Vector.style et pas de type OpenLayers.Style que l'on essayait de lui faire passer et qui permet de faire passer un label calculé.

Du coup, pour faire passer ton label calculé, il faut passer ton objet de style au niveau de la couche en utilisant l'option styleMap :

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
  // On crée le point
  var punaise = new OpenLayers.Feature.Vector(
          geocoded_commune_center, 
          {
	      name:resultat.features[0].attributes.address.places[0].name
          }
  );

  // creation du style
  var style= new OpenLayers.Style(
          { 
            externalGraphic:'./Images/Recherche2_32x32.png', 
            pointRadius:25,
            label:'${getLabel}'
          },
          {
            context:{
              getLabel: function(feature) {
                return feature.attributes.name;
              }
            }
          }
  ) ;

  // creation de la couche :
  var commune_layer= new OpenLayers.Layer.Vector(
    "Nom de la couche",
    {
      styleMap: style,
      ... // autres options
    }
  ) ;

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

C'est fou que ce soit aussi compliqué !

En tout cas, merci de votre aide et de votre patience, mais ce ne fonctionne toujours pas.
Et c'est même pire car, la recherche ne fonctionne plus du tout.
Le sablier s'affiche et reste tel quel.

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
  // On crée le point
  var punaise = new OpenLayers.Feature.Vector(
          geocoded_commune_center, 
          {
	      name:resultat.features[0].attributes.address.places[0].name
          }
  );

  // creation du style
  var StyleRecherche = new OpenLayers.Style(
          { 
            externalGraphic:'./Images/Recherche2_32x32.png', 
            pointRadius:25,
            label:'${getLabel}'
          },
          {
            context:{
              getLabel: function(feature) {
                return feature.attributes.name;
              }
            }
          }
  ) ;

  // creation de la couche :
  var commune_layer= new OpenLayers.Layer.Vector(
    "Nom de la couche",
    {
      styleMap: StyleRecherche,
 //     ... // autres options
    }
  ) ;
		WVilleRecherchee = resultat.features[0].attributes.address.places[0].name;

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

Est-ce que tu peux nous montrer l'intégralité de ton code ?
Car je ne sais pas comment tu crées la couche vecteur commune_layer. Du coup, je t'avais proposé un exemple de création avec l'option styleMap, mais c'est à adapter à ton code.

Aussi, je ne sais pas à quoi sert ta variable WVilleRecherchee... bref, je manque de contexte pour t'aider.

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

Ca va être compliqué, mais tu as toute la partie concernée.
La variable ne sert à rien pour le moment, c'est juste la mise en mémoire du nom de la ville.

Voici le code tel qu'il fonctionne :

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
        commune_layer.removeAllFeatures();
        
        // On crée le point
        var punaise = new OpenLayers.Feature.Vector(
          geocoded_commune_center, 
          {name:resultat.features[0].attributes.address.places[0].name}, // on récupère le nom de la ville géocodé (au cas où il faudrait s'en resservir)
          { // Style du point
//            externalGraphic:'http://blog.zelieux.com/wp-content/uploads/2010/10/punaise.png', 
            externalGraphic:'./Images/Recherche2_32x32.png', 
            pointRadius:20
          }
        );
        // on ajoute le point à la couche
        commune_layer.addFeatures([punaise]);
        WZoomRecherche = 10;
        // On recentre la carte sur le résultat
        map.setLonLatCenter(geocoded_commune_center.x, geocoded_commune_center.y, WZoomRecherche, false, false);
        
        alert ('ville trouvée : ' + resultat.features[0].attributes.address.places[0].name);

Avec ce code, la punaise s'affiche correctement au coordonnées voulues.

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

Envoyé par Zebulon777

Ca va être compliqué, mais tu as toute la partie concernée.

Pas tout à fait : il me manque la création de la couche commune_layer pour pouvoir t'indiquer comment passer le style avec les labels.

A défaut, tu peux essayer d'écrire, après la création :

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
// creation du style
  var style= new OpenLayers.Style(
          { 
            externalGraphic:'./Images/Recherche2_32x32.png', 
            pointRadius:25,
            label:'${getLabel}'
          },
          {
            context:{
              getLabel: function(feature) {
                return feature.attributes.name;
              }
            }
          }
  ) ;
  commune_layer.style= style ;
  // ou eventuellement :
  // commune_layer.styleMap= style ;

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

Voila ce qui te manquait :

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
	commune_layer = new OpenLayers.Layer.Vector('communes', {displayInLayerSwitcher:false}); // NEIL : En mettant  display InLayerSwitcher à false la couche n'apparaitra pas dans le gestionnaire de couche
	map.addLayer(commune_layer);
...
...
...
        commune_layer.removeAllFeatures();
        
        // On crée le point
        var punaise = new OpenLayers.Feature.Vector(
          geocoded_commune_center, 
          {name:resultat.features[0].attributes.address.places[0].name}, // on récupère le nom de la ville géocodé (au cas où il faudrait s'en resservir)
          { // Style du point
            externalGraphic:'./Images/Recherche2_32x32.png', 
            pointRadius:20
          }
        );
        // on ajoute le point à la couche
        commune_layer.addFeatures([punaise]);
        WZoomRecherche = 10;
        // On recentre la carte sur le résultat
        map.setLonLatCenter(geocoded_commune_center.x, geocoded_commune_center.y, WZoomRecherche, false, false);
        
        alert ('ville trouvée : ' + resultat.features[0].attributes.address.places[0].name);

Voila.
Par contre, je ne comprends pas la modif que tu me demandes ?

Comment écrire quelque chose à des coordonnées précises ?

IGN API Géoportail

Discussions similaires

Partager

Partager