Discussion :

[ubunoe]

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.

[elias couppe]

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.

[ubunoe]

Ok merci beaucoup Elias pour les infos.
J'attaque la lecture et sauvegarde en base...

[ubunoe]

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 !"}}

[ubunoe]

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.

[ubunoe]

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>

[elias couppe]

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

[ubunoe]

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;

[lowzonenose]

Peut être qu'il faudrait utiliser ol.format.KMLExtended au lieu de ol.format.KML ?
À tester...

[ubunoe]

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.

[lowzonenose]

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 !

[ubunoe]

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

[lowzonenose]

Merci pour les infos !
Ceci nous est utile pour la migration sous OpenLayers 6 prochaine

[ubunoe]

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.

[elias couppe]

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

[ubunoe]

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 !