IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

IGN API Géoportail Discussion :

Souci avec script de sélection de couches sous OL / Geoportail


Sujet :

IGN API Géoportail

  1. #1
    Nouveau membre du Club
    Homme Profil pro
    NC NC
    Inscrit en
    juillet 2012
    Messages
    28
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : NC NC
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : juillet 2012
    Messages : 28
    Points : 33
    Points
    33
    Par défaut Souci avec script de sélection de couches sous OL / Geoportail
    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

  2. #2
    Membre régulier
    Profil pro
    Inscrit en
    juillet 2007
    Messages
    72
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juillet 2007
    Messages : 72
    Points : 93
    Points
    93
    Par défaut Problème quasi identique au mien....

  3. #3
    Nouveau membre du Club
    Homme Profil pro
    NC NC
    Inscrit en
    juillet 2012
    Messages
    28
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : NC NC
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : juillet 2012
    Messages : 28
    Points : 33
    Points
    33
    Par défaut
    Bonjour

    le lien ne fonctionne pas .

    Cordialement, Pascal

  4. #4
    Membre régulier
    Profil pro
    Inscrit en
    juillet 2007
    Messages
    72
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juillet 2007
    Messages : 72
    Points : 93
    Points
    93

  5. #5
    Nouveau membre du Club
    Homme Profil pro
    NC NC
    Inscrit en
    juillet 2012
    Messages
    28
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : NC NC
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : juillet 2012
    Messages : 28
    Points : 33
    Points
    33
    Par défaut
    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

    Nom : Capture d’écran 2020-07-17 à 11.23.15.png
Affichages : 62
Taille : 397,1 Ko


    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

    Nom : Capture d’écran 2020-07-17 à 11.07.23.png
Affichages : 64
Taille : 38,6 Ko

    calim2:
    Images attachées Images attachées  

  6. #6
    Membre expérimenté
    Profil pro
    Inscrit en
    mai 2009
    Messages
    2 078
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2009
    Messages : 2 078
    Points : 1 746
    Points
    1 746
    Par défaut
    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

  7. #7
    Nouveau membre du Club
    Homme Profil pro
    NC NC
    Inscrit en
    juillet 2012
    Messages
    28
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : NC NC
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : juillet 2012
    Messages : 28
    Points : 33
    Points
    33
    Par défaut
    Citation Envoyé par mga_geo Voir le message
    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

  8. #8
    Nouveau membre du Club
    Homme Profil pro
    NC NC
    Inscrit en
    juillet 2012
    Messages
    28
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : NC NC
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : juillet 2012
    Messages : 28
    Points : 33
    Points
    33
    Par défaut
    Citation Envoyé par mga_geo Voir le message
    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

Discussions similaires

  1. soucis avec script VideoPlayer
    Par lyokoguerier dans le forum Unity
    Réponses: 5
    Dernier message: 21/11/2018, 17h21
  2. [AC-2003] Soucis avec un formulaire qui modifie un sous état
    Par manutazounet dans le forum IHM
    Réponses: 0
    Dernier message: 17/03/2014, 20h23
  3. souci avec script php moteur interne
    Par snip74 dans le forum Langage
    Réponses: 1
    Dernier message: 24/06/2011, 09h18
  4. Réponses: 0
    Dernier message: 13/05/2009, 13h05
  5. Petit soucie avec script de récup d'info
    Par kimous dans le forum Web
    Réponses: 4
    Dernier message: 11/03/2008, 15h11

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo