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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- coding: utf-8 -->
<head>
<title>Sélection sur plusieurs couches</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="http://api.ign.fr/geoportail/api?v=1.0-e&key=YOUR_KEY&instance=viewer&includeEngine=false&"></script>
<script type="text/javascript" src="http://api.ign.fr/geoportail/api/js/1.0/GeoportalExtended.js"></script>
<script type="text/javascript">
<!--
//
// le debug sous firefox avec firebug
if (typeof console != "object") {
var console = {
'log': function() {}
};
}
//
/* Variables */
viewer = null;
map = null;
var style2;
/* tableau de 3 GPX à ajouter à la carte*/
var tab_gpx=['3/circuit_pas_des_betes25_09_2010_allege.gpx','2/rando_st_denis18072010.gpx','1/rando_albine12092010_allege.gpx'];
function initGeoportalMap() {
geoportalLoadviewer("viewerDiv", "normal");
if (!viewer) {
console.log('new.instance.failed');
return;
}
map = viewer.getMap();
map.addControl(new OpenLayers.Control.LoadingPanel());
viewer.addGeoportalLayers(['GEOGRAPHICALGRIDSYSTEMS.MAPS:WMSC']);
//définitions du style 2
style2 = new OpenLayers.StyleMap({
"default": new OpenLayers.Style({
strokeColor: '#0000ff',
strokeWidth: 3
}),
"select": new OpenLayers.Style({
strokeColor: '#00ff00',
strokeWidth: 3
}),
"multi": new OpenLayers.Style({
strokeColor: '#ff0000',
strokeWidth: 10
})
});
//J'ajoute les GPX, je passe mon tableau à la fonction
add_gpx(tab_gpx);
}
/* Fonction qui ajoute les GPX avec un tableau de GPX passé en param)*/
function add_gpx(tab_gpx){
var montableau='';
var total=tab_gpx.length;
/*Solution d'ajout des GPX avec boucle for */
//Les options gpx
var optionsParcours = {styleMap: style2,visibility: true,minZoomLevel: 8,maxZoomLevel: 14,panMapIfOutOfView:false };
//Les options popup : ajout de la fonction clickme sur le 'onSelect'
var optionsPopup= { onSelect: function(f){clickme(f);} };
for(i=0;i<tab_gpx.length;i++){
//nom de la variable, gpx0,gpx1,gpx2
var id_gpx= 'gpx'+i;
// eval sert à créer dynamiquement les variables (gpx0,gpx1,gpx2)
eval( "var gpx" + i +" = viewer.getMap().addLayer('GPX', '"+ id_gpx +"', '/ign/datas/gpx/" + tab_gpx[i] + "',optionsParcours,optionsPopup)" );
}
//j'attache la fonction clic sur les 3 GPX
attache_click(gpx0,gpx1,gpx2);
}
/* Fonction qui sert à faire un select Feature sur plusieurs couches */
function attache_click(gpx0,gpx1,gpx2){
var selectControl = new OpenLayers.Control.SelectFeature([gpx0, gpx1, gpx2], {
onSelect: clickme
});
viewer.getMap().addControl(selectControl);
selectControl.activate();
viewer.getMap().setCenterAtLonLat(2.375736, 43.498586, 10);
}
/* Fonction qui devrait être appelée sur le clic de chaque GPX*/
function clickme(f) {
//console.log('ici');
alert("ok1");
if (f) {
alert("ok2");
//this.unselect(f);
}
}
</script>
</head>
<body onload="initGeoportalMap();">
<div id="viewerDiv" style="width:98%;height:95%;"></div>
</body>
</html> |
Clic sur GPX (Plusieurs)
Répondre avec citation
Envoyé par Eho47
Partager