Zoom de l'API Javascript

**shyfu** · 03/08/2015, 11h26

Après avoir ajouter une message console je m’aperçois que le refresh du trace ne fonctionne pas non plus. Ce n'est pas la bonne syntaxe?

**shyfu** · 03/08/2015, 13h19

Problème résolut pour le chargement de la carte.

Maintenant, console.log(lastFeatureAdded); me retourne :

Code :

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

1
2
O…s.F…e.V…r.O…s.C…s.initialize {layer: O…s.L…r.V…r.O…s.C…s.initialize, lonlat: null, data: Object, id: "OpenLayers.Feature.Vector_608", geometry: f…}attributes: ObjectcreatePopup: ()data: Objectgeometry: fid: "OpenLayers.Feature.Vector_608"layer: OpenLayers.Layer.Vector.OpenLayers.Class.initializelonlat: nullrenderIntent: "default"state: nullstyle: null__proto__: c
quickstart.js:133

Et console.log(lastFeatureAdded.geometry.x); me retourne
Undefinied.

**lboulanger** · 03/08/2015, 14h08

Ce n'est pas très simple de vous aider à débugger à distance, mais pourriez-vous nous dire :

1) ce que vous retourne la console si vous essayez cette fois

Code :

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

console.log(lastFeatureAdded.geometry);

(à la place du console.log(lastFeatureAdded.geometry.x); précédent) ?

2) si je comprends bien, les "features" que vous ajoutez via votre fichier GPX sont des points, est-ce bien ça ?

Merci

**shyfu** · 03/08/2015, 14h36

Bonjour,

En effet, je vais essayer de détailler au mieux l'application afin d’êtres plus claire (ce n'est pas gagné).

Je reçois les informations de trajet par un logiciel externe qui les enregistre sous fichier texte (txt)

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
  3.00	48.569309	6.534391	239.00	1.560	999993.0	999993.0	999993	999993	999993.00	11.020
  6.00	48.569291	6.534417	239.00	1.690	999993.0	999993.0	999993	999993	999993.00	11.120
  9.00	48.569276	6.534447	239.00	1.610	999993.0	999993.0	999993	999993	999993.00	11.060
 12.00	48.569260	6.534474	239.00	1.410	999993.0	999993.0	999993	999993	999993.00	10.950
 15.00	48.569235	6.534498	239.00	1.520	999993.0	999993.0	999993	999993	999993.00	10.840
 18.00	48.569224	6.534529	239.00	1.430	999993.0	999993.0	999993	999993	999993.00	10.800
 21.00	48.569210	6.534560	239.00	1.560	999993.0	999993.0	999993	999993	999993.00	10.740
 24.00	48.569190	6.534590	239.00	1.790	999993.0	999993.0	999993	999993	999993.00	10.750
 27.00	48.569171	6.534623	239.00	1.810	999993.0	999993.0	999993	999993	999993.00	10.870
 30.00	48.569154	6.534660	239.00	1.790	999993.0	999993.0	999993	999993	999993.00	10.920
 33.00	48.569136	6.534694	239.00	1.630	999993.0	999993.0	999993	999993	999993.00	10.960
 36.00	48.569120	6.534728	239.00	1.580	999993.0	999993.0	999993	999993	999993.00	10.930
 39.00	48.569103	6.534761	239.00	1.380	999993.0	999993.0	999993	999993	999993.00	10.910
 42.00	48.569086	6.534795	239.00	1.400	999993.0	999993.0	999993	999993	999993.00	10.980
 45.00	48.569069	6.534828	239.00	1.030	999993.0	999993.0	999993	999993	999993.00	10.980
 48.00	48.569053	6.534861	239.00	1.230	999993.0	999993.0	999993	999993	999993.00	10.920
 51.00	48.569037	6.534887	239.00	1.800	999993.0	999993.0	999993	999993	999993.00	10.890
 54.00	48.569020	6.534912	239.00	2.090	999993.0	999993.0	999993	999993	999993.00	10.910
 57.00	48.569004	6.534943	239.00	2.200	999993.0	999993.0	999993	999993	999993.00	10.910
 60.00	48.568987	6.534975	239.00	2.110	999993.0	999993.0	999993	999993	999993.00	10.890
 63.00	48.568971	6.535007	239.00	2.060	999993.0	999993.0	999993	999993	999993.00	10.890
 66.00	48.568955	6.535040	239.00	1.960	999993.0	999993.0	999993	999993	999993.00	10.850
 69.00	48.568939	6.535077	239.00	1.990	999993.0	999993.0	999993	999993	999993.00	10.800
 72.00	48.568924	6.535116	239.00	2.020	999993.0	999993.0	999993	999993	999993.00	10.810
 75.00	48.568908	6.535150	239.00	1.890	999993.0	999993.0	999993	999993	999993.00	10.810
 78.00	48.568893	6.535180	239.00	2.130	999993.0	999993.0	999993	999993	999993.00	10.820
 81.00	48.568878	6.535212	238.85	2.160	999993.0	999993.0	999993	999993	999993.00	10.830
 84.00	48.568864	6.535248	238.42	2.020	999993.0	999993.0	999993	999993	999993.00	10.870
 87.00	48.568850	6.535283	238.00	1.960	999993.0	999993.0	999993	999993	999993.00	10.920
 90.00	48.568836	6.535318	238.00	2.160	999993.0	999993.0	999993	999993	999993.00	10.980
 93.00	48.568823	6.535352	238.00	2.180	999993.0	999993.0	999993	999993	999993.00	11.010
 96.00	48.568806	6.535381	238.00	2.290	999993.0	999993.0	999993	999993	999993.00	11.050
 99.00	48.568787	6.535407	238.00	2.290	999993.0	999993.0	999993	999993	999993.00	11.120
102.00	48.568767	6.535433	238.00	2.190	999993.0	999993.0	999993	999993	999993.00	11.180
105.00	48.568742	6.535458	238.00	2.170	999993.0	999993.0	999993	999993	999993.00	11.240
108.00	48.568717	6.535483	238.00	2.300	999993.0	999993.0	999993	999993	999993.00	11.150
111.00	48.568693	6.535506	238.00	1.970	999993.0	999993.0	999993	999993	999993.00	11.110
114.00	48.568669	6.535523	238.00	2.180	999993.0	999993.0	999993	999993	999993.00	11.030
117.00	48.568645	6.535541	238.00	2.270	999993.0	999993.0	999993	999993	999993.00	10.990
120.00	48.568622	6.535561	238.00	2.070	999993.0	999993.0	999993	999993	999993.00	10.950
123.00	48.568600	6.535584	238.00	2.040	999993.0	999993.0	999993	999993	999993.00	11.230
126.00	48.568578	6.535606	238.00	1.990	999993.0	999993.0	999993	999993	999993.00	11.010
129.00	48.568556	6.535628	237.84	1.920	999993.0	999993.0	999993	999993	999993.00	11.090

Dans ma page web, j'appel donc le JS de géoportail mais également un script PHPqui me permet de "transformer" ce fichier texte en fichier GPX. A noter que j'ai également un fichier xml, encore une fois générer en extérieur qui me sert de fichier de configuration

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
<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico"/>
	<link rel="stylesheet" type="text/css" href="./css/style_map.css" media="all">
  </head>
  <body>
		<div id="viewerDiv"></div>
		<div id="example_explain"></div>
		<div id='code'><a href="js/quickstart.js" alt="quickstart" id="example_jscode" target="_blank"></a></div>
		<script type="text/javascript" src="http://api.ign.fr/geoportail/api/js/latest/GeoportalExtended.js"></script>
		<script type="text/javascript" src="js/utils.js"></script>     
		<script type="text/javascript" src="js/i18n/quickstart.js"></script>
		<script type="text/javascript" src="js/quickstart.js"></script>			
	
  </body>
</html>

Script

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
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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
<?php
$s_nomTrajet;	//Déclaration des variables utiles au programme, a lire dans  xml
$i_minlat;
$i_minlon;
$i_maxlat;
$i_maxlon;
$i_type;
$i_nbData;	
$i_reflat;
$i_reflon;
$i_reftype;
$b_trace;

									
$xml = simplexml_load_file('param.xml');		//Création de l'objet xml (string)
echo "Donnees xml lues <br>";


$fichier_xml = $xml->xpath('//TRAJET');			//Création d'un tableau a partir de l'objet


foreach ($fichier_xml as $info) 				//Lecture du tableau et de ses cellules
{		
	$b_trace=$info->Trace;
	$s_nomTrajet=$info->Nom_trajet;				//Recuperation des parametres dans le xml
	$i_minLatitude=$info->Latitude_min;				
	$i_maxLatitude=$info->Latitude_max;
	$i_minLongitude=$info->Longitude_min;
	$i_maxLongitude=$info->Longitude_max;
	$i_premiereLigne=$info->Premiere_ligne;
	$i_premiereColonne=$info->Premiere_colonne;
	$i_refLatitude=$info->Ref_latitude;
	$i_refLongitude=$info->Ref_longitude;
	$i_refType=$info->Ref_type;
	$i_type=$info->Type;
	$i_nbData=$info->NbData;
} 	
if($b_trace==1)								//Si la trace a été demandée, on execute la suite
{	
//Supression des escpaces dans la recuperation//
$s_nomTrajet=str_replace(array("\r\n","\n"),'',$s_nomTrajet);		
$i_minLatitude=str_replace(array("\r\n","\n"),'',$i_minLatitude);		
$i_maxLatitude=str_replace(array("\r\n","\n"),'',$i_maxLatitude);	
$i_minLongitude=str_replace(array("\r\n","\n"),'',$i_minLongitude);	
$i_maxLongitude=str_replace(array("\r\n","\n"),'',$i_maxLongitude);
$i_premiereLigne=str_replace(array("\r\n","\n"),'',$i_premiereLigne);		
$i_premiereColonne=str_replace(array("\r\n","\n"),'',$i_premiereColonne);		
$i_refLatitude=str_replace(array("\r\n","\n"),'',$i_refLatitude);	
$i_refLongitude=str_replace(array("\r\n","\n"),'',$i_refLongitude);	
$i_refType=str_replace(array("\r\n","\n","\t"),'',$i_refType);	
$i_type=str_replace(array("\r\n","\n"),'',$i_type);		
$i_nbData=str_replace(array("\r\n","\n"),'',$i_nbData);		
	
// Lit un fichier, et le place dans une chaîne//
$filename = "C:/wamp/www/test_php/compteur.txt";				//Lits le fichier pour connaitre la taille en octets
$fichierGPX = fopen('DATA2.gpx', 'w+');							//Ouverture du fichier gpx en ecriture ou le créer si inéxistant
$fichierTXT = fopen('compteur.txt', 'r');						//Ouverture du fichier txt en lecture
 
 
//	EN COUR
/*	 while(!feof($fichierTXT)){								//Tant que l'on n'est pas a la fin du fichier txt
	
	
		$s_donnesLues=fgets($fichierTXT, 124);				//On recupere 1 ligne a la fois, delimitation : 124 octets (max variable) ou retour a la ligne
		//fseek($fichierTXT,89);								//Remet l'offset a 89


	  $i=0;
	  $ts_tab = explode("\t", $s_donnesLues);				//Découpage de la ligne par tabulation
	  for($i=0;$i<11;$i++){
	  echo $ts_tab[$i];
	  }
	  echo "<br>";
	}*/
	  
 
 
// $s_donnesLues = fread($fichierTXT, filesize($filename));		//Stockage de la lecture dans une chaine
 
//Ecriture dans fichier gpx//									//Création de l'objet date pour la description
fputs($fichierGPX,"<?xml version=\"1.0\"?>\r\n");				//Ecriture de l'entete du fichier GPX
fputs($fichierGPX,"<gpx>\r");
fputs($fichierGPX,"\t<metadata>\r");


fputs($fichierGPX,"\t\t<bounds minlat=\"");				//Centralisation du zoom de la carte 
fputs($fichierGPX,$i_minLatitude);	
fputs($fichierGPX,"\" minlon=\"");	
fputs($fichierGPX,$i_minLongitude);	
fputs($fichierGPX,"\" maxlat=\"");	
fputs($fichierGPX,$i_maxLatitude);	
fputs($fichierGPX,"\" maxlon=\"");	
fputs($fichierGPX,$i_maxLongitude);	
fputs($fichierGPX,"\"/>\r\n");
fputs($fichierGPX,"\t</metadata>\r");
	

//$s_donnesLues=str_replace(array("\r\n","\r"),"\n",$s_donnesLues);	//Généralisation des retours a la ligne
//$ts_line= explode("\n",$s_donnesLues);								//Decoupage en nombre de ligne




while(!feof($fichierTXT)){								//Tant que l'on n'est pas a la fin du fichier txt
$s_donnesLues=fgets($fichierTXT, 124);				//On recupere 1 ligne a la fois, delimitation : 124 octets (max variable) ou retour a la ligne					
$ts_tab = explode("\t", $s_donnesLues);				//Découpage de la ligne par tabulation
fputs($fichierGPX,"\t\t<wpt lat=\"");
fputs($fichierGPX,$ts_tab[$i_refLatitude]);
fputs($fichierGPX,"\" lon=\"");
fputs($fichierGPX,$ts_tab[$i_refLongitude]);
fputs($fichierGPX,"\">\r\n");
fputs($fichierGPX,"\t\t\t<sym>");
fputs($fichierGPX,$i_type);
fputs($fichierGPX,"</sym>\r\n");
$refWrite=0;
for($i_demande=$i_refType;$i_demande<($i_refType+$i_nbData);$i_demande++)	//On génère le fichier GPX avec la bonne syntaxe
{
	fputs($fichierGPX,"\t\t\t<desc>");
	//Ecriture de l'information demandée//
	fputs($fichierGPX,$ts_tab[$i_refType+$refWrite]); 
	fputs($fichierGPX,"</desc>\r\n");
	$refWrite++;
}
	fputs($fichierGPX,"\t\t</wpt>\r\n");


}


/*
for($i_line=$i_premiereLigne;$i_line<count($ts_line);$i_line++)
{
	$ts_tab = explode("\t",$ts_line[$i_line]);									//Découpage de la ligne par tabulation
	// données GPS - génération des points//
	fputs($fichierGPX,"\t\t<wpt lat=\"");
	fputs($fichierGPX,$ts_tab[$i_refLatitude]);
	fputs($fichierGPX,"\" lon=\"");
	fputs($fichierGPX,$ts_tab[$i_refLongitude]);
	fputs($fichierGPX,"\">\r\n");
	fputs($fichierGPX,"\t\t\t<sym>");
	fputs($fichierGPX,$i_type);
	fputs($fichierGPX,"</sym>\r\n");
	
	$refWrite=0;
	for($i_demande=$i_refType;$i_demande<($i_refType+$i_nbData);$i_demande++)	//On génère le fichier GPX avec la bonne syntaxe
	{
		fputs($fichierGPX,"\t\t\t<desc>");
		//Ecriture de l'information demandée//
		fputs($fichierGPX,$ts_tab[$i_refType+$refWrite]); 
		fputs($fichierGPX,"</desc>\r\n");
		$refWrite++;
	}
	fputs($fichierGPX,"\t\t</wpt>\r\n");
}*/



//Definition d'un trajet//
fputs($fichierGPX,"\t<trk>\r\n");						//Balise de début d'un trajet
fputs($fichierGPX,"\t<name>\"");
fputs($fichierGPX,$s_nomTrajet);						//Definition du nom du trajet
fputs($fichierGPX,"\"</name>\r\n");		
fputs($fichierGPX,"\t\t<trkseg>\r\n");					//Balise de début du tracé
 
 
 
 
 
 
 
 fclose($fichierTXT);
 $fichierTXT = fopen('compteur.txt', 'r');
 while(!feof($fichierTXT))						//Tant que l'on n'est pas a la fin du fichier txt
 {							
$s_donnesLues=fgets($fichierTXT, 124);			//On recupere 1 ligne a la fois, delimitation : 124 octets (max variable) ou retour a la ligne
$ts_tab = explode("\t", $s_donnesLues);			//Découpage de la ligne par tabulation
	// données GPS - génération du tracé//
fputs($fichierGPX,"\t\t\t<trkpt lat=\"");
fputs($fichierGPX,$ts_tab[$i_refLatitude]);
fputs($fichierGPX,"\" lon=\"");
fputs($fichierGPX,$ts_tab[$i_refLongitude]);
fputs($fichierGPX,"\">\r\n");
$refWrite=0;
	for($i_demande=$i_refType;$i_demande<($i_refType+$i_nbData);$i_demande++)
	{
		fputs($fichierGPX,"\t\t\t\t<desc>");
		//Ecriture de l'information demandée
		fputs($fichierGPX,$ts_tab[$i_refType+$refWrite]); //fichierGPX.Write(" ");
		fputs($fichierGPX,"</desc>\r\n");
		$refWrite++;
	}
	fputs($fichierGPX,"\t\t\t</trkpt>\r\n");

}
 
 
 
 
 
 
 /*
$ts_nbLines = count($ts_line);
for($i_line=$i_premiereLigne;$i_line<$ts_nbLines;$i_line++)
{
	$ts_tab = explode("\t", $ts_line[$i_line]);	//Découpage de la ligne par tabulation
	// données GPS - génération du tracé//
	fputs($fichierGPX,"\t\t\t<trkpt lat=\"");
	fputs($fichierGPX,$ts_tab[$i_refLatitude]);
	fputs($fichierGPX,"\" lon=\"");
	fputs($fichierGPX,$ts_tab[$i_refLongitude]);
	fputs($fichierGPX,"\">\r\n");
	
	$refWrite=0;
	for($i_demande=$i_refType;$i_demande<($i_refType+$i_nbData);$i_demande++)
	{
		fputs($fichierGPX,"\t\t\t\t<desc>");
		//Ecriture de l'information demandée
		fputs($fichierGPX,$ts_tab[$i_refType+$refWrite]); //fichierGPX.Write(" ");
		fputs($fichierGPX,"</desc>\r\n");
		$refWrite++;
	}
	fputs($fichierGPX,"\t\t\t</trkpt>\r\n");
//}

*/

//Ecritude du pied de page du fichier GPX
fputs($fichierGPX,"\t\t</trkseg>\r\n");	//Balise de fin du tracé
fputs($fichierGPX,"\t</trk>\r\n");	//Balise de fin d'un trajet
fputs($fichierGPX,"</gpx>");

//Fermeture des fichiers utilisés
fclose($fichierTXT);
fclose($fichierGPX);
}
?>

Le fichier texte étant mis a jour toute les secondes, j'aimerais recentrer la carte sur le dernier point ajouté dans le fichier JS de la carte

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
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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
//Clé API Géoportail
var APIkey= "g3fkg6ryrgrx16e8uwbnhtdk";
viewer= null;
var mousePositionCtrl = null;	//variable pour localisation souris

 //Charge l'application quand les informations de loadAPI sont chargées
function initMap() {
    //Options
    var options= {
        mode:'normal',
		territory:'FXX',
		proxy:'assets/proxy.php?url='
    };

    viewer= new Geoportal.Viewer.Default('viewerDiv', OpenLayers.Util.extend(
        options,
        //Variable contenant la configuration des clefs API remplie par <Geoportal.GeoRMHandler.getConfig>
        window.gGEOPORTALRIGHTSMANAGEMENT===undefined? {'apiKey':APIkey} : gGEOPORTALRIGHTSMANAGEMENT)
    );
	document.getElementById('viewerDiv').addEventListener('mousemove',getMousePosition);
    if (!viewer) {
        // problem ...
        OpenLayers.Console.error(OpenLayers.i18n('new.instance.failed'));
        return;
    }
	
	//
	mousePositionCtrl = viewer.getMap().getControlsByClass('Geoportal.Control.MousePosition')[0]; 
   
	//Style de couche
	var myStyleMap = new OpenLayers.StyleMap({
		"default": new OpenLayers.Style({
			'pointRadius': 10,
			'strokeColor': "${getColor}",
			'fillColor': '#ff0000'
		 },
		 {// Définition du contexte définissant la couleur de remplissage des ponctuels
			context:{getColor: getColorFromName}
		 })
	});
	
	//
   	function getColorFromName(feature) {
		if (feature.attributes.desc == 'circuit_litoral_montagne') {
			return "red";
		} else {
			return "blue";
		}
	}
   
   
   
   
   
   
   
   
   
   
   function getImageURL(f){
    // pour les waypoints, on va chercher l'url
    if(f.attributes.typeName == "wpt"){
        if(f.attributes.sym == "depart"){
        	return "./img/depart.png"; //lien vers votre icône
        }else if(f.attributes.sym == "arrivee"){
        	return "./img/arrivee.png"; //lien vers votre icône
		}else if(f.attributes.sym == "toure"){
        	return "./img/toure.png"; //lien vers votre icône
        }else{
        	return "";
        }
        // etc
    }else{ // sinon, on retourne une chaine vide (pour les tracés ou les routes)
        return "";
    }
}

var myStyleMap = new OpenLayers.StyleMap({
	"default": new OpenLayers.Style({
		'pointRadius': 5,
		'strokeColor': "red",
		'fillColor': '#ff0000',
		'externalGraphic': "${getUrl}",
		'graphicHeight':30, 		
		'graphicHeight':30,
		'graphicXOffset':0,
		'graphicYOffset':-30,
	},{
		// Définition du contexte définissant les url d'images
		context:{getUrl:getImageURL}
     })
});


     
   
   
   
   
   
   
    //Couches
	viewer.addGeoportalLayer('GEOGRAPHICALGRIDSYSTEMS.MAPS' , {visibility:false, opacity:1});
	viewer.addGeoportalLayer('GEOGRAPHICALGRIDSYSTEMS.PLANIGN' , {visibility:true, opacity:1});	
    
	



	//Chargement tracé test 
	viewer.getMap().addLayer(
	'GPX',
	'Trace',
	'DATA2.gpx',
	{
		visibility:true,
		styleMap:myStyleMap,
	}
);
	//var myGpxLayer = viewer.getMap().getLayersByName("Trace")[0];	//On recupere le tracé
	//refreshGpxLayer(myGpxLayer);
	
	var myVar;
	
	myVar = setInterval(function () {refreshGpxLayer()}, 3000);
	
	function refreshGpxLayer() {								//On rafraichis le tracé a interval régulié
	//Centrage et zoom de la carte en fonction du dernier point ajouté
	var myGpxLayer = viewer.getMap().getLayersByName("Trace")[0];	//On recupere le tracé
	var myGpxFeatures = myGpxLayer.features;
	var lastFeatureAdded = myGpxFeatures[myGpxFeatures.length - 1];
	viewer.getMap().setCenterAtLonLat(lastFeatureAdded.geometry.x,lastFeatureAdded.geometry.y);
	console.log(lastFeatureAdded.geometry);

    
}
}











/*
		(function iS(){
			var execJs= function eJs(){
			//refresh convertisseur
			function refreshGpxLayer(){
				console.log("test");
			}
			
			
			
			//Permet de d'appeller la fonction tout les 1000 millisecondes (1 seconde)
			setInterval(refreshGpxLayer, 2000);
};
$(execJs);
})();*/











	//Fonction souris
	function getMousePosition() {
    var lat = parseInt(mousePositionCtrl.latInput.value);
    var lon = parseInt(mousePositionCtrl.lonInput.value); 
   // console.log('lat:'+lat+' ; lon:'+lon);		//Ecriture longitude/latitude dans la console
}


	//Fonction qui charge la configuration de la carte en fonction de la clé
function loadAPI() {

    //On attend que les classes soient chargées
    if (checkApiLoading('loadAPI();',['OpenLayers','Geoportal','Geoportal.Viewer','Geoportal.Viewer.Default'])===false) {
        return;
    }
    
    Geoportal.GeoRMHandler.getConfig([APIkey], null,null, {
        onContractsComplete: initMap
    });
}

//Assignation de la fonction à appeler lors de la levée de l'évènement "onload"
window.onload= loadAPI;

Je vous met mon projet en pièce jointe si cela n'est pas claire.

Pour information, votre test de demande me ressort en console :

Code :

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

1
2
{id: "OpenLayers.Geometry.MultiLineString_2958", components: Array[1], bounds: O…s.B…s.O…s.C…s.initialize}bounds: OpenLayers.Bounds.OpenLayers.Class.initializecomponents: Array[1]id: "OpenLayers.Geometry.MultiLineString_2958"__proto__: cCLASS_NAME: "OpenLayers.Geometry.MultiLineString"componentTypes: Array[1]0: "OpenLayers.Geometry.LineString"length: 1__proto__: Array[0]split: (q,x)arguments: nullcaller: nulllength: 2name: ""prototype: OpenLayers.Geometry.MultiLineString.OpenLayers.Class.split__proto__: ()<function scope>splitWith: (q,x)arguments: nullcaller: nulllength: 2name: ""prototype: OpenLayers.Geometry.MultiLineString.OpenLayers.Class.splitWith__proto__: ()<function scope>__proto__: cCLASS_NAME: "OpenLayers.Geometry.Collection"addComponent: (b,a)addComponents: (c)calculateBounds: ()clone: ()componentTypes: nullcomponents: nulldestroy: ()distanceTo: (j,k)equals: (e)getArea: ()getCentroid: (h)getComponentsString: ()getGeodesicArea: (b)getGeodesicLength: (b)getLength: ()getVertices: (b)initialize: (a)intersects: (e)move: (b,e)removeComponent: (a)removeComponents: (b)resize: (e,a,c)rotate: (e,b)transform: (f,c)__proto__: Object
quickstart.js:133 f {id: "OpenLayers.Geom

**mga_geo** · 03/08/2015, 15h06

http://mga.alwaysdata.net/geoportail...quickstart.php

Le script convertisseur.php doit fournir du gpx ?

Charger jquery juste pour recharger une page, c'est luxueux !

**shyfu** · 03/08/2015, 15h43

Oui c'est le but, j'avais oublier une ligne pour recharger le GPX:

Code :

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

myGpxLayer.refresh();

Maintenantr ça, ca fonctionne.

J'essaie présent d'appel ma fonction refreshGpxLayer situé dans le fichier JS a partir de convertisseur.php. Cela me permettra de recharger le tracé a chaque modification du GPX. Avez-vous une piste? Merci encore

**lboulanger** · 03/08/2015, 15h56

Je me permets de revenir au centrage sur le dernier point ajouté.

Il semblerait que le dernier élément qui soit ajouté soit une polyligne (multiLineString) et non plus un point : cela pourrait correspondre à la ligne composée de l'ensemble des points précédemment ajoutés.

Votre objet lastFeatureAdded.geometry n'a donc pas de x et y comme attendu, mais plutôt un attribut "bounds", qui contient 4 coordonnées correspondant aux extrémités d'une étendue géographique, sur laquelle vous pourriez zoomer à chaque rechargement.

Si c'est bien normal que vous récupériez systématiquement cette polyligne comme dernier élément, vous pouvez alors utiliser la fonction zoomToExtent() pour zoomer sur cette étendue.
Ainsi vous auriez :

Code :

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

1
2
3
4
5
	var myGpxFeatures = myGpxLayer.features;
	var lastFeatureAdded = myGpxFeatures[myGpxFeatures.length - 1];
        viewer.getMap().setCenterAtLonLat(lastFeatureAdded.geometry.x,lastFeatureAdded.geometry.y);
	viewer.getMap().zoomToExtent(lastFeatureAdded.geometry.bounds);

**mga_geo** · 03/08/2015, 16h03

Si je comprends bien :
- quickstart.php charge en iframe map.php
- les deux ont des évènements périodiques
Je crains que la mise au point soit difficile !
Il faudrait déjà arriver à faire fonctionner map.php.

Sans une version du code accessible en ligne, il est très difficile d'aider ...

**shyfu** · 04/08/2015, 07h59

lboulanger,

D'accord, merci. Je ne peut pas vous dire pour le moment si ça fonctionne. J'ai un nouveau message d'erreur ce matin...

Code :

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

1
2
3
4
//On attend que les classes soient chargées
    if (checkApiLoading('loadAPI();',['OpenLayers','Geoportal','Geoportal.Viewer','Geoportal.Viewer.Default'])===false) {
        return;
    }

Me retourne : Uncaught ReferenceError: checkApiLoading is not defined

mga-geo,
Je n'ais malheureusement pas de serveur pour heberger le projet. Qu'entendez-vous par "Je crains que la mise au point soit difficile !"?

**shyfu** · 04/08/2015, 08h41

J'ai trouvé le problème:
J'appel donc la fonction de rafraichissement a la fin de mon convertisseur.php. Cependant, depuis que je fait ça, j'ai le mesage d'erreur suivant :
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.

Si je retire cet appel, le problème du dessus n’apparaît plus. Mon script est trop long?

**mga_geo** · 04/08/2015, 09h58

Il existe plusieurs hébergeurs avec des offres gratuites ( dont https://www.alwaysdata.com/ ) qui permettent ce genre d'hébergement.

La construction d'une page web est de type asynchrone avec des temps très fluctuants. Vouloir et recharger la page et recharger les données de cette page risque d'être problématique.

**shyfu** · 04/08/2015, 11h09

Je vais essayé l’hébergeur. Il faut que je me refasse une clé, celle-ci est locale...

Pour la synchro, je ne peut pas mettre des variables dans des boucles de test?

**shyfu** · 05/08/2015, 09h11

Bonjour,

Maintenant j'ai inclus mon fichier JS dans mon "index" php de la facon suivant :

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
<!DOCTYPE html>
<html>
  <head>
    <title>Géolocalisation</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico"/>
	<link rel="stylesheet" type="text/css" href="./css/style.css" media="all">
</head>
<body>
	<header>
		<h1>Géo-référencement</h1>
	</header>
	<article>
		<!--<iframe src="map.php"></iframe>-->
		<iframe src="map.php" id="FrameMap" name="FrameMap"></iframe>
	</article>
    <!--Inclusion du fichier convertisseur.php-->
    <div id="convertisseur"><?php include_once 'convertisseur.php'; ?></div>
    <!--Appel de la librairie jQuery-->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <!--Appel du script javascript-->
	<script>console.log("avant tout");</script>
	<script type="text/javascript" src="./js/quickstart.js">
		(function iS(){
		console.log("entré dans Is");
			var execJs= function eJs(){
			function convertir(){
			console.log("entré dans convertir");
				$('#convertisseur').load('convertisseur.php');
				console.log("avant refresh"); 
				refreshGpxLayer();
				console.log("apres refresh"); 		
			}
//Permet de d'appeller la fonction tout les 1000 millisecondes (1 seconde)
			setInterval(convertir, 1000);
			};
			$(execJs);
			})();
</script>
</body>
</html>

Cependant, cela me fait complètement planté l'initialisation de la carte, message d'erreur:

Code :

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

Uncaught ReferenceError: checkApiLoading is not defined

Comment y remédiez?

**lboulanger** · 05/08/2015, 09h25

Bonjour,

En regardant le code que vous nous donnez concernant votre page index php, j'ai l'impression que vous avez perdu l'appel de la bibliothèque de l'API Géoportail. Il manquerait une balise du type :

Code :

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

<script type="text/javascript" src="http://api.ign.fr/geoportail/api/js/latest/GeoportalExtended.js"></script>

à insérer avant l'appel à votre script quickstart.js. (en fait, dans les messages précédents, vous appeliez bien la bibliothèque au bon endroit).

Ce serait donc pour ça que la fonction checkApiLoading, qui est probablement la première fonction appelée, n'est pas définie (car définie dans la bibliothèque API).

Tenez nous au courant si cela résout votre problème ou non.

Laurane

**shyfu** · 05/08/2015, 10h23

Après avoir ajouté plusieurs messages consoles, mon problème est d'initialiser la carte APRES mon premiers refresh. J'ai ajouter votre ligne a mon map.php mais cela bloque toujours.
J'avoue que je ne comprend pas a quel moment la map est initialiser pour la seule et unique fois dans le projet de départ. Je pense qu'il me suffit de changer l'ordre pour l'initialiser avant et c'est tout bon. Pouvez vous m’éclairer?

Je vous remercie infiniment de votre patience et espère arrêté de nous embêter aujourd’hui

**mga_geo** · 05/08/2015, 11h18

J'ai une nouvelle version simplifiée de quickstart.js qui donne un meilleur fonctionnement de http://mga.alwaysdata.net/geoportail/shyfu/map.php

**shyfu** · 05/08/2015, 11h25

Wahou ! ça fonctionne. Pouvez vous me dire comment appeler la fonction refresh a la fin de convertisseur.php (afin de ne pas lire et écrire en même temps)?
Ce serais génial et définitivement résolut

**mga_geo** · 05/08/2015, 13h29

car dans ce mode client/serveur, le serveur ne peut pas demander d'actions au client.

**shyfu** · 05/08/2015, 13h33

Désolé, j'avais trouver en effet que ce n'était pas possible mais j'ai oublier de mettre a jour ma question

Et je ne peut pas utilisé une variables globale entre quickstart.js et convertisseur.php ? Genre si convertisseur.php a la mains la variable est égale a 1 et si c'est quickstart.js je la met a 2? Si aucun des 2 je met a zéro et elle est libre.
C'est possible?

**mga_geo** · 05/08/2015, 13h42

On est toujours en mode client/serveur, sur une demande, le client peut indiquer son état au serveur qui le traite ensuite de manière ad-hoc.

Sinon, je ne comprends pas l'objectif : ne faire du refresh que si le fichier gpx a été mis à jour ?

Zoom de l'API Javascript

IGN API Géoportail

Discussions similaires

Partager

Partager