Discussion :

[Zebulon777]

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]

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]

Et voici un autre exemple

[Zebulon777]

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

[acarme]

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]

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]

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);