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 :

passage de la version 2 a 4 afficher un icone


Sujet :

IGN API Géoportail

  1. #1
    Futur Membre du Club
    Homme Profil pro
    retraité
    Inscrit en
    septembre 2019
    Messages
    17
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 63
    Localisation : France, Vaucluse (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : retraité

    Informations forums :
    Inscription : septembre 2019
    Messages : 17
    Points : 9
    Points
    9
    Par défaut passage de la version 2 a 4 afficher un icone
    Bonjour.
    Décidément la conversion est laborieuse. Sur ma page utilisant Geoportal (V2) le code était le suivant (en résumé).

    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
    var stylepoi = {externalGraphic:'../ressources/balade.gif',  graphicWidth:30, graphicHeight:60 };
     
    var mon_point = new OpenLayers.Geometry.Point(mespoints[i].long,mespoints[i].lat); //mespoints[] étant un tableau contenant différentes informations 
    mon_point.transform(sourceproj, destproj);
     
    // Creation du POI  a partir du point
    mondepart = new OpenLayers.Feature.Vector(mon_point, null, stylepoi);
     
    // Ajout d'une couche d'objet vectoriels
    couchePOI = new OpenLayers.Layer.Vector('Départs');
     
    // Ajout du tableau des POIs a la couche
    couchePOI.addFeatures(mondepart);
    /
    / Ajout de la couche des POIs a la carte
    CarteRandoSavoie.getMap().addLayer(couchePOI);

    Malgré de multiples essais je ne trouve pas comment faire.

    Merci d'avance pour votre aide.

  2. #2
    Membre actif Avatar de elias couppe
    Homme Profil pro
    Développeur Web
    Inscrit en
    décembre 2014
    Messages
    117
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : décembre 2014
    Messages : 117
    Points : 225
    Points
    225
    Par défaut
    Je ne suis pas certain de bien comprendre ce qui est souhaité, mais si je m'en réfère au titre du sujet, il s'agit d'afficher un icone sur les ponctuels de votre couche vecteur : pour le coup, il s'agit d'une problématique purement openlayers.

    Pour afficher un icone sur les ponctuels d'une couche vecteur, il faut passer par la classe Style d'openLayers, et notamment pas un objet openlayers Icon.

    Exemple d'ajout d'une couche GPX avec une image en icone :

    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
    // création du style
    var monstyle = new ol.style.Style({
        image : new ol.style.Icon({
          scale : 0.5,
          src : "chemin/vers/mon/image.gif"
        })
    });
     
    //ajout de la couche vecteur
    var maCoucheVecteur = new ol.layer.Vector({
      source: new ol.source.Vector({
        url: 'chemin/vers/mon/fichier.gpx',
        format: new ol.format.GPX()
      }),
      style: monstyle
    });
     
    map.addLayer(maCoucheVecteur)

    Le paramètre scale (echelle) permet de redimensionner votre image d'icone directement via openlayers.
    En étudiant la documentation openlayers, vous pourrez constater que l'on peut jouer sur d'autres éléments via le Style : rotation de l'icone, couleur, contour, remplissage des géométries de la couche vecteur ajoutée.

  3. #3
    Futur Membre du Club
    Homme Profil pro
    retraité
    Inscrit en
    septembre 2019
    Messages
    17
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 63
    Localisation : France, Vaucluse (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : retraité

    Informations forums :
    Inscription : septembre 2019
    Messages : 17
    Points : 9
    Points
    9
    Par défaut toujours pas d'icone affiché
    Bonjour.
    La problématique au début était de récrire une page ne fonctionnant plus (API V2)).
    J’essaie donc de la réécrire. Pour ceci j'ai téléchargé la version 4.4.2 d'openlayers et la version 3.0.4 de l'extension Geoportail.
    Mais pour le néophyte que je suis la tache est dure, d'autant plus que les aides que l'on trouve parle des anciennes versions ...

    Le principe de cette page était l'affichage d'un icône (marcheur) sur la carte ign au centre des traces gpx stockées dans un dossier.
    Le passage de la souris au-dessus de cet icône permettait l'affichage de la trace, un clic de souris faisait apparaitre une fenêtre contenant quelques information.
    (cette page n'est pas supprimée : http://chateau.branlant.free.fr/geoportailbv20.php, la première partie qui va chercher les informations dans un dossier est écrite en php)

    Je suis donc bien loin de ce résultat.

    Aussi merci pour votre aide, malheureusement, pour l'instant pas d’icône affichée.
    Voici mon extrait de code:

    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
    // création d'un style pour la couche GPX
    var styleGPX = new ol.style.Style({
        image : new ol.style.Icon({
          scale : 0.5,
          src : "../ressources/balade.gif"
        }),
    stroke: new ol.style.Stroke({color: 'red', width: 3})
    });
     
     
     // création trace GPX et ajout à la map
    for (i=0;i<mespoints.length-1;i++)
     
    {                                                                       
    var monGPX = new ol.layer.Vector({
                                source: new ol.source.Vector({
                                url: mespoints[i].dossier+"/carte/carte.gpx",
                                format: new ol.format.GPX()
                                                            }),
                                style: styleGPX 
                                });
    map.addLayer(monGPX);
     
    }

    Le résultat est visible sur http://chateau.branlant.free.fr/tests/geoportailv4.php

    J'ai désactivé la ligne concernant le paramètre stroke (// devant) et là il ne reste plus que la carte et des couches vides ...

  4. #4
    Membre actif Avatar de elias couppe
    Homme Profil pro
    Développeur Web
    Inscrit en
    décembre 2014
    Messages
    117
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : décembre 2014
    Messages : 117
    Points : 225
    Points
    225
    Par défaut
    Re-bonjour,
    si j'ai donc bien compris, il s'agit d'afficher un icône cliquable pour chaque trace GPX ajoutée à la carte.

    L'exemple openlayers ici permet d'afficher un icône en des coordonnées données en paramètres.

    En vous détaillant rapidement l'exemple :

    0 - en HTML création des div pour la carte et la pop-up (qui sera utilisée plus bas)

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
      <body>
        <div id="map" class="map"><div id="popup"></div></div>
        <script src="index.js"></script>
      </body>

    1 - Création de l’icône et de son style en précisant sa position et des informations attributaires auxquelles on pourra accéder plus tard (nom, population...) :

    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
    var iconFeature = new Feature({
      geometry: new Point([0, 0]),
      name: 'Null Island',
      population: 4000,
      rainfall: 500
    });
     
    var iconStyle = new Style({
      image: new Icon({
        anchor: [0.5, 46],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        src: 'data/icon.png'
      })
    });
     
    iconFeature.setStyle(iconStyle);

    2 - Création d'une couche vecteur composée de l’icône créé précédemment

    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    var vectorSource = new VectorSource({
      features: [iconFeature]
    });
     
    var vectorLayer = new VectorLayer({
      source: vectorSource
    });

    3 - Création de la carte avec ajout (entre autre) de la couche vecteur contenant l'icone

    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    var map = new Map({
      layers: [rasterLayer, vectorLayer],
      target: document.getElementById('map'),
      view: new View({
        center: [0, 0],
        zoom: 3
      })
    });

    4 - Création de la pop-up informative (voulue pour afficher les informations au click) qui récupère la div html "popup" à l'étape 0

    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    var element = document.getElementById('popup');
     
    var popup = new Overlay({
      element: element,
      positioning: 'bottom-center',
      stopEvent: false,
      offset: [0, -50]
    });
    map.addOverlay(popup);

    5 - création de la fonction pour afficher les informations au click (utilise jquery)
    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
    // display popup on click
    map.on('click', function(evt) {
      var feature = map.forEachFeatureAtPixel(evt.pixel,
        function(feature) {
          return feature;
        });
      if (feature) {
        var coordinates = feature.getGeometry().getCoordinates();
        popup.setPosition(coordinates);
        $(element).popover({
          placement: 'top',
          html: true,
          content: feature.get('name')
        });
        $(element).popover('show');
      } else {
        $(element).popover('destroy');
      }
    });

    6 - création de la fonction pour faire une action lors du survol de la souris (ici, changer l'aspect du curseur de la souris)

    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // change mouse cursor when over marker
    map.on('pointermove', function(e) {
      if (e.dragging) {
        $(element).popover('destroy');
        return;
      }
      var pixel = map.getEventPixel(e.originalEvent);
      var hit = map.hasFeatureAtPixel(pixel);
      map.getTarget().style.cursor = hit ? 'pointer' : '';
    });


    - Pour le point 1, il vous faudra créer non pas un icône, mais plusieurs icônes pour chaque trace GPX
    - Il vous faudra adapter les points 4, 5 et 6 à vos besoins, et à vos outils. Je vous invite d'ailleurs pour ces points à plutôt essayer d'utiliser le control getFeatureInfo des extensions geoportail pour openlayers, plus facilement paramétrable, qui permet d'afficher les informations attributaires des couches vectorielles voulues selon l'événement passé en paramètre :
    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     // Ajout du control GetFeatureInfo pour récupérer les informations attributaires des couches au click unique ("singleclick")
                var getFeatureInfo = new ol.control.GetFeatureInfo({
                        options : {
                            auto : true,
                            active: true,
                            defaultInfoFormat: "text/html",
                            defaultEvent: "singleclick",
                            cursorStyle: "pointer"
                        }
                    });

    Sur le principe, selon moi, cet exemple openLayers répond globalement à ce que vous voulez faire.

  5. #5
    Futur Membre du Club
    Homme Profil pro
    retraité
    Inscrit en
    septembre 2019
    Messages
    17
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 63
    Localisation : France, Vaucluse (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : retraité

    Informations forums :
    Inscription : septembre 2019
    Messages : 17
    Points : 9
    Points
    9
    Par défaut Version openlayers
    Bonjour.
    J'ai essayé d'introduire les lignes préconisées mais je dois mal m'y prendre.
    Quand j'ajoute la partie 1 (création de l'icône) la fonction n'est pas reconnu. Le lien (donc l'exemple que vous expliquez) semble être un exemple d'openlayers version 6.

    J'ai recherché le même exemple avec la version 4, il se trouve a l'adresse suivante : https://openlayers.org/en/v4.6.5/examples/icon.html

    Puis j'ai essayé de l'intégré dans ma page : version d'essai http://chateau.branlant.free.fr/tests/geoportailv4.php

    Et bien sûr je n'arrive toujours pas a afficher mon image ...

    Je continue mes recherches et encore merci pour votre aide.

  6. #6
    Membre actif Avatar de elias couppe
    Homme Profil pro
    Développeur Web
    Inscrit en
    décembre 2014
    Messages
    117
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : décembre 2014
    Messages : 117
    Points : 225
    Points
    225
    Par défaut
    L'exemple passe par des "Import", qui introduisent des alias vers les classes voulus.

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     
    import Feature from 'ol/Feature';
    import Map from 'ol/Map';
    import Overlay from 'ol/Overlay';
    import View from 'ol/View';
    import Point from 'ol/geom/Point';
    import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
    import TileJSON from 'ol/source/TileJSON';
    import VectorSource from 'ol/source/Vector';
    import {Icon, Style} from 'ol/style';


    Je ne l'ai pas adapté, mais en y remplaçant :

    new Feature par new ol.Feature
    new Style par new ol.style.Style
    new Icon par new ol.style.Icon
    new Point par new ol.geom.Point
    new VectorSource par new ol.source.vector
    etc...

    cela devrait mieux fonctionner.

  7. #7
    Futur Membre du Club
    Homme Profil pro
    retraité
    Inscrit en
    septembre 2019
    Messages
    17
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 63
    Localisation : France, Vaucluse (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : retraité

    Informations forums :
    Inscription : septembre 2019
    Messages : 17
    Points : 9
    Points
    9
    Par défaut Un pas de franchi
    Bonjour.
    première étape franchi, mon problème venait de la position de mon image. Je m'en suis rendu compte en mettant le zoom de ma Map à 3, l'image étant bien présente mais loin de ma position ...
    Cette petite modification a été suffisante :
    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    var marcheurFeature = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([mespoints[i].long, mespoints[i].lat])),    //coordonnées de l'image
            name: 'Marcheur'
          });

    Maintenant j’essaie de lier mon image a un évènement. En effet je souhaite que les traces GPX n'apparaissent qu'au survol de l'image.
    Pour ceci j'essaie de comprendre le fonctionnement du control getFeatureInfo des extensions geoportail pour openlayers sans sucés.
    Ci dessous le code qui va afficher mes images et les tracec GPX avec le début de mes recherches qui entraine le message suivant :ReferenceError: getfeatureinfo is not defined.
    Cette page se trouve ici http://chateau.branlant.free.fr/tests/index.php

    Le code principal

    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
    91
    92
    93
    94
    95
    96
    97
    98
    99
    <script>
    function cleapi() {
                    Gp.Services.getConfig({
                        apiKey: 'maclé',
                        onSuccess: loadcarte })
                       };    
     
    function loadcarte()
    {
    // création de la carte
     
    // 
     
    var iconStyle = new ol.style.Style({
            image: new ol.style.Icon(({
              anchor: [0.5,0.5],                                                //image centrée par rapport aux coodonnées
              anchorXUnits: 'fraction',
              anchorYUnits: 'pixels',
              anchorOrigin: 'bottom-left',
              scale : 0.5,                                                       // taille de l'image affichée
              src: '../ressources/balade.gif'
            }))
          });
     
    // création d'un style pour la couche GPX
    var styleGPX = new ol.style.Style({
     stroke: new ol.style.Stroke({color: 'red', width: 3})
    });
     
    var carterandosavoie = new ol.layer.GeoportalWMTS({
                          layer : "GEOGRAPHICALGRIDSYSTEMS.MAPS"  
                                               })
    var map = new ol.Map({
            layers: [carterandosavoie],
            target: document.getElementById('map'),
            view: new ol.View({
            center: ol.proj.fromLonLat([6.28, 45.42]),
          zoom: 13
            })
          }); 
     
    for (i=0;i<mespoints.length-1;i++)
     
    {           
     
    var marcheurFeature = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([mespoints[i].long, mespoints[i].lat])),    //coordonnées de l'image
            name: 'Marcheur'
          });
     
    marcheurFeature.setStyle(iconStyle);                                             // application du style
     
    var vectorSource = new ol.source.Vector({
            features: [marcheurFeature]
          });
     
    var marcheurLayer = new ol.layer.Vector({
            source: vectorSource
          });
    var monGPX = new ol.layer.Vector({
                                source: new ol.source.Vector({
                                url: mespoints[i].dossier+"/carte/carte.gpx",
                                format: new ol.format.GPX()
                                                            }),
                                style: styleGPX 
                                });
    map.addLayer(marcheurLayer); 
    map.addLayer(monGPX);
    }
     
    var getFeatureInfo = new ol.control.GetFeatureInfo({
            layers : [
                {
                    obj : marcheurLayer,
                    infoFormat : "text/html",
                },
                {
                    obj : monGPX,
                    infoFormat : "text/html",
                },
            ],
            options : {
                auto : true,
                active: true,
                defaultInfoFormat: "text/html",
                defaultEvent: "singleclick",
                cursorStyle: "pointer",
            }
        });
     
    map.addControl(getfeatureinfo);
     
    var layerSwitcher = new ol.control.LayerSwitcher({});
     
    map.addControl(layerSwitcher);
    } 
     
    window.onload= cleapi(); 
    </script>

  8. #8
    Membre actif Avatar de elias couppe
    Homme Profil pro
    Développeur Web
    Inscrit en
    décembre 2014
    Messages
    117
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : décembre 2014
    Messages : 117
    Points : 225
    Points
    225
    Par défaut
    Bonjour,

    attention à modifier votre précédent message pour cacher votre clé de développement.

    Sinon, votre erreur sur le getfeatureinfo vient de la syntaxe :

    votre variable se nomme "getFeatureInfo", mais vous utilisez "getfeatureinfo".

    Cela dit, je n'avais pas bien compris que les GPX devaient s'afficher au survol de l'image. Le control getFeatureInfo ne pourra pas vous être d'une grande aide.
    Cet exemple openlayers correspond un peu plus à ce que vous voulez faire.

    J'ai adapté rapidement votre exemple à partir de l'exemple openlayers, et bien que le code ne soit pas joli joli, ca fonctionne. Sur le principe :

    1 - Fonction qui sera appelé au survol de la souris : si une feature est présente sous le curseur, on récupère sa couche GPX associée et on l'affiche. S'il n'y a pas de feature, on rend invisible toutes les couches GPX (pas très optimisé)

    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
     
    var displayFeatureInfo = function (pixel) {
     
            var feature = map.forEachFeatureAtPixel(pixel, function (feature) {
              return feature;
            });
     
            if (feature && layers[feature.get("name")]) {
              layers[feature.get("name")].setVisible(true);
            } else {
              for (var layer in layers) {
                layers[layer].setVisible(false);
              } 
            }
     
          };


    2 - quand le pointeur de la souris bouge, on appelle la fonction "displayFeatureInfo" définie à l'éatpe 1

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
          map.on('pointermove', function (evt) {
            if (evt.dragging) {
              return;
            }
            var pixel = map.getEventPixel(evt.originalEvent);
            displayFeatureInfo(pixel);
          });
     
          var layerSwitcher = new ol.control.LayerSwitcher({});
     
          map.addControl(layerSwitcher);
        };


    Ci après, le code complet, à adapter et améliorer s'il vous convient (j'ai redéfini vos couches dans un tableau) :

    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
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
     
        window.onload = function () {
          var iconStyle = new ol.style.Style({
            image: new ol.style.Icon(({
              anchor: [0.5, 0.5],                                                //image centrée par rapport aux coodonnées
              anchorXUnits: 'fraction',
              anchorYUnits: 'pixels',
              anchorOrigin: 'bottom-left',
              scale: 0.5,                                                       // taille de l'image affichée
              src: '../../resources/balade.gif'
            }))
          });
     
          // création d'un style pour la couche GPX
          var styleGPX = new ol.style.Style({
            stroke: new ol.style.Stroke({ color: 'red', width: 3 })
          });
     
          var carterandosavoie = new ol.layer.GeoportalWMTS({
            layer: "GEOGRAPHICALGRIDSYSTEMS.MAPS"
          })
          var map = new ol.Map({
            layers: [carterandosavoie],
            target: document.getElementById('map'),
            view: new ol.View({
              center: ol.proj.fromLonLat([6.28, 45.42]),
              zoom: 13
            })
          });
     
          var layers = {};
          var mespoints = [
            {
              long: 6.260734,
              lat: 45.521038
            },
            {
              long: 6.367576,
              lat: 45.363049
            },
            {
              long: 6.492942,
              lat: 45.224781
            },
            {
              long: 6.367642,
              lat: 45.374333
            },
          ];
     
          for (i = 0; i < mespoints.length - 1; i++) {
     
            var marcheurFeature = new ol.Feature({
              geometry: new ol.geom.Point(ol.proj.fromLonLat([mespoints[i].long, mespoints[i].lat])),    //coordonnées de l'image
              name: 'carte' + i
            });
     
            marcheurFeature.setStyle(iconStyle);                                             // application du style
     
            var vectorSource = new ol.source.Vector({
              features: [marcheurFeature]
            });
     
            var marcheurLayer = new ol.layer.Vector({
              source: vectorSource,
              id : "carte" + i
            });
            var monGPX = new ol.layer.Vector({
              source: new ol.source.Vector({
                url: "../../resources/gpx/carte" + i + ".gpx",
                format: new ol.format.GPX()
              }),
              visible: false,
              style: styleGPX
            });
            map.addLayer(marcheurLayer);
            map.addLayer(monGPX);
     
            layers[marcheurLayer.getProperties().id] = monGPX;
          }
     
          var displayFeatureInfo = function (pixel) {
     
            var feature = map.forEachFeatureAtPixel(pixel, function (feature) {
              return feature;
            });
     
            if (feature && layers[feature.get("name")]) {
              layers[feature.get("name")].setVisible(true);
            } else {
              for (var layer in layers) {
                layers[layer].setVisible(false);
              } 
            }
     
          };
     
     
          map.on('pointermove', function (evt) {
            if (evt.dragging) {
              return;
            }
            var pixel = map.getEventPixel(evt.originalEvent);
            displayFeatureInfo(pixel);
          });
     
          var layerSwitcher = new ol.control.LayerSwitcher({});
     
          map.addControl(layerSwitcher);
        };

  9. #9
    Futur Membre du Club
    Homme Profil pro
    retraité
    Inscrit en
    septembre 2019
    Messages
    17
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 63
    Localisation : France, Vaucluse (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : retraité

    Informations forums :
    Inscription : septembre 2019
    Messages : 17
    Points : 9
    Points
    9
    Par défaut test de map.on('pointermove', function (evt
    Bonjour.
    J'ai copié votre code et je me trouve toujours devant une impasse.
    Plus rien ne s'affiche (la carte en fond est toujours présente), mais si je neutralise la ligne :
    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    layers[marcheurlayer.getProperties().id] = monGPX;
    alors l'affichage des points se fait de nouveau. En remettant visible les traces GPX je constate qu'elle aussi s'affichent.
    Dans l'aide d'openlayers 4.0 je trouve un setid pour un ol.feature mais pas pour un ol.layer.vector.

    J'ai essayé également un layer.group en espérant avoir accès à la couche monGPX par l'intermédiaire de ce regroupement (ce que j'écris est peut-être aberrant...).

    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    var lesdeux = new ol.layer.Group({
               layers: [marcheurlayer,monGPX],
              visible : true
     });
    map.addLayer(lesdeux);

    Le résultat est surprenant mes image et mes traces (que j'ai laissé visible pour l'essai) sont cachés par le fond de carte, en changeant son opacité dans le gestionnaire de couche elles apparaissent.
    Je poursuis donc mes recherches.
    Je laisse cette étape à l'adresse : http://chateau.branlant.free.fr/tests/index2.php

  10. #10
    Futur Membre du Club
    Homme Profil pro
    retraité
    Inscrit en
    septembre 2019
    Messages
    17
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 63
    Localisation : France, Vaucluse (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : retraité

    Informations forums :
    Inscription : septembre 2019
    Messages : 17
    Points : 9
    Points
    9
    Par défaut Un autre pas de fait
    Bonjour.
    Enfin j'obtiens l'affichage de mes petits marcheurs ... et en passant au-dessus la souris le tracé s'affiche.
    Pour obtenir ce résultat j'ai utilisé le nom de la feature marcheurFeature pour savoir sur qui passe la souris.
    mes traces gpx sont stockées dans un tableau, le nom de la feature y correspondant étant complété par l'indice du tableau.
    Dans la fonction que vous m'avez ajoutée j'ai tester le nom de la feature et si cela correspond a un marcheur je récupère le numéro de l'indice de la trace associée.
    Ce qui donne le code :
    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
    for (i=0;i<mespoints.length-1;i++)
    {           
    var marcheurFeature = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([mespoints[i].long, mespoints[i].lat])),    //coordonnées de l'image
            name: "marcheur"+i                                                                         //le nom est du type marcheurxx et servira pour être reconnu
                                        });
     
    marcheurFeature.setStyle(iconStyle);                                             // application du style
     
    var marcheurSource = new ol.source.Vector({
            features: [marcheurFeature]
                                            });
     
    var marcheurlayer = new ol.layer.Vector({
            source: marcheurSource,
                                           });
     
    mesgpx[i] = new ol.layer.Vector({
                                source: new ol.source.Vector({
                                url: mespoints[i].dossier+"/carte/carte.gpx",
                                format: new ol.format.GPX()
                                                            }),
                                visible: false,
                                style: styleGPX 
                                });
     
    map.addLayer(marcheurlayer);   //ajout a la carte du marcheur
    map.addLayer(mesgpx[i]);       //ajout a la carte de la trace gpx
    };  // fin de la boucle
     
    var displayFeatureInfo = function (pixel) {
     
            var feature = map.forEachFeatureAtPixel(pixel, function (feature) {
                                                                    return feature;
                                                                               }
                                                   );
            var test = feature.get("name");                                                      // lecture du nom qui doit etre du type marcheurxx
            if (test.indexOf("marcheur")>-1) {                                                   // le texte marcheur est présent
                                    if (numerogpxencours!=null){                                 // s'il y a déjà une trace visible la rendre invisible
                                               mesgpx[numerogpxencours].setVisible(false)
                                                               };
                                    numerogpxsurvol = parseInt(test.replace("marcheur",""));     // extraction du numéro
                                    mesgpx[numerogpxsurvol].setVisible(true);                    // la trace correspondant au numéro   est affichée
                                    numerogpxencours= numerogpxsurvol;                           // c'est la nouvelle trace visible
                                               };
                                                }; //fin de la fonction
     
     
    map.on('pointermove', function (evt) {
            if (evt.dragging) {
              return;
                              }
            var pixel = map.getEventPixel(evt.originalEvent);
            displayFeatureInfo(pixel);
            });

    Cette étape est disponible à l'adresse suivantehttp://chateau.branlant.free.fr/tests/index3.php

    Il me reste a faire réagir ma trace gpx à un click pour ouvrir une popup contenant des informations complémentaire.

  11. #11
    Membre actif Avatar de elias couppe
    Homme Profil pro
    Développeur Web
    Inscrit en
    décembre 2014
    Messages
    117
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : décembre 2014
    Messages : 117
    Points : 225
    Points
    225
    Par défaut getFeatureInfo contro
    Pour cette étape, le control getFeatureInfo pourra finalement vous aider :

    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var getFeatureInfo = new ol.control.GetFeatureInfo({
            options : {
                auto : true,
                active: true,
                defaultInfoFormat: "text/html",
                defaultEvent: "singleclick",
                cursorStyle: "pointer",
            }
        });
     
    map.addControl(getFeatureInfo);

    Par défaut, le contrôlé s'active pour toutes les couches ajoutées à la carte. Il est possible de spécifier sur quelles couches le contrôle doit être actif en lui spécifiant le paramètre "layers" (lui passer toutes vos couches GPX dans votre cas) : http://ignf.github.io/geoportal-exte...atureInfo.html

  12. #12
    Futur Membre du Club
    Homme Profil pro
    retraité
    Inscrit en
    septembre 2019
    Messages
    17
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 63
    Localisation : France, Vaucluse (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : retraité

    Informations forums :
    Inscription : septembre 2019
    Messages : 17
    Points : 9
    Points
    9
    Par défaut
    Bonjour.
    Je ne trouve par d'exemple utilisant GetFeatureInfo et ce que j'ai ajouté n'apporte pas de changement.
    Le code ajouté.
    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     var getFeatureInfo = new ol.control.GetFeatureInfo({
            options : {
                auto : true,
                active: true,
                defaultInfoFormat: "text/html",
                defaultEvent: "singleclick",
                cursorStyle: "crosshair",
                        },
            layers:[mesgpx]
             });
     
    map.addControl(getFeatureInfo);
    mesgpx étant un tableau "ol.layer.Vector"
    J'espérai voir mon curseur changé, mais rien ne se produit.
    Comment, à partir de ce bout de code peut-on affiché un popup ?
    Encore merci pour l'aide apportée sans la quelle je ne pourrai avancer.

  13. #13
    Membre actif Avatar de elias couppe
    Homme Profil pro
    Développeur Web
    Inscrit en
    décembre 2014
    Messages
    117
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : décembre 2014
    Messages : 117
    Points : 225
    Points
    225
    Par défaut
    Le paramètre layers du controle getFeature info attend un tableau d'objets qui ressemble à ca :

    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
     
     layers : [
                            {
                                obj : gpx1,
                                infoFormat : "text/html",
                                event: "contextmenu"
                            },
                            {
                                obj : gpx2,
                                infoFormat : "text/html",
                                event: "dblclick"
                            },
                            {
                                obj : gpx3,
                            },
                            {
                                obj : gpx4
                            },
                            {
                                obj : gpx5,
                                event: "contextmenu"
                            }
                        ],

    et les variable gpx1 2 3 4 5 sont des couches openlayers.

    Si votre variable mesgpx est un tableau de gpx, vous pouvez faire :
    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
     layers : [
                            {
                                obj : mesgpx[0],
                                infoFormat : "text/html",
                                event: "contextmenu"
                            },
                            {
                                obj : mesgpx[1],
                                infoFormat : "text/html",
                                event: "dblclick"
                            },
                            {
                                obj : mesgpx[2],
                            },
                            {
                                obj : mesgpx[3]
                            },
                            {
                                obj : mesgpx[4],
                                event: "contextmenu"
                            }
                        ],
    Le plus simple étant quand même de directement construire une variable que l'on pourrait appeler "getfeatureinfoLayers" qui corresponde à l'objet attendu par le controle, et de la remplir au fur et à mesure à l'intérieur de votre boucle. Il suffira alors juste spécifier cette variable lors de l'ajout de votre getFeatureInfoControl :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    layers : getfeatureinfoLayers
    infoFormat et event sont facultatifs et permettent de spécifier pour chaque couche comment et en réponse à quel événement la pop-up doit s'afficher.

  14. #14
    Futur Membre du Club
    Homme Profil pro
    retraité
    Inscrit en
    septembre 2019
    Messages
    17
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 63
    Localisation : France, Vaucluse (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : retraité

    Informations forums :
    Inscription : septembre 2019
    Messages : 17
    Points : 9
    Points
    9
    Par défaut utilisation de GetFeatureInfo
    Suite a vos conseils voilà ce que j'ai ajouté :
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    function infos(legpx,linfoformat,levent){
    this.obj = legpx;
    this.infoformat = linfoformat;
    this.event = levent;
    }
    var objmesgpx = new Array();
    et dans ma boucle qui va chercher les gpx ( :

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    objmesgpx[i] = new infos(mesgpx[i],"text/html","dblclick");
    et après la lecture de toute les traces gpx:
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     
    var getFeatureInfo = new ol.control.GetFeatureInfo({
            options : {
                auto : true,
                active: true,
                defaultInfoFormat: "text/html",
                defaultEvent: "singleclick",
                cursorStyle: "pointer",
                        },
              layers : objmesgpx
                       });

    Le pointeur de la souris change bien de forme en passant sur la trace gpx, mais pour reprendre la forme par défaut il faut repasser sur le marcheur.
    Par contre je ne trouve pas comment ouvrir un popup après un clic.
    Existe-il un descriptif complet de l'api geoprtail actuelle.
    Beaucoup de lien vers des exemples n'étant plus valables il est difficile de trouver tout seul les multiples possibilités offerte par cette api.

  15. #15
    Membre actif Avatar de elias couppe
    Homme Profil pro
    Développeur Web
    Inscrit en
    décembre 2014
    Messages
    117
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : décembre 2014
    Messages : 117
    Points : 225
    Points
    225
    Par défaut
    Bonjour,

    la documentation est des extensions géoportail pour openlayers est ici : https://geoservices.ign.fr/documenta...ension-ol.html
    Les exemples sont normalement fonctionnels : il faut cliquer sur l'icone JSFiddle pour les ouvrir.

    La documentation technique est quant à elle ici : http://ignf.github.io/geoportal-exte...-latest/jsdoc/

    Concernant votre problème :

    Lors de la création du contrôle, vous lui demandez de réagir à l'événement "singleclick" (click unique).

    Mais lorsque vous remplissez vos paramètres getFeatureInfo pour vos couches, vous leur demandez de réagir à l'événement "dblclick" (double click) :
    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    objmesgpx[i] = new infos(mesgpx[i],"text/html","dblclick");

    Cela va surcharger votre premier réglage. Si vous souhaitez que toutes vos couches réagissent au click simple :

    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    objmesgpx[i] = new infos(mesgpx[i],"text/html","singleclick");

    N'hésitez pas à nous renvoyer le lien vers votre page de test.

  16. #16
    Futur Membre du Club
    Homme Profil pro
    retraité
    Inscrit en
    septembre 2019
    Messages
    17
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 63
    Localisation : France, Vaucluse (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : retraité

    Informations forums :
    Inscription : septembre 2019
    Messages : 17
    Points : 9
    Points
    9
    Par défaut modification sans effet
    Bonjour.
    J'ai effectué la correction :
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    objmesgpx[i] = new infos(mesgpx[i],"text/html","singleclick");

    Malheureusement d'autre erreurs doivent subsister.
    Le pointeur de la souris change bien de forme en passant sur la trace gpx, mais quand on sort de celle-ci il ne reprend pas la forme initiale.
    Comment paramétrer le pointeur quand il est au-dessus du "marcheur", quand il est au-dessus de la carte?

    Aucun "popup" ne s'ouvre, l’événement singleclick est-il bien actif ? je n'arrive pas à le tester.
    En m'appuyant sur le script de l'exemple :
    https://jsfiddle.net/ignfgeoportail/...t,js,html,css/

    J'ai ajouté sans succès :
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    var infoDiv = document.getElementById("info");
    infoDiv.innerHTML = "<p> Extension OL version " + Gp.olExtVersion + " (" + Gp.olExtDate + ")</p>";

    En utilisant l'outil de développement de Firefox, sous l'onglet console j'obtiens les messages suivant :
    Nom : Sans nom-1.jpg
Affichages : 18
Taille : 603,5 Ko

    Ma page se trouve à l'adresse suivante : http://chateau.branlant.free.fr/tests/index4.php

Discussions similaires

  1. [FOP] [XSL-FO] Problèmes de passage de la version 0.20.5 à 1.0
    Par HomoErectus dans le forum XSL/XSLT/XPATH
    Réponses: 2
    Dernier message: 10/01/2011, 01h44
  2. Passage d'une version SNAPSHOT à la version figée
    Par _-Sky-_ dans le forum Maven
    Réponses: 1
    Dernier message: 26/06/2009, 13h24
  3. [WDINT] - Passage de la version 8 à la 10 ?
    Par pgcdn2 dans le forum WinDev
    Réponses: 1
    Dernier message: 29/04/2008, 14h48
  4. Réponses: 12
    Dernier message: 15/04/2008, 13h47
  5. Passage de la version 5.1.6 à la version 5.2.5
    Par Clemiou dans le forum Langage
    Réponses: 5
    Dernier message: 10/04/2008, 11h21

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