utilisation de ol.control.drawing

Version imprimable

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:

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.

11/02/2021, 17h12
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.
11/02/2021, 18h40
ubunoe

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

Bonjour,
j'ai ajouté la lecture et sauvegarde en base :

Code:

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:

{"type":"Feature","geometry":{"type":"Point","coordinates":[611358.9040822313,5386919.540024526]},"properties":{"name":"Hello !"}}

12/02/2021, 15h53
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.

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:

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:

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>

15/02/2021, 13h31
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
16/02/2021, 17h45
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;
16/02/2021, 18h15
lowzonenose

Peut être qu'il faudrait utiliser ol.format.KMLExtended au lieu de ol.format.KML ?
À tester...
16/02/2021, 19h02
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.
16/02/2021, 21h01
lowzonenose

Citation:

Envoyé par ubunoe

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 !
17/02/2021, 12h38
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
17/02/2021, 14h13
lowzonenose

Merci pour les infos !
Ceci nous est utile pour la migration sous OpenLayers 6 prochaine
26/02/2021, 15h43
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:

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.

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:

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

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:

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 !