Bug modification des fichiers gpx

**trukker** · 22/05/2011, 11h16

Bonjour dg richard,

Tu as raison il est inutile de l'activé. Je l'avais ajouté parce que lors de mon premier test il m'avais semblé que je ne pouvais plus utiliser l'outil de modification. Au 2° test cela marchait sans.

Je vais tester pendant quelques jours et si tu considère que c'est la meilleure solution possible je mettrai le sujet en résolu.

Gilles.

**trukker** · 28/05/2011, 12h00

Bonjour,

Je fais des tests depuis une semaine et je trouve pas de défauts à cette solution :

Ajout de ces 2 lignes à la fonction de sauvegarde :

Code :

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

1
2
var mfCntrl= viewer.getMap().getControlsByClass('OpenLayers.Control.ModifyFeature')[0];
mfCntrl.deactive(mfCntrl.layer.selectedFeatures[0]);

Je remercie shama, mga geo et dgrichard pour leur aide.

Je vous propose le code d'une page assez complète pour la création et l'enregistrement de gpx.
Ce code utilise à 90% l'api géoportail (comme quoi elle peut faire beaucoup de choses) et un peu de code copié sur les exemples proposés par mga geo, shama et la documentation du geoportail.

Il manque l'affichage de la trace après l'enregistrement. C'est sans doute possible en utilisant une seule page mais pour l'instant je bloque. C'est beaucoup plus simple en déportant la partie php sur une autre page.

Ce code n'est sans doute pas parfait. Si vous avez des idées d'amélioration, en utilisant au maximum l'API geoportail, faites m'en part.

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
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
<!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">
  <head>
    <title>geoportalMap_gpx2.html</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" />
  
    <script type="text/javascript" src="http://api.ign.fr/geoportail/api?v=1.2-e&amp;key=votre clé de contrat geoportail&amp;instance=viewer&amp;includeEngine=true&amp;"><!-- --></script>
    	

    <script type="text/javascript">
    <!--
	
	viewer= null;
	var panelControls = null;
	var toolbar = null;
	var feature = null;
	var gpxLayer = null;
		
	/*
	* Fonction de sauvegarde au format gpx d'une couche vectorielle.
	* Les lignes data= data.replace... ne servent qu'a ajouter des retours à la ligne et faciliter la lecture du fichier,
	* leur suppression n'aurait aucun effet sur la compatibilité du fichier gpx.
	*/
			
	this.saveFeatures = function () {
		
		/*
		* Les 2 lignes suivantes désactivent l'outil de modification,
		* cela évite l'enregistrement des points virtuels ajouter pour les modifications
		*/
		
		var mfCntrl= viewer.getMap().getControlsByClass('OpenLayers.Control.ModifyFeature')[0];
		mfCntrl.deactivate(mfCntrl.layer.selectedFeatures[0]);
		
		var opts = {
		  internalProjection: this.map.getProjection().clone(),
		  externalProjection: new OpenLayers.Projection('EPSG:4326')
		};
			
		var format = new Geoportal.Format.GPX(opts);
			
		data = format.write(gpxLayer.features);	
			
		data = data.replace(/<wpt/gm, "\n<wpt");
		data = data.replace(/<\/gpx/gm, "\n</gpx");
		//data = data.replace(/<typeName>wpt<\/typeName>/gm, "");
		data = data.replace(/<trk/gm, "\n<trk");
		data = data.replace(/<\/trk/gm, "\n</trk");
		data = data.replace(/<name/gm, "\n<name");
		data = data.replace(/<pt/gm, "\n<trkpt");
		data = data.replace(/<rte/gm, "\n<rte");
		data = data.replace(/<\/rte/gm, "\n</rte");
		
			
		/*
		* Petite fonction pour envoyer la trace à la page de traitement en simulant la méthode POST.
		* Vous pourrez trouver la source et des explications ici :
		* http://camille.descombes.free.fr/blog/index.php/envoyer-des-donnees-post-en-javascript/
		*/
		
		var page = ''; //'traitementGPX.php'
		
		function openWithPostData(page,data)
		{
			var form = document.createElement('form');
			form.setAttribute('action', page);
			form.setAttribute('method', 'post');
			
				var inputvar = document.createElement('input');
				inputvar.setAttribute('type', 'text');
				inputvar.setAttribute('name', 'data');
				inputvar.setAttribute('value', data);
				form.appendChild(inputvar);
			
			document.body.appendChild(form);
			form.submit();
		}
		
		openWithPostData(page,data);
			
	}
	   	
	function initGeoportalMap() {
			
		if (typeof(geoportalLoadviewer)!='function') {
            alert('Map creation failed');
            return;
        }
		geoportalLoadviewer("viewerDiv", "normal", 'FXX', null, null, 'proxyign2.php?url=');
				
		if (!viewer) {
            alert('Map creation failed');
            return;
        }			
        viewer.addGeoportalLayers([
            'ORTHOIMAGERY.ORTHOPHOTOS:WMSC',
            'GEOGRAPHICALGRIDSYSTEMS.MAPS:WMSC'],
			{'ORTHOIMAGERY.ORTHOPHOTOS:WMSC':{visibility:false},global:{opacity:1.0}}
		);
				
		viewer.getMap().setCenterAtLonLat(-1.683028,48.105478, 10);
		
		/*
		* Création de la couche gpx
		* Les lignes gpxLayer.onFeatureInsert... permettent d'ajouter un attribut à la couche gpx
		* ici name, le nom
		* Là aussi la suppression n'aurait aucun effet sur la compatibilité du fichier gpx.  
		*/
				
		gpxLayer = new OpenLayers.Layer.Vector('Trace GPX',
			{
				styleMap:new OpenLayers.StyleMap({
					"default": new OpenLayers.Style(
						OpenLayers.Util.applyDefaults({
							fillColor: "#FF0000",
							fillOpacity: 0.6,
							strokeColor: "#99FF00",
							strokeWidth: 2,
							graphicName: "circle",
							pointRadius: 4,
							cursor: "pointer"
						},OpenLayers.Feature.Vector.style["default"])),
					"select": new OpenLayers.Style(
						OpenLayers.Util.applyDefaults({
							fillColor: "#FF0000",
							fillOpacity: 0.6,
							strokeColor: "#FFFF00",
							strokeWidth: 4,
							pointRadius: 12,
							cursor: "pointer"
						},OpenLayers.Feature.Vector.style["select"])),
					"temporary" : new OpenLayers.Style(
						OpenLayers.Util.applyDefaults({
							fillColor: "#99CCFF",
							strokeColor: "#99CCFF",
							cursor: "pointer"
						},OpenLayers.Feature.Vector.style["temporary"]))
				})
			}
		);
		viewer.getMap().addLayer(gpxLayer);
		
		
		/*
		* Ajout d'un attribut à la couche gpx, ici le nom
		*/
		
		gpxLayer.onFeatureInsert = function(feature) {
			var name = prompt('Nom ?');
			feature.attributes['name'] = name;
		};
			
		/*
		* Ajout de la barre d'outil d'édition
		* La ligne 'displayclass...' assigne le nom qui sera utilisé dans la feuille de style.
		* La ligne 'defaultControl: panelControls[0]' permet de sélectionner un bouton par défaut,
		* elle est désactivée car inutile dans cet exemple.
		*/
		
		var panelControls = [
			new OpenLayers.Control.DrawFeature(gpxLayer, OpenLayers.Handler.Point, {
				title : 'ajout point',
				displayClass: 'olControlDrawFeaturePoint'
			}),
			new OpenLayers.Control.DrawFeature(gpxLayer, OpenLayers.Handler.Path, {
				title : 'ajout ligne',
				displayClass: 'olControlDrawFeaturePath'
			}),
			new OpenLayers.Control.DrawFeature(gpxLayer, OpenLayers.Handler.Polygon, {
				title : 'ajout polygone',
				displayClass: 'olControlDrawFeaturePolygon'
			}),
			new Geoportal.Control.DeleteFeature(gpxLayer, {
				title: "Suppression",
				displayClass: 'olControlDeleteFeature'
			}),
			new OpenLayers.Control.Button({
				name: "sauve",
				title: "Sauvegarde",
				displayClass: 'olControlSaveFeatures',
				trigger: saveFeatures
			}),
			new OpenLayers.Control.DragFeature(gpxLayer,{
				title: "D?acement",
				displayClass: 'olControlDragFeature'
			}),
			new OpenLayers.Control.ModifyFeature(gpxLayer,{
				title: "Modification",
				displayclass: 'olControlModifyFeature'				
			})
		];
		var toolbar = new OpenLayers.Control.Panel({
			displayClass: 'customEditingToolbar',
			//defaultControl: panelControls[0]
		});
				
		toolbar.addControls(panelControls);
		viewer.getMap().addControl(toolbar);
		
		var tbx= viewer.getMap().getControlsByClass('Geoportal.Control.ToolBox')[0];
       	
		
		/*
		* Ajout des outils de recherche "Search Toolbar" :
		*/
		
        var searchbar= new Geoportal.Control.SearchToolbar(
            {
                div: OpenLayers.Util.getElement(tbx.id+'_search'),
                geonamesOptions: {
                    setZoom: Geoportal.Control.LocationUtilityService.GeoNames.setZoomForBDNyme,
                    layerOptions: {
                        name: 'TOPONYMS.ALL:OPENLS',
                        maximumResponses:100,
                        formatOptions: {
                            version:'1.0'
                        }
                    }
                },
                geocodeOptions: {
                    layerOptions: {
                        name: 'ADDRESSES.CROSSINGS:OPENLS',
                        maximumResponses:100,
                        formatOptions: {
                            version:'1.0'
                        }
                    },
                    matchTypes: [
                        {re:/city/i,    src:Geoportal.Util.getImagesLocation()+'OLScity.gif'},
                        {re:/street$/i, src:Geoportal.Util.getImagesLocation()+'OLSstreet.gif'},
                        {re:/number/i,  src:Geoportal.Util.getImagesLocation()+'OLSstreetnumber.gif'},
                        {re:/enhanced/i,src:Geoportal.Util.getImagesLocation()+'OLSstreetenhanced.gif'},
                        {re:null,       src:Geoportal.Util.getImagesLocation()+'OLSstreet.gif'}
                    ]
                }
                
            }
        );
        viewer.getMap().addControl(searchbar);
		
		
		/*
		* Ajout des outils de mesure "Measure Toolbar" :
		*/
		
        var measurebar= new Geoportal.Control.MeasureToolbar(
            {
                div: OpenLayers.Util.getElement(tbx.id+'_measure'),
                displaySystem:
                    (viewer.getMap().getProjection().proj.projName=='longlat'?
                        'geographic'
                    :   'metric'),
                targetElement: OpenLayers.Util.getElement(tbx.id+'_meares')
            }
        );
        viewer.getMap().addControl(measurebar);
	
    }
      -->
    </script>
	
	<?php
	
	if (isset($_POST['data'])) {
			
		/*
		* Extraction du nom de la trace gpx pour nommer le fichier qui sera enregistré
		*/
		
		$data = $_POST['data'];
		
		$doc = new DOMDocument;
		$doc->loadXML($data);

		$items = $doc->getElementsByTagName('name');
		
		foreach ($items as $item) {
			$nom = $item->nodeValue;
			}
		
		$nom = $nom . ".gpx";
		
		/*
		* Ecriture du fichier sur le disque
		*/
		
		$monfichier = fopen($nom, 'a+');
		fputs($monfichier, $_POST['data']);
		fclose($monfichier);
	}
	
	?>
	
    <style type="text/css">
    <!--
    h1 {
        text-align:center;
        font-size:0.75em;
        font-style: italic;
        width:90%;
    }
    div#viewerDiv {
        width:90%;
        height:95%;
        background-color:white;
        background-image:url(/randoproxy/img/loading.gif);
        background-position:center center;
        background-repeat:no-repeat;
    }
    div#example_explain {
        margin:0px 0px 10px 0px;
        border: thin solid #595E61;
        width:90%;
        position:relative;
        left:0px;
        top:0px;
        text-align:justify;
        font-size: 0.75em;
        font-style: italic;
        color: #595E61;
    }
    div#footer {
        font-size:x-small;
        text-align:center;
        width:90%;
    }
    div#footer a, div#footer a:link, div#footer a:visited, div#footer a:hover {
        text-decoration:none;
        color:black;
    }
	
	.customEditingToolbar {
		float: right;
		right: 80px;
		height: auto; 
		width: auto;
		background-color:#99ccff;
		-moz-border-radius: 8px;
		-webkit-border-radius: 8px;
		border-radius: 8px; 
		border:1px solid white;
	}
	
	.customEditingToolbar div {
		float: right;
		margin: 5px;
		width: 24px;
		height: 24px;
	}
	
	.ajoutLayerItemActive { 
		background-image: url("http://api.ign.fr/geoportail/api/js/1.1/theme/geoportal/img/picto_addvectorlayer_on.gif") !important;
		background-repeat: no-repeat;
	}
	
	.ajoutLayerItemInactive { 
		background-image: url("http://api.ign.fr/geoportail/api/js/1.1/theme/geoportal/img/picto_addvectorlayer_off.gif") !important;
		background-repeat: no-repeat;
	}
	
	.olControlNavigationItemActive { 
		background-image: url("http://api.ign.fr/geoportail/api/js/1.1/theme/geoportal/img/picto_drag_on.gif") !important;
		background-repeat: no-repeat;
	}
	
	.olControlNavigationItemInactive { 
		background-image: url("http://api.ign.fr/geoportail/api/js/1.1/theme/geoportal/img/picto_drag_off.gif") !important;
		background-repeat: no-repeat;
	}
	
	.olControlDragFeatureItemActive { 
		background-image: url("http://api.ign.fr/geoportail/api/js/1.1/theme/geoportal/img/picto_moveFeature_on.gif") !important;
		background-repeat: no-repeat;
	}
	
	.olControlDragFeatureItemInactive { 
		background-image: url("http://api.ign.fr/geoportail/api/js/1.1/theme/geoportal/img/picto_moveFeature_off.gif") !important;
		background-repeat: no-repeat;
	}
	
	.olControlModifyFeatureItemActive { 
		background-image: url("http://api.ign.fr/geoportail/api/js/1.1/theme/geoportal/img/picto_modifyFeature_on.gif") !important;
		background-repeat: no-repeat;
	}
	
	.olControlModifyFeatureItemInactive { 
		background-image: url("http://api.ign.fr/geoportail/api/js/1.1/theme/geoportal/img/picto_modifyFeature_off.gif") !important;
		background-repeat: no-repeat;
	}
	
	.olControlDrawFeaturePointItemInactive { 
		background-image: url("http://api.ign.fr/geoportail/api/js/1.1/theme/geoportal/img/picto_drawPoint_off.gif") !important;
		background-repeat: no-repeat;
	}
	
	.olControlDrawFeaturePointItemActive { 
		background-image: url("http://api.ign.fr/geoportail/api/js/1.1/theme/geoportal/img/picto_drawPoint_on.gif") !important;
		background-repeat: no-repeat;
	}
	
	.olControlDrawFeaturePathItemInactive { 
		background-image: url("http://api.ign.fr/geoportail/api/js/1.1/theme/geoportal/img/picto_drawLine_off.gif") !important;
		background-repeat: no-repeat;
	}
	
	.olControlDrawFeaturePathItemActive { 
		background-image: url("http://api.ign.fr/geoportail/api/js/1.1/theme/geoportal/img/picto_drawLine_on.gif") !important;
		background-repeat: no-repeat;
	}
	
	.olControlDrawFeaturePolygonItemInactive { 
		background-image: url("http://api.ign.fr/geoportail/api/js/1.1/theme/geoportal/img/picto_drawPolygon_off.gif") !important;
		background-repeat: no-repeat;
	}
	
	.olControlDrawFeaturePolygonItemActive { 
		background-image: url("http://api.ign.fr/geoportail/api/js/1.1/theme/geoportal/img/picto_drawPolygon_on.gif") !important;
		background-repeat: no-repeat;
	}
	
	.olControlDeleteFeatureItemActive { 
		background-image: url("http://api.ign.fr/geoportail/api/js/1.1/theme/geoportal/img/picto_deleteFeature_on.gif") !important;
		background-repeat: no-repeat;
	}
	
	.olControlDeleteFeatureItemInactive { 
		background-image: url("http://api.ign.fr/geoportail/api/js/1.1/theme/geoportal/img/picto_deleteFeature_off.gif") !important;
		background-repeat: no-repeat;
	}
	
	.olControlSaveFeaturesItemActive { 
		background-image: url("http://api.ign.fr/geoportail/api/js/1.1/theme/geoportal/img/picto_save_on.gif") !important;
		background-repeat: no-repeat;
	}
	
	.olControlSaveFeaturesItemInactive { 
		background-image: url("http://api.ign.fr/geoportail/api/js/1.1/theme/geoportal/img/picto_save_off.gif") !important;
		background-repeat: no-repeat;
	}
    -->
    </style>
  </head>
  <body onload="initGeoportalMap()">
    <h1 id="example_title"></h1>
	<div id="viewerDiv" style="width:90%;height:95%;"></div>
	<div id="example_explain"></div>
    <div id="footer"><a href="https://api.ign.fr/geoportail/document.do?doc=legal_mentions" id="legal" target="_blank"></a> - &copy;IGN 2008-2010</div>
  </body>
</html>

En plus de ce code il faut mettre les icones contenu dans le fichier suivant enrespectant l'arborescence.

Gilles.

**superpoi** · 19/10/2011, 08h46

Bonjour,
Merci pour ton code, c'est un peu galère pour trouver des exemples ...

J'ai un petit problème lorsque je le teste je reçois une erreur à la ligne 196 :

Identificateur, chaine ou nombre attendu ....

donc ça devrait etre au niveau de :

var toolbar = new OpenLayers.Control.Panel({
displayClass:'customEditingToolbar',
//defaultControl: panelControls[0]
});
Est ce que ça te dis qqchose ?
Merci d'avance

**trukker** · 19/10/2011, 11h32

Bonjour,

Si tu test avec internet explorer ce doit être l'erreur de la virgule.

Code :

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

1
2
3
4
5
var toolbar = new OpenLayers.Control.Panel({
displayClass:'customEditingToolbar',
//defaultControl: panelControls[0]
});

La deuxième ligne se termine par une virgule, elle est inutile parce qu'il n'y a plus de code après sauf le commentaire qui ne compte pas. Internet explorer se bloque et affiche une erreur. Les autres navigateurs corrigent tout seul l'erreur en général. J'aurai du mettre le commentaire ainsi :

Code :

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

1
2
3
4
5
var toolbar = new OpenLayers.Control.Panel({
displayClass:'customEditingToolbar'/*,
defaultControl: panelControls[0]*/
});

Il me semble que j'ai mis cette ligne en commentaire pour éviter qu'il y ait une icône activé dans 2 barres d'outils en même temps.

Gilles

**superpoi** · 20/10/2011, 10h28

Merci beaucoup !
Ça fonctionne parfaitement !
Patrice

Bug modification des fichiers gpx

IGN API Géoportail

Discussions similaires

Partager

Partager