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 :

utilisation de ol.control.drawing


Sujet :

IGN API Géoportail

  1. #1
    Futur Membre du Club
    Profil pro
    Inscrit en
    mars 2012
    Messages
    14
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mars 2012
    Messages : 14
    Points : 9
    Points
    9
    Par défaut utilisation de ol.control.drawing
    Bonjour,
    dans une application web spring boot, j'affiche des cartes ign.
    J'ai ajouté le control ol.control.drawing pour dessiner sur ces cartes :

    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    const dessinsFeatures = new ol.Collection();
    const drawLayer = new ol.layer.Vector({
    		source: new ol.source.Vector({
    			features: dessinsFeatures
    		})
    	});
    map = new ol.Map({   layers: [drawLayer,... ], ...});
    const drawControl = new ol.control.Drawing({
    		layer: drawLayer});	
    map.addControl(drawControl);

    Cela fonctionne bien, un bouton "annoter la carte" me permet de dessiner.
    Je voudrais lire et enregistrer mon dessin dans un champ String de ma base de données.
    Apparemment je peux utiliser OpenLayers.Format.GeoJSON readFeatures et writeFeatures.

    Comment puis-je faire pour enregistrer le dessin après chaque modification faite par l'utilisateur, quel événement utiliser ?

    Cordialement.

  2. #2
    Membre confirmé Avatar de elias couppe
    Homme Profil pro
    Développeur Web
    Inscrit en
    décembre 2014
    Messages
    253
    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 : 253
    Points : 456
    Points
    456
    Par défaut
    Bonjour,

    votre question ayant déjà été plus ou moins posée sur ce forum, je vous renvoie vers les sujets en questions :

    https://www.developpez.net/forums/d2...g-4-questions/

    https://www.developpez.net/forums/d2...l-drawing-api/

    Il y a normalement quelques pistes que je vous invite à explorer. Toutefois, n'hésitez pas à revenir vers nous sur ce thread si vous ne trouvez pas de réponse adéquate dans ces discussions, ou si vous avez des questions complémentaires en lien avec votre problème.

    A l'inverse, si cela permet de résoudre votre problème, n'hésitez pas non plus à partager votre solution ici.

  3. #3
    Futur Membre du Club
    Profil pro
    Inscrit en
    mars 2012
    Messages
    14
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mars 2012
    Messages : 14
    Points : 9
    Points
    9
    Par défaut
    Ok merci beaucoup Elias pour les infos.
    J'attaque la lecture et sauvegarde en base...

  4. #4
    Futur Membre du Club
    Profil pro
    Inscrit en
    mars 2012
    Messages
    14
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mars 2012
    Messages : 14
    Points : 9
    Points
    9
    Par défaut
    Bonjour,
    j'ai ajouté la lecture et sauvegarde en base :

    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
    const format = new ol.format.GeoJSON({  });
    // lecture en base, rucher.dessin contient le dessin enregistré
    const dessinsFeatures = (rucher.dessin === null)?new ol.Collection():new ol.Collection(format.readFeatures(rucher.dessin));
    const drawLayer = new ol.layer.Vector({
    	source: new ol.source.Vector({
    			features: dessinsFeatures
    		})
    });
    map = new ol.Map({   layers: [drawLayer,... ], ...});
    const drawControl = new ol.control.Drawing({
    		layer: drawLayer});	
    map.addControl(drawControl);
     
    // la sauvegarde du dessin déclenchée par un clic sur un bouton
    $('#sauve-dessin').click(function() {
    		sauveDessin();
    	});
    function sauveDessin() {
    	const req = new XMLHttpRequest();
        	req.open('POST', ruchesurl + 'rucher/sauveDessin/' + rucher.id, true);
    	req.setRequestHeader('x-csrf-token', _csrf_token);
    	req.onload = function() {
    	        if (req.readyState === 4) {
    	            if (req.status === 200) {
    	                if (req.responseText !== "OK") {
    	                    alert(req.responseText);	
    	                } else {
    	                	alert("Dessin enregistré");
    	                }
    	            }
    	        }
    	    };
    	    req.send(format.writeFeatures(drawLayer.getSource().getFeatures()));
    }

    Cela fonctionne assez bien pour les polygones et polylignes. Par contre les textes ne se réaffichent pas au rechargement.
    Ils sont enregistrés en geojson sous la forme:
    Code JSON : Sélectionner tout - Visualiser dans une fenêtre à part
    {"type":"Feature","geometry":{"type":"Point","coordinates":[611358.9040822313,5386919.540024526]},"properties":{"name":"Hello !"}}

  5. #5
    Futur Membre du Club
    Profil pro
    Inscrit en
    mars 2012
    Messages
    14
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mars 2012
    Messages : 14
    Points : 9
    Points
    9
    Par défaut
    Petite précision j'utilise openlayers 6.3.1 qui ne me posait pas de problème jusqu'à maintenant mais le bouton "Modifier l'apparence des objets" n'a pas l'air de fonctionner.
    J'ai vu sur https://github.com/IGNF/geoportal-extensions qu'il y avait une "pull resquest" upgrade to ol6...

    Pour info, mon application sert à gérer des ruchers :
    https://gitlab.com/ruches/ruches
    https://gitlab.com/ruches/ruches-doc

    Cordialement.

  6. #6
    Futur Membre du Club
    Profil pro
    Inscrit en
    mars 2012
    Messages
    14
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mars 2012
    Messages : 14
    Points : 9
    Points
    9
    Par défaut
    Bonjour,
    j'ai remis la version 5.3.3 d'openlayers et le bouton "modifier les apparences" fonctionne.
    J'ai aussi remplacé le format geoJson par KML :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    const format = new ol.format.KML({  });
    et je peux enregistrer ces styles.

    Il ne reste plus que les textes qui ne se réaffichent pas. En kml le texte est enregitré sous la forme :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/kml/2.2 https://developers.google.com/kml/schema/kml22gx.xsd">
    <Placemark><name>aaaaaaaaaa</name>
    <Style><IconStyle><Icon><href>data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGNiYAAAAAkAAxkR2eQAAAAASUVORK5CYII=</href><gx:w>1</gx:w><gx:h>1</gx:h></Icon><hotSpot x="0" y="1" xunits="pixels" yunits="pixels"/></IconStyle><LabelStyle><color>ff000000</color></LabelStyle></Style>
    <Point><coordinates>607259.9428544175,5386953.014601167</coordinates></Point>
    </Placemark></kml>

  7. #7
    Membre confirmé Avatar de elias couppe
    Homme Profil pro
    Développeur Web
    Inscrit en
    décembre 2014
    Messages
    253
    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 : 253
    Points : 456
    Points
    456
    Par défaut
    Bonjour,

    merci pour vos retours.

    Il y a effectivement une PR côté extensions géoportail pour une montée de version d'openlayers. D'ailleurs, n'hésitez pas à ouvrir une issue / commenter la PR si vous constatez un problème particulier lié à OL6.

    Concernant le problème restant du ré-affichage des textes des KML, auriez-vous une URL publique ou un démonstrateur de votre application, pour que nous puissions directement et rapidement expérimenter le problème ?

    Merci

  8. #8
    Futur Membre du Club
    Profil pro
    Inscrit en
    mars 2012
    Messages
    14
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mars 2012
    Messages : 14
    Points : 9
    Points
    9
    Par défaut
    Bonjour,
    j'ai créé une page dessin.html qui appelle un script dessin.js, c'est ici :

    http://ooioo.free.fr/6.5.0/dessin.html
    le script js :
    http://ooioo.free.fr/6.5.0/dessin.js

    Trois liens permettent d'enregister, afficher et supprimer les données formattées en KML dans localStorage du navigateur.
    Au chargement de la page, le script lit et affiche les données sauvegardées en localStorage.

    Pour voir le problème des textes qui ne se réaffichent pas :
    - charger la page http://ooioo.free.fr/6.5.0/dessin.html
    - créer un dessin avec le bouton "annoter la carte"
    - l'enregistrer en localStorage avec le lien "Enregistre"
    - recharger la page avec F5 : les dessins s'affichent sauf les textes
    - afficher le code KML sauvegardé en localStorage avec le lien "Affiche"

    Voila voila je ne sais pas si c'est exploitable...

    Cordialement;

  9. #9
    Membre actif Avatar de lowzonenose
    Homme Profil pro
    Développeur informatique
    Inscrit en
    mai 2014
    Messages
    113
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : mai 2014
    Messages : 113
    Points : 258
    Points
    258
    Par défaut
    Peut être qu'il faudrait utiliser ol.format.KMLExtended au lieu de ol.format.KML ?
    À tester...

  10. #10
    Futur Membre du Club
    Profil pro
    Inscrit en
    mars 2012
    Messages
    14
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mars 2012
    Messages : 14
    Points : 9
    Points
    9
    Par défaut
    Oui, bravo ça marche mais j'ai du passer en openlayers 5.3.3, avec la 6.5.0 j'avais une erreur javascript.

    http://ooioo.free.fr/5.3.3/dessin.html
    http://ooioo.free.fr/5.3.3/dessin.js

    Le style des textes après rechargement n'est pas très lisible !

    On remarquera aussi qu'en version 6.5.0 le contrôle "modifier l'apparence des objets" ne fonctionne pas.

  11. #11
    Membre actif Avatar de lowzonenose
    Homme Profil pro
    Développeur informatique
    Inscrit en
    mai 2014
    Messages
    113
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : mai 2014
    Messages : 113
    Points : 258
    Points
    258
    Par défaut
    Citation Envoyé par ubunoe Voir le message
    avec la 6.5.0 j'avais une erreur javascript.
    On remarquera aussi qu'en version 6.5.0 le contrôle "modifier l'apparence des objets" ne fonctionne pas.
    Je suis intéressé par les erreurs sur OpenLayers 6 !

  12. #12
    Futur Membre du Club
    Profil pro
    Inscrit en
    mars 2012
    Messages
    14
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mars 2012
    Messages : 14
    Points : 9
    Points
    9
    Par défaut
    Pour les choses qui ne fonctionnent plus avec ol 6.5.0 j'ai constaté :
    - le bouton des outils ol.control.MeasureLength(), ol.control.MeasureArea()... ne fonctionne plus, quand on clique dessus la dropdown ne s'ouvre plus
    puis celle déjà citées ci-dessus :
    - le bouton "Modifier l'apparence des objets" du contrôle ol.control.Drawing ne fonctionne plus, quand on clique dessus la popup de choix des styles ne s'ouvre pas
    - ol.format.KMLExtended qui génère une erreur javascript

  13. #13
    Membre actif Avatar de lowzonenose
    Homme Profil pro
    Développeur informatique
    Inscrit en
    mai 2014
    Messages
    113
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : mai 2014
    Messages : 113
    Points : 258
    Points
    258
    Par défaut
    Merci pour les infos !
    Ceci nous est utile pour la migration sous OpenLayers 6 prochaine

  14. #14
    Futur Membre du Club
    Profil pro
    Inscrit en
    mars 2012
    Messages
    14
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mars 2012
    Messages : 14
    Points : 9
    Points
    9
    Par défaut
    Bonjour,
    dans le test de ol.control.Drawing avec openlayers 5.3.3 :

    http://ooioo.free.fr/5.3.3/dessin.html
    http://ooioo.free.fr/5.3.3/dessin.js


    quand on crée un polygone, une popup permet de "Saisir une description" et de l'enregistrer.
    Par contre les informations de cette popup ne sont pas affichées quand on clique par la suite sur le polygone.

    J'ai gardé les valeurs par défaut pour la popup dans les options de ol.control.Drawing
    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    const drawControl = new ol.control.Drawing({
        layer: drawLayer
      });

    Sur geoportail.gouv.fr ça fonctionne bien sûr.

    Vous auriez une piste ?

    Cordialement.

  15. #15
    Membre confirmé Avatar de elias couppe
    Homme Profil pro
    Développeur Web
    Inscrit en
    décembre 2014
    Messages
    253
    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 : 253
    Points : 456
    Points
    456
    Par défaut
    Bonjour,

    si je ne dis pas de bêtise, il vous faut ajouter et activer le control getFeatureInfo --> Documentation du control

    Par exemple voici son paramétrage sur le géoportail (à adapter selon vos besoins) :
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     
        var gfi = new ol.control.GetFeatureInfo({
                options : {
                    auto : true,
                    active : true,
                    defaultEvent : "singleclick",
                    cursorStyle : "pointer"
                }
            });
     
        map.addControl(gfi);


    Cordialement

  16. #16
    Futur Membre du Club
    Profil pro
    Inscrit en
    mars 2012
    Messages
    14
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mars 2012
    Messages : 14
    Points : 9
    Points
    9
    Par défaut
    Super, je l'ai ajouté dans :

    http://ooioo.free.fr/5.3.3/dessin.html
    http://ooioo.free.fr/5.3.3/dessin.js

    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
      const gfi = new ol.control.GetFeatureInfo({
                layers: [{
                        obj : drawLayer,
                        event: 'singleclick'
                }],
                options : {
                    auto: false
                }
        });
        map.addControl(gfi);

    et ça fonctionne parfaitement.

    Merci !

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 17
    Dernier message: 15/12/2020, 10h16
  2. Utilisation de source control Jdeveloper
    Par osman.amine dans le forum JDeveloper
    Réponses: 1
    Dernier message: 11/06/2007, 21h29
  3. Réponses: 1
    Dernier message: 06/09/2006, 14h21
  4. Réponses: 1
    Dernier message: 20/08/2006, 17h34
  5. Utilisation du Source Control
    Par osman.amine dans le forum JDeveloper
    Réponses: 1
    Dernier message: 07/07/2006, 17h59

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