Couche GPX , Marqueur et zIndex

**Al3x** · 01/04/2011, 13h38

Bonjour,

J'affiche une trace GPX sur une carte IGN , ensuite j'insère un marqueur de la sorte :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 //construction du marqueur de depart
position = new OpenLayers.Geometry.Point(<?= $itineraire->wayPoints[0]->longitude?>, <?=$itineraire->wayPoints[0]->latitude?>);
position.transform(OpenLayers.Projection.CRS84, VISU.projection);		
style = {externalGraphic:'<?= ASSETS_URL ?>/pics/marker.png', graphicWidth:24, graphicHeight:48, graphicZIndex: 3000};
pt = new OpenLayers.Feature.Vector(position, null, style);
	
//couche du marqueur
couche = new OpenLayers.Layer.Vector('Marqueurs');
couche.addFeatures([pt]);
	
VISU.getMap().addLayer(couche);

Mais pas moyen d'afficher le marqueur au dessus de la trace via le zIndex, j'ai meme essayer de mettre le marqueur quand la trace est chargée via un listener mais ca ne marche pas non plus...

Merci d'avance !

**mga_geo** · 01/04/2011, 14h39

C'est un bout de script php ?

J'utilise plutôt VISU.getMap().getProjection() que VISU.projection

**Al3x** · 01/04/2011, 18h03

C'est bien du Javascript dans lequel j'injecte des valeurs avec php, j'avais essayer avec .getProjection() mais cela ne changeait rien.

**dgrichard** · 03/04/2011, 12h38

Dans ton code, seuls les marqueurs sont montrés, dans quel ordre les couches sont insérées dans la carte (pas les marqueurs ou les traces dans leurs couches respectives) ?

**Al3x** · 03/04/2011, 23h20

Voici l'intégralité du code , j'ai trouvé cette page qui semble parler de ce pb de zIndex http://www.openlayers.org/dev/examples/ordering.html mais sans succès ...

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<script type="text/javascript">
  <!--
    function initGeoportalMap() {
    
    gpxloaded = false ;
    
	geoportalLoadVISU("GeoportalVisuDiv");

	if (VISU) {
		VISU.addGeoportalLayers(	['ORTHOIMAGERY.ORTHOPHOTOS:WMSC', 'GEOGRAPHICALGRIDSYSTEMS.MAPS:WMSC'],
             					 	{
             					 		'GEOGRAPHICALGRIDSYSTEMS.MAPS:WMSC':{visibility:true},global:{opacity:1},
             					 		'ORTHOIMAGERY.ORTHOPHOTOS:WMSC':{visibility:false},global:{opacity:1}
             					 	}

             					);
    }
        
 	VISU.openLayersPanel(false);
	VISU.openToolsPanel(false);
	
   	VISU.getMap().setCenter(VISU.viewerOptions.defaultCenter,VISU.viewerOptions.defaultZoom);
    
    var gpx = VISU.getMap().addLayer("GPX","Itinéraire","<?= $path ?>", {
	
	visibility:true, 
	zoomToExtent:true,
	styleMap:new OpenLayers.StyleMap({
        "default": new OpenLayers.Style(
            OpenLayers.Util.applyDefaults({
                fillColor: "#DD0000",
                fillOpacity: 1,
                strokeColor: "#DD0000",
                strokeWidth: 4,
                graphicZIndex: 1,
                graphicName: "triangle",
                pointRadius: 8,
                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 '';
                    }
                }
            }),
        "select": new OpenLayers.Style(
            OpenLayers.Util.applyDefaults({
                fillColor: "#FF9900",
                fillOpacity: 0.75,
                strokeColor: "#FFFF00",
                strokeWidth: 4,
                pointRadius: 12
            },OpenLayers.Feature.Vector.style["select"]))
    	}),
	eventListeners:{
			"loadend":function(){
			
				gpxloaded = true ;
				addmarker() ;
	
		          if (this.maxExtent) {
		            this.map.zoomToExtent(this.maxExtent);
		            this.setVisibility(true);
		          }
		        }
		      }
	
	}, {});
	
	
}

function addmarker() {
   	
	//construction du marqueur de depart
	position = new OpenLayers.Geometry.Point(<?= $itineraire->wayPoints[0]->longitude?>, <?=$itineraire->wayPoints[0]->latitude?>);
	position.transform(OpenLayers.Projection.CRS84, VISU.projection);		
	style = {externalGraphic:'<?= ASSETS_URL ?>/pics/marker.png', graphicWidth:24, graphicHeight:48, graphicZIndex: 20000};
	pt = new OpenLayers.Feature.Vector(position, null, style);

	//couche du marqueur
	couche = new OpenLayers.Layer.Vector('Marqueurs');
	couche.addFeatures([pt]);

	VISU.getMap().addLayer(couche);

}

-->
</script>

**dgrichard** · 04/04/2011, 13h33

As-tu regardé celle-là dont ton code semble vraiment s'inspirer ?

Le code que tu nous donnes mériterait de :

1/ ne plus contenir les code PHP, mais des vraies (ou fausses) valeurs (en fait une vraie page serait mieux);

2/ ta fonction getName() ne fait rien ...

3/ il y a un \${getName} au lieu d'un ${getName};

4/ pour les dessins, c'est le zIndex qui compte (dans l'exemple précédent, il est mis à 1 pour les wpt, à 0 sinon);

5/ pour les pictogrammes, c'est le graphicZIndex ;

6/ l'option zoomToExtent ne sert à rien ;

7/ l'exemple OpenLayers que tu pointes utilise :

Code :

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

1
2
rendererOptions: {yOrdering: true},

cela permet d'ordonner par abscisse l'ordre de superposition

et:

Code :

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

1
2
rendererOptions: {zIndexing: true},

cela permet d'ordonner la superposition tout court ...

**Al3x** · 04/04/2011, 22h16

Code javascript :

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
 
<!--
    function initGeoportalMap() {
 
    gpxloaded = false ;
 
	geoportalLoadVISU("GeoportalVisuDiv");
 
	if (VISU) {
		VISU.addGeoportalLayers(	['ORTHOIMAGERY.ORTHOPHOTOS:WMSC', 'GEOGRAPHICALGRIDSYSTEMS.MAPS:WMSC'],
             					 	{
             					 		'GEOGRAPHICALGRIDSYSTEMS.MAPS:WMSC':{visibility:true},global:{opacity:1},
             					 		'ORTHOIMAGERY.ORTHOPHOTOS:WMSC':{visibility:false},global:{opacity:1}
             					 	}
 
             					);
    }
 
 	VISU.openLayersPanel(false);
	VISU.openToolsPanel(false);
 
   	VISU.getMap().setCenter(VISU.viewerOptions.defaultCenter,VISU.viewerOptions.defaultZoom);
 
var gpx = VISU.getMap().addLayer("GPX","Itinéraire","http://la-trace.com/itineraires/fileserve/4d9858638bc8d.gpx", {
 
	visibility:true, 
	styleMap:new OpenLayers.StyleMap({
        "default": new OpenLayers.Style(
            OpenLayers.Util.applyDefaults({
                fillColor: "#DD0000",
                fillOpacity: 1,
                strokeColor: "#DD0000",
                strokeWidth: 4,
                graphicName: "triangle",
                pointRadius: 8,
                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 '';
                    }
                }
            }),
        "select": new OpenLayers.Style(
            OpenLayers.Util.applyDefaults({
                fillColor: "#FF9900",
                fillOpacity: 0.75,
                strokeColor: "#FFFF00",
                strokeWidth: 4,
                pointRadius: 12
            },OpenLayers.Feature.Vector.style["select"]))
    	}),
		eventListeners:{
			"loadend":function(){
 
				gpxloaded = true ;
				addmarker() ;
 
		          if (this.maxExtent) {
		            this.map.zoomToExtent(this.maxExtent);
		            this.setVisibility(true);
		          }
		        }
		      }
 
	}, {});
 
 
}
 
function addmarker() {
 
	//construction du marqueur de depart
	position = new OpenLayers.Geometry.Point(5.547304000000, 43.523876000000);
	position.transform(OpenLayers.Projection.CRS84, VISU.projection);		
	style = {externalGraphic:'http://la-trace.com/assets/pics/marker.png', graphicWidth:24, graphicHeight:48};
	pt = new OpenLayers.Feature.Vector(position, null, style);
 
	//couche du marqueur
	couche = new OpenLayers.Layer.Vector('Marqueurs');
	couche.addFeatures([pt]);
 
	VISU.getMap().addLayer(couche);
 
}
 
-->

Merci pour ton aide dgrichard. Voici le code nettoyé, bon défintivement je ne comprends pas comment ni a quel objet doit on intervenir pour regler le zIndex... et ca m'énerve de bloquer sur un truc aussi bête

**mga_geo** · 05/04/2011, 12h11

J'ai fait une page à base du code précédent et j'ai bien l'affichage du marqueur:

http://atlasnw.free.fr/geoportail/ex.../la_trace.html

**Al3x** · 05/04/2011, 12h16

Merci pour ton aide mais le pb n'est pas l'affichage du marqueur mais bel et bien sa position par rapport à la trace, il est en dessous.

Je suis en train de finaliser un système pour déplacer le marqueur le long de la trace et ca fonctionne d'ailleurs (grace a ce forum...) mais il est tjs en dessous de la trace

**dgrichard** · 05/04/2011, 21h24

As-tu au moins essayer de jouer avec renderOptions:zOrdering ?

**Al3x** · 05/04/2011, 21h50

Envoyé par dgrichard

As-tu au moins essayer de jouer avec renderOptions:zOrdering ?

zOrdering ?? ca y est je comprends plus rien la, je croyais que c'était soit un yOrdering pour gerer dans l'ordre d'ajout ou zIndexing pour le gérer à la main...

sinon oui je ne me permettrai pas dire que je ne comprends pas sans avoir essayé, j'ai mis en prod tel quel , je finirai bien par mettre ce foutu marqueur par dessus la trace !

**dgrichard** · 05/04/2011, 22h03

Envoyé par Al3x

zOrdering ?? ca y est je comprends plus rien la, je croyais que c'était soit un yOrdering pour gerer dans l'ordre d'ajout ou zIndexing pour le gérer à la main...

zOrdering ou yOrdering ne semblent pas fonctionner dans ce cas ...

Envoyé par Al3x

sinon oui je ne me permettrai pas dire que je ne comprends pas sans avoir essayé, j'ai mis en prod tel quel , je finirai bien par mettre ce foutu marqueur par dessus la trace !

Par contre, si tu échanges le zIndex de la couche gpx avec celui de la couche ... cà marche

:

Code :

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

1
2
3
4
    var zi= gpx.getZIndex();
    gpx.setZIndex(couche.getZindex());
    couche.setZIndex(zi);

**Al3x** · 07/04/2011, 21h33

gggrrrr ca ne marche pas non plus j'ai une erreur comme quoi gpx n'a pas la méthode getZIndex() !

je me suis alors dit qu'il fallait mettre l'api en extended malheureusement c'est pareil.

**dgrichard** · 07/04/2011, 21h42

Envoyé par Al3x

gggrrrr ca ne marche pas non plus j'ai une erreur comme quoi gpx n'a pas la méthode getZIndex() !

je me suis alors dit qu'il fallait mettre l'api en extended malheureusement c'est pareil.

As-tu passer la variable gpx en paramètre de la méthode addmarker() (c'est la couche créée en ligne 24 de ton code exemple) ?
As-tu bien rajouté les trois lignes après

Code :

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

VISU.getMap().addLayer(couche);

?

**Al3x** · 08/04/2011, 15h29

j'essaye de changer le scope de gpx et aussi en le passant en paramètre de addmarker()

Rien y fait j'ai toujours cette erreur :

Code :

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

Uncaught TypeError: Object #<Object> has no method 'getZindex'

La quête du zIndex est longue mais je ne perds pas encore espoir ! :-)

**dgrichard** · 08/04/2011, 16h44

Tu peux essayer ce contournement (déplacement de la fonction addmarker) :

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
...
var gpx= VISU.getMap().addLayer(
"GPX","Itinéraire","http://la-trace.com/itineraires/fileserve/4d9858638bc8d.gpx", {
    ...
    addmarker: function() {
      //construction du marqueur de depart
      position = new OpenLayers.Geometry.Point(<?= $itineraire->wayPoints[0]->longitude?>, <?=$itineraire->wayPoints[0]->latitude?>);
      position.transform(OpenLayers.Projection.CRS84, VISU.projection);        
      style = {externalGraphic:'<?= ASSETS_URL ?>/pics/marker.png', graphicWidth:24, graphicHeight:48, graphicZIndex: 20000};
      pt = new OpenLayers.Feature.Vector(position, null, style);

      //couche du marqueur
      couche = new OpenLayers.Layer.Vector('Marqueurs');
      couche.addFeatures([pt]);

      VISU.getMap().addLayer(couche);
      var zi= this.getZIndex();
      this.setZIndex(couche.getZindex());
      couche.setZIndex(zi);
    }
},{});

addmarker() devient une méthode de la couche GPX. Le this représente la variable gpx

**mga_geo** · 08/04/2011, 18h09

J'essaye de suivre en mettant à jour http://atlasnw.free.fr/geoportail/ex.../la_trace.html

**dgrichard** · 08/04/2011, 21h01

Envoyé par mga_geo

J'essaye de suivre en mettant à jour http://atlasnw.free.fr/geoportail/ex.../la_trace.html

J'ai juste oublié un détail (corrigé par mga_geo

)

:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
        eventListeners:{
            "loadend":function(){
            
                gpxloaded = true ;
                this.addmarker() ;
    
                  if (this.maxExtent) {
                    this.map.zoomToExtent(this.maxExtent);
                    //inutile:this.setVisibility(true);
                  }
                }
              }

et une typo (getZIndex avec un I majuscule) :

Code :

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

1
2
this.setZIndex(couche.getZIndex());

**mga_geo** · 08/04/2011, 21h58

L'erreur de capitalisation affectait aussi l'autre exemple:
http://atlasnw.free.fr/geoportail/ex..._trace_v0.html

Je ne vois pas très bien la différence avec l'autre code http://atlasnw.free.fr/geoportail/ex.../la_trace.html en terme de dessus/dessous.