Zoom de l'API Javascript

**shyfu** · 31/07/2015, 09h53

Bonjour,

J'aimerais savoir si je peux paramétrer le zoom de l'affichage de la carte directement dans le fichier GPX et non dans le fichier Javascript. Notamment avec cette ligne de code :

Code :

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

<bounds minlat="48.000000" minlon="6.000000" maxlat="50.000000" maxlon="7.000000"/>

Merci de votre aide précieuse.

**mga_geo** · 31/07/2015, 10h25

La spécification "gpx" ne contient pas ce genre d'informations.

Il est possible par contre en fin de chargement d'une couche gpx de zoomer sur son emprise. Cela peut être un contournement.

**shyfu** · 31/07/2015, 10h40

Mince, du coup je ne suis probalement plus dans la bonne section mais je tente quand meme ma question :
Comment peut-on lire un balise xml (car j'ai un fichier xml de config) en javascript? Cela me permetterais d'utiliser la fonction :

Code :

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

viewer.getMap().setCenterAtLonLat(2.418611,48.842222,12);

**elias couppe** · 31/07/2015, 11h17

Bonjour,

votre fichier xml de configuration est-il statique ou bien change t-il au cours du temps ?

Que représentent les coordonnées présents dans votre fichier XML ?
S'il s'agit de l'emprise de votre couche GPX, la solution de mga_geo semble adéquate.

Il existe sinon des moyens de lire le XML et de l'utiliser en JS, mais pas sûr que ce soit la solution la plus simple.

**shyfu** · 31/07/2015, 11h20

Bonjour,

Mon fichier gpx est changé toutes les secondes. Cela me permetterais de tout simplement recentré l'affichage de la carte sur le dernier point ajouter. Mon but est donc de changer :
La latitude min/max
La longitude min/max
Le zoom.

Voici le fichier xml en question :

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
<TRAJET>
<Trace>
1
</Trace>
<Nom_trajet>
Mon premier trajet via xml
</Nom_trajet>
<Latitude_min>
48.000000
</Latitude_min>
<Latitude_max>
50.000000
</Latitude_max>
<Longitude_min>
6.000000
</Longitude_min>
<Longitude_max>
7.000000
</Longitude_max>
<Ref_latitude>
1
</Ref_latitude>
<Ref_longitude>
2
</Ref_longitude>
<Ref_type>
4
</Ref_type>
<Type>
Tair
</Type>
<Premiere_colonne>
0
</Premiere_colonne>
<Premiere_ligne>
0
</Premiere_ligne>
<NbData>
2
</NbData>
</TRAJET>

Merci a tout les deux de votre aide

**elias couppe** · 31/07/2015, 11h43

Je ne comprends pas à quel moment et comment votre fichier XML est utilisé. Que représentent les coordonnées latitude et longitude min/max ?

Cela dit, si j'ai bien compris, vous voulez recentrer la carte sur le dernier point ajouté à votre couche GPX.
Vous pouvez normalement faire cela en javascript. Il suffit d'accéder au dernier point (feature) ajouté à votre couche, d'en récupérer les coordonnées, et de recentrer la carte dessus avec :

Code :

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

viewer.getMap().setCenterAtLonLat(feature.lon,feature.lat);

**shyfu** · 31/07/2015, 12h16

Votre solution me parait en effet plus simple. Mais quelle est la fonction pour récupérer le dernier point ajouter a la couche ?

**mga_geo** · 31/07/2015, 14h07

Une possibilité de code : http://mga.alwaysdata.net/geoportail...x_fluctue.html

**shyfu** · 31/07/2015, 14h12

Merci de votre aide, j'essaie en ce moment d'utiliser la fonction setCenterAtLonLat mais je ne parviens pas a récupérer les coordonnées du dernier point.

**elias couppe** · 31/07/2015, 14h36

Comme dans l'autre fil de discussion(cf ce sujet), vous pouvez récupérer votre couche :

Code :

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

var myGpxLayer = viewer.getMap().getLayersByName("trace")[0];

Pour accéder au tableau des points de votre couche :

Code :

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

 var myGpxFeatures = myGpxLayer.features

Pour accéder au dernier élément du tableau, et donc au dernier point ajouté à votre couche :

Code :

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

 var lastFeatureAdded = myGpxFeatures[myGpxFeatures.length - 1];

Enfin, les coordonnées de ce point sont des attributs de l'objet lastFeatureAdded. On doit pouvoir les récupérer via :

lastFeatureAdded.geometry.x et lastFeatureAdded.geometry.y

A essayer...

**shyfu** · 31/07/2015, 15h05

Pour répondre a la question de l'autre sujet, cela fonctionnais avant mes tests pour le zoom... J'ai repris la version d'hier et elle ne fonctionne plus non plus, je regarde ça.
Pour le moment vos solutions me ressortes en console :
ReferenceError: refreshMap is not definedonload @ quickstart.php:16
quickstart.js:127 Uncaught TypeError: Cannot read property 'geometry' of undefined

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
//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);
	
	function refreshGpxLayer(Layer) {								//On rafraichis le tracé a interval régulié
	//Centrage et zoom de la carte en fonction du dernier point ajouté
	 var myGpxFeatures = myGpxLayer.features;
	 var lastFeatureAdded = myGpxFeatures[myGpxFeatures.length - 1];
	 viewer.getMap().setCenterAtLonLat(lastFeatureAdded.geometry.x.lon,lastFeatureAdded.geometry.y.lat);
    setInterval(function(Layer) { 
       Layer.refresh();  
    }, 3000);
}
	
}

	//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;

Merci.

**shyfu** · 31/07/2015, 15h11

Premier problème résolut, autant pour moi.

Il ne me reste plus que l'erreur : Uncaught TypeError: Cannot read property 'geometry' of undefined

**elias couppe** · 31/07/2015, 15h28

Utiliser la console javascript de votre navigateur pourrait beaucoup vous aider afin de débugger votre code.

J'ai des doutes quand vous faites

Code :

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

viewer.getMap().setCenterAtLonLat(lastFeatureAdded.geometry.x.lon,lastFeatureAdded.geometry.y.lat);

Pourquoi .lon et .lat ? Faire lastFeatureAdded.geometry.x et lastFeatureAdded.geometry.y me parait plus logique.

Ajoutez un console.log(lastFeatureAdded), et regardez ce qui est renvoyé dans la console javascript.

Code :

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

1
2
var lastFeatureAdded = myGpxFeatures[myGpxFeatures.length];
console.log(lastFeatureAdded);

Enfin, si l'autre problème est réglé, peut-il être marqué comme

?

Merci,

Elias

**shyfu** · 31/07/2015, 15h34

J'avais déjà essayer d'enlever le "lon" et "lat" et j'utilise en ce moment même la console. Le message console (même après avoir retiré "lon" et "lat") affiche :

Uncaught TypeError: Cannot read property 'geometry' of undefined

Pour l'autre sujet, je le met en résolut en rentrant. Au bureau, un proxy est installé et m’empêche de me connecter pour ensuite cliquer sur résolut. (j'ai un message d'erreur d'ip)

**elias couppe** · 31/07/2015, 15h54

Que donne le console.log préconisé dans mon message précédent ?

La structure de l'objet lastFeatureAdded vous donnera probablement une indication sur l'origine de l'erreur.
Si la console vous renvoie "undefined", c'est que myGpxFeatures[myGpxFeatures.length - 1]; n'existe pas.

Faites alors un console.log(myGpxFeatures) pour voir à quoi le tableau ressemble, et vérifiez à quoi correspond myGpxFeatures[myGpxFeatures.length - 1];

**mga_geo** · 02/08/2015, 19h54

elias couppe

Les x et y sur une géométrie gpx ne sont définis que pour les points.
Le "getBounds()" est par contre disponible pour les points et les lignes.

Marc

Le chargement de la page http://mga.alwaysdata.net/geoportail...x_fluctue.html est très long, l'autoconf dure une dizaine de secondes.

L'api essaye aussi de charger des tuiles qui n'existent pas : http://wxs.ign.fr/.../geoportail/wmt...AT=image%2Fpng

**shyfu** · 03/08/2015, 08h21

Bonjour,

console.log(myGpxFeatures) renvoie : Array[502]
console.log(myGpxFeatures[myGpxFeatures.length - 1]) renvoie : undefined

var lastFeatureAdded = myGpxFeatures[myGpxFeatures.length];
console.log(lastFeatureAdded); renvoie : undefined

**mga_geo** · 03/08/2015, 09h23

Sur http://mga.alwaysdata.net/geoportail...x_fluctue.html , en inspectant sous Firefox/Firebug le DOM, on trouve après un "Refresh", l'objet gpxLayer.
Cet objet est le père d'un "features".
L'objet myGpxFeatures devrait y ressembler !

**lboulanger** · 03/08/2015, 09h45

Bonjour,

Envoyé par shyfu

var lastFeatureAdded = myGpxFeatures[myGpxFeatures.length];

Tout d'abord, une petite erreur semble s'être glissée au fur et à mesure de la discussion. Il faudrait écrire :

Code :

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

var lastFeatureAdded = myGpxFeatures[myGpxFeatures.length - 1]

et non :

Code :

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

var lastFeatureAdded = myGpxFeatures[myGpxFeatures.length]

(l'index d'un tableau en JavaScript commençant à zéro, le premier élément est donc le numéro 0, le deuxième est le numéro 1, et ainsi le dernier élément correspond à la taille du tableau moins 1)

Je ne sais pas si cela résoudra totalement votre problème, mais cela devrait au moins résoudre cette erreur : lastFeatureAdded devrait maintenant vous renvoyer un objet (correspondant à votre dernier feature ajouté à la carte), avec un attribut geometry. Ce dernier attribut geometry pourrait avoir des attributs x ou y si c'est un point, ou un attribut bounds si c'est une ligne ou un polygone. Observer cet objet dans un débuggeur (comme firebug) vous aidera à mieux comprendre ce dont vous avez besoin pour rafraîchir votre emprise).

Bonne journée !

Laurane

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

Malheureusement je n'avais pas copié cette "erreur". Mon problème reste donc entier.

Zoom de l'API Javascript

IGN API Géoportail

Discussions similaires

Partager

Partager