Discussion :

[wikimaginot]

Bonjour

Nous souhaitons étendre les fonctionnalités de la cartographie sur wikimaginot.eu et je rencontre un problème dont je ne comprends pas la cause et de fait, que je ne parviens pas à résoudre (je suis une demi-bille )

J'ai étendu un sélecteur de couche que nous utilisons déjà et qui fonctionne très bien dans la version de base (les scripts sont libres) . La sélection des couches du geoportail fonctionne sans souci mais par contre, les trois couches supplémentaires que vous verrez livrées en dernier posent le souci suivant : le sélecteur ne fonctionne que pour la dernier couche affichée, pas our les deux autres au dessus.
En fait, quel que soit le nombre de couches supplémentaires, seul le sélecteur de la dernière couche fonctionne, indépendamment de la couche une question.

Il "pourrait" s'agir d'un souci avec addEventListener() qui ne semble pas fonctionner pour les couches supplémentaires sauf pour la dernière. Les scripts sont à priori rigoureusement identiques et je suis un peu perdu, toute aide sera la bienvenue.

La page de test est à cette adresse : https://wikimaginot.eu/V70_construct...t.php?id=11001

merci d'avance pour votre aide.

Pascal

[NJNDEV]

Geoportal Extension for OpenLayers 3: ol.control.LayerSwitcher dysfonction sous OpenLayers v 6.31

Je suis à l'affut de toute précision...

[wikimaginot]

Bonjour

le lien ne fonctionne pas .

Geoportal Extension for OpenLayers 3: ol.control.LayerSwitcher dysfonction sous OpenLayers v 6.31

Cordialement, Pascal

[NJNDEV]

https://www.developpez.net/forums/d2...yers-v-6-31-a/

[wikimaginot]

Bonjour

Le problème est différent je pense. Je n'utilise pas de fonctionnalité geoportail pour la gestion des couches, mais javascript et la propriété opacity d'OpenLayers.
Le sélecteur de couches est généré par un script PHP en fonction des choix du visiteur et de l'existence ou non de couches supplémentaires.
Dans l'exemple ci-dessus, trois couches supplémentaires existent et les sélecteurs couches correspondant sont affichés




Voilà le script gérant les couches supplémentaires :

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
				// Creation couche
				var VFNO  = new ol.layer.Vector({
					source: new ol.source.Vector({
						url:'_kml_files/_VFNO/SFT_VFNO.kml?9598',  
						format: new ol.format.KML({
							extractStyles: true, 
							extractAttributes: true,
							maxDepth: 2,
						}) 	
					}),
					maxResolution:1000,
					zIndex:52,
				});
				VFNO.setOpacity(0);
 
				// Affichage contrôles  couche
				document.getElementById('WikCtrl').innerHTML +='<div title="Afficher/cacher la couche Réseau ferré voie normale">
				<input class="w3-check" type="checkbox" id="VFNOToggle" >Réseau ferré voie normale</div>';	
 
				// fonction de gestion couche			 
				document.getElementById('VFNOToggle').addEventListener('change', function() {
					if (document.getElementById('VFNOToggle').checked == true) {
						VFNO.setOpacity(1);
					} else {
						VFNO.setOpacity(0);
					};
					map.renderSync();
				});
 
 
 
				// Creation couche
				var VF60  = new ol.layer.Vector({
					source: new ol.source.Vector({
						url:'_kml_files/_VF60/SFT_VF60.kml?2592',  
						format: new ol.format.KML({
							extractStyles: true, 
							extractAttributes: true,
							maxDepth: 2,
						}) 	
					}),
					maxResolution:1000,
					zIndex:53,
				});
				VF60.setOpacity(0);
 
				// Affichage contrôles  couche
				document.getElementById('WikCtrl').innerHTML +='<div title="Afficher/cacher la couche Réseau ferré voie de 60">
				<input class="w3-check" type="checkbox" id="VF60Toggle" >Réseau ferré voie de 60</div>';
 
				// fonction de gestion couche			 
				document.getElementById('VF60Toggle').addEventListener('change', function() {
					if (document.getElementById('VF60Toggle').checked == true) {
						VF60.setOpacity(1);
					} else {
						VF60.setOpacity(0);
					};
					map.renderSync();
				});
 
 
 
				// Creation couche
				var RTPH  = new ol.layer.Vector({
					source: new ol.source.Vector({
						url:'_kml_files/_RTPH/SFT_RTPH.kml?8499',  
						format: new ol.format.KML({
							extractStyles: true, 
							extractAttributes: true,
							maxDepth: 2,
						}) 	
					}),
					maxResolution:1000,
					zIndex:56,
				});
				RTPH.setOpacity(0);
 
				// Affichage contrôles  couche
				document.getElementById('WikCtrl').innerHTML +='<div title="Afficher/cacher la couche Réseau téléphonique">
				<input class="w3-check" type="checkbox" id="RTPHToggle" >Réseau téléphonique</div>';
 
				// fonction de gestion couche			 
				document.getElementById('RTPHToggle').addEventListener('change', function() {
					if (document.getElementById('RTPHToggle').checked == true) {
						RTPH.setOpacity(1);
					} else {
						RTPH.setOpacity(0);
					};
					map.renderSync();
				});

Le souci est que seul le dernier sélecteur (checkbox) fonctionne alors que toutes les fonctions sont identiques. Dans la console, seul le checkbox de la dernière couche est doté d'un 'event' . La sélection des couches IGN basée sur le même principe fonctionne parfaitement



calim2:

[mga_geo]

Bonjour,
Le problème n'a pas l'air d'être lié à l'api.
J'ai réduit le code : http://ao35.free.fr/geoportail/exemp...kimaginot.html
et même comportement
Marc

[wikimaginot]

Bonjour,
Le problème n'a pas l'air d'être lié à l'api.
J'ai réduit le code : http://ao35.free.fr/geoportail/exemp...kimaginot.html
et même comportement
Marc

Bonjour Marc

Effectivement, j'en était arrivé à la même conclusion. Cele ne parait lié ni à l'api ni à OL mais bien un souci purement JS. Il semble que l'écouteur d'evenements ne prenne en compte que le dernier <input> créé. Si l'on réduit ou allonge la liste avec des noms différents, le résultat est le même.

Merci pour votre aide.

Pascal

[wikimaginot]

Bonjour,
Le problème n'a pas l'air d'être lié à l'api.
J'ai réduit le code : http://ao35.free.fr/geoportail/exemp...kimaginot.html
et même comportement
Marc

Et en testant le script suivant, cela fonctionne.
Dans cette version, la seule différence est que le contenu html du div 'WikCtrl' est créé avant que les gestionnaires d"événement 'eventlistener' ne soient générés.

Il semblerait donc que le fait de modifier du contenu html avec innerHTML pose le souci avec les gestionnaires d'événement déjà associé au contenu.

Code HTML :

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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr" dir="ltr">
<head>
  <title>test</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="author" content="Pascal Lambert" />
  <meta name="licence" content="http://creativecommons.org/licenses/by-nc-sa/2.0/fr/ licence Creative Commons Paternité-Pas d'Utilisation Commerciale-Partage des Conditions Initiales à l'Identique 2.0 France" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <div id="WikCtrl">
 
 
 
</div>
<script>
document.getElementById('WikCtrl').innerHTML +='<div title="couche1"><input type="checkbox" id="couche1">couche1</input></div>';
document.getElementById('WikCtrl').innerHTML +='<div title="couche2"><input type="checkbox" id="couche2">couche2</input></div>';
document.getElementById('WikCtrl').innerHTML +='  <div title="couche3"><input type="checkbox" id="couche3">couche3</input></div>';
 
document.getElementById('couche1').addEventListener('change', function() {
  console.log(document.getElementById('couche1'))
});
 
document.getElementById('couche2').addEventListener('change', function() {
  console.log(document.getElementById('couche2'))
});
 
document.getElementById('couche3').addEventListener('change', function() {
  console.log(document.getElementById('couche3'))
});
</script>
</body>
</html>

J'ai modifié le script PHP générant la page afin de générer la page HTML et les scripts associés dans cet ordre. Cela fonctionne parfaitement et nous allons pouvoir étendre les fonctionnalisés de la cartographie sur le site.


Restera juste par curiosité à comprendre pourquoi ce souci avec JS ....



Cordialement, Pascal