Afficher le 'name' des 'waypoints' d'un GPX

**randoz** · 17/11/2010, 22h06

Bonjour!

Je n'arrive pas à faire qqch de pourtant simple : afficher, à côté de chaque waypoint d'un fichier GPX, son 'name'. Je n'ai pas trouvé d'exemple tout fait, et mes tentatives d'adaptation de bouts de codes piqués dans la galerie ne marchent pas...

J'ai essayé d'afficher le nom par un "label" dans le style par défaut que j'associe ensuite à ma couche GPX lors du addLayer :

var styleRandos= new OpenLayers.StyleMap({
"default": new OpenLayers.Style(null, {
rules: [
new OpenLayers.Rule({
symbolizer: {
"Point": {
graphicName: "circle",
...
label: function(feature) { return feature.attributes.name; },

***
J'ai aussi essayé avec :
label: "${getName}",
et la fonction getName :
var context = {
getName: function(feature) {
return feature.attributes.name;
}
};

***
Et aussi avec preFeatureInsert dans le addLayer :

maRando[i]=VISU.getMap().addLayer("GPX",("Rando "+parent.tableauGPS[i][1]),monGPX,{

preFeatureInsert: function(f) {
if(f) {
OpenLayers.Util.extend(f.style, {
label: f.attributes.name,

***

Le tout sans succès... alors que feature.attributes.name est bien accessible lors du preFeatureInsert, puisqu'un alert() m'affiche ces noms, et alors que "label" affiche correctement un libelllé fixe comme 'test'... et alors que preFeatureInsert modifie bien le style des points que j'ai ajoutés par :
point = new OpenLayers.Feature.Vector(coord, null, stylePoint);
... mais pas des points insérés par le addLayer du GPX...

J'ai même chargé l'API étendue en pensant que les fonctions essayées étaient peut-être absentes de l'API standard, mais sans succès.

Bref, je mélange tout et suis persuadé qu'il y a une solution plus simple et évidente?! Merci!

**dgrichard** · 17/11/2010, 23h53

label: "${getName}" est le bon point de départ

Ta méthode getName() est correcte aussi

Maintenant il faut dire quand afficher le label (default, select, temporary ou delete) - ok : default (si je décrypte bien ton code)

Lors de la création de la couche, le style crée est-il bien lié à l'option styleMap ?

Code :

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

1
2
styleMap:styleRandos

L'exemple de base (qui agit sur du KML, mais c'est pareil) est là

Pour info, les autres symboliseurs sont :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
*  labelAlign,
* labelXOffset,
* labelYOffset,
*  labelBackgroundColor,
*  labelBorderColor,
*  labelBorderSize,
*  fontColor,
*  fontWeight,
*  fontSize,
*  fontFamily

**randoz** · 18/11/2010, 13h02

Merci! J'ai donc poursuivi avec "context" comme vous le recommandez. Les labels s'affichent bien, mais leur contenu est toujours "undefined". En fait, la fonction définie dans context n'est jamais appelée... Je ne sais pas s'il y a un problème à faire référence à context à partir d'une Rule? Context ne marche-t-il que directement à partir de Style?

(Pour voir le pb en action, c'est assez compliqué, il faut aller sur http://phokal.free.fr/index.php?seul...d=N7&scrollY=0 et cliquer sur l'icône "J1" en haut à gauche...)

Merci de votre aide!

**mga_geo** · 18/11/2010, 16h53

Il faut plusieurs minutes pour charger la page...
Est-il possible d'avoir une version simplifiée avec juste le code geoportail ?

**dgrichard** · 18/11/2010, 22h11

Ce code est fonctionnel :

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
        var gpx= viewer.getMap().addLayer("GPX",
                    {
                        'track.gpx.name':
                        {
                            'de':"Reise",
                            'en':"Trip",
                            'es':"Viaje",
                            'fr':"Ballade",
                            'it':"Viaggio"
                        }
                    },
                    "../data/Campomoro-Tizzano-Sartene_3029.gpx",
                    {
                        visibility:true,
                        minZoomLevel:10,
                        maxZoomLevel:13,
                        originators:[{
                            pictureUrl:'./img/tracegps.gif',
                            url:'http://www.tracegps.com/'
                        }],
                        styleMap:new OpenLayers.StyleMap({
                            "default": new OpenLayers.Style(
                                OpenLayers.Util.applyDefaults({
                                    fillColor: "#FFFF00",
                                    fillOpacity: 0.6,
                                    strokeColor: "#FF9900",
                                    strokeWidth: 2,
                                    graphicName: "triangle",
                                    pointRadius: 8,
                                    label:"${getName}",
                                    labelAlign: "rb",
                                    labelXOffset: -20,
                                    labelYOffset: -20,
                                    labelBackgroundColor: "yellow",
                                    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.6,
                                    strokeColor: "#FFFF00",
                                    strokeWidth: 4,
                                    pointRadius: 12
                                },OpenLayers.Feature.Vector.style["select"]))
                        }),
                        eventListeners:{
                            "loadend"              : function() {
                                if (this.maxExtent) {
                                    this.map.zoomToExtent(this.maxExtent);
                                }
                            },
                            "beforefeatureselected": changeRenderIntent,
                            "featureunselected"    : changeRenderIntent
                        }
                    },
                    {
                    }
        );

A toi de l'adapter

**randoz** · 18/11/2010, 23h38

Merci, je vais essayer d'adapter ça! En se passant des rules, ce sera peut-être plus clair!... Mais par contre, cette manière de faire ne permet pas de distinguer le style de "line" et de "point", donc oblige par exemple à avoir la même couleur de trait pour la trace et les waypoints? Sauf à tester si le type est wpt comme tu le fais pour renvoyer le "name", et modifier en ce cas la couleur...