récupérer les coordonnées d'un polygone tracé avec Drawing

**dom73** · 13/11/2022, 23h35

Bonjour

Pour les besoins d'une application de données naturalistes, je sais récupérer, dans un formulaire, les coordonnées d'un point cliqué sur la carte (API Geoportail + plugin OpenLayers) comme dans la page ICI. Je transfère ensuite le champs de ce formulaire dans une base MySQL pour gérer des observations, par exemple

J'aimerais pouvoir faire la même chose avec des polygones tracés sur la carte par un utilisateur à partir du control Drawing, c'est à dire les récupérer dans un champ de formulaire pour pouvoir les stocker ; je ne trouve pas comment gérer le polygone tracé, à part l'option "exporter" d'où je peux ensuite, manuellement, récupérer le champ <coordinates> mais peut-on automatiser ça ?

Merci pour votre aide

Dom

**xavlight** · 14/11/2022, 09h55

Bonjour dom73,

j'avais planché il y a quelques temps sur le sujet, je te laisse profiter d'un sujet que j'avais ouvert.
Normalement il y a toutes les réponses.

Dès le début pour toi, dans le cas de la création, dans le code fourni (ligne 30).

var drawArea = new ol.control.Drawing({... => popup:... => function : function (params) {...

https://www.developpez.net/forums/d2...ression-forme/

Je te laisse tester et expérimenter.
Dis-moi si ça répond bien à ta demande.

Xav

**dom73** · 14/11/2022, 17h40

Bonjour et merci pour cette réponse qui devrait, en effet, contenir la solution à mon problème puisque c'est exactement la situation que je recherche !
Mais je suis plutôt incompétent en javascript (je manque clairement des bases les plus élémentaires sur les objets et leurs propriétés...) et j'ai du mal à transposer ta solution de popup

Voici ma page de test : je peux dessiner le polygone dans la couche drawLayer mais le popup ne s'affiche pas avec les infos attendues : quand j'édite les propriétés de l'objet (outils d'édition / textes-infosbulles), je lis bien "zone 1" et la surface, donc quelques éléments sont bien récupérés mais pas les coordonnées

Je suis preneur de quelques explications complémentaires

Voici mon code

Code :

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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<script type="text/javascript">
window.onload = function go() {

// variables pour polygone
var dessinsFeatures = new ol.Collection();
var addZones = []; //Tableau des zones de croquis que j'ajoute à l'ajout
 
// couches de la carte
var ortho_layer = new ol.layer.Tile
			({
                source: new ol.source.GeoportalWMTS
				({
                    layer: "ORTHOIMAGERY.ORTHOPHOTOS"
                }),
                opacity: 0.7
            });
var maps_layer = new ol.layer.Tile
			({
                source: new ol.source.GeoportalWMTS
				({
                    layer: "GEOGRAPHICALGRIDSYSTEMS.MAPS"
                }),
                opacity: 0.7
            });
// couche polygone
var drawLayer = new ol.layer.Vector({
	source: new ol.source.Vector({
		features: dessinsFeatures
	})
});	

// carte
var map = new ol.Map
	({
        target: 'map',
        layers: [ortho_layer,maps_layer,drawLayer],
        view: new ol.View
		({
            center: ol.proj.transform([6.4, 45.5], 'EPSG:4326', 'EPSG:3857'),
			zoom: 9,
        })
    });


// gestion du dessin du polygone => popup
var drawArea = new ol.control.Drawing({
	collapsed : true, //widget non affichée au départ
	draggable : true, //widget déplaçable
	layer: drawLayer, //Type de layer utilisé
	defaultStyles : {},
	cursorStyle : {},
	tools : {
		points : true,
		lines : true,
		polygons :true,
		holes : true,
		text : false,
		remove : true,
		display : false, //Modifier les couleurs
		tooltip : true, //Modifier une description associé à l'annotation
		export : false, //Export
		measure : true //Calcul la mesure
	},
	popup : {
		display : true,
		function : function (params) {
			console.log(params);
 
			var feature = params.feature;
			var geometry = feature.getGeometry();
 
			var id = params.feature.ol_uid;
			var coord = geometry.getCoordinates();
			var type = geometry.getType();
			var getProperties = feature.getProperties();
			var mesure = feature.get('measure');
 
			console.log(coord); //tableau des coordonnées de la forme
			console.log(type); //Type de forme
			console.log(getProperties); //Propriété complète de l'objet croquis
			mesure = mesure.replace("^2", "²");
			console.log(mesure);
 
			var container = document.createElement("div");
 
			var numZone = addZones.length + 1;
			addZones.push({id: id, type: type, coord: coord, mesure: mesure, zone: "zone " + numZone });
			console.log(addZones)
 
			params.saveFunc("zone " + numZone);
 
			return container;
		}
	}
});
map.addControl(drawArea);

// Création du Layer Switcher et ajout à la carte
var lsControl = new ol.control.LayerSwitcher({});
map.addControl(lsControl);

// récupération des coordonnées et de l'altitude au clic
map.on('singleclick',function (e) {
var clickCoord = e.coordinate;
var clickCoordLonLat = ol.proj.transform(clickCoord, map.getView().getProjection(), 'EPSG:4326');
	Gp.Services.getAltitude({
		apiKey : "calcul",
		positions : [ // positions pour le calcul alti
			{ lon: clickCoordLonLat[0], lat: clickCoordLonLat[1] },
		],
		onSuccess : function (result) {
            //renvoi dans le formulaire de lat et lon arrondies à 6 chiffres et altitude arrondi à l'entier
			document.monform.lon.value=Math.round(1000000*clickCoordLonLat[0])/1000000;
			document.monform.lat.value=Math.round(1000000*clickCoordLonLat[1])/1000000;
			document.monform.alt.value=Math.round(result.elevations[0].z);
		}
	});
}
);

// fin fonction go
}
</script>

Deuxième piste explorée : idéalement, je voudrais récupérer les coordonnées dans le champ "polygon" de mon formulaire en bas de page comme je récupère les coordonnées d'un point.
Sur l'événement "change" sur la couche drawLayer, je tente une mise à jour du champ "polygon" de mon formulaire et ça marche : quand je mets une constante, elle s'affiche bien dans mon champ de formulaire dès que j'ai fini de dessiner le polygone

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
drawLayer.on("change", function(e) {
		var coordonnees='256';
		document.monform.polygon.value=coordonnees;

mais je ne sais pas comment récupérer les coordonnées du polygone pour les placer là

Là aussi , un petit coup de pouce me débloquerait...

Merci d'avance

**xavlight** · 14/11/2022, 19h17

Re,

bon, si tu connais pas le javascript, ça va pas être très simple.
langage côté front pour faire ces opérations.

Il y a plusieurs console.log qui permettent de voir des valeurs (mode debug).
Pour les afficher, il faut que tu actives le mode 'inspecter' avec [F12] pour Chrome

Il y a une variable tableau addZones qui contient le ou les formes ajoutées (polygone, line, point).
Si tu souhaites afficher les infos concernant les formes ajouter, il faut convertir le tableau en chaine, format JSON (par exemple), pour afficher les informations dans ton champ.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
//A retrouver dans le code
console.log(addZones);
//Ajouter à la suite
var zonesJson = JSON.stringify(addZones); //Converti le tableau en chaine de caractères -
console.log("JSON des formes", zonesJson);
var inputPolygon = document.querySelector("form input[name=polygon]");
inputPolygon.value = zonesJson;

Voilà quelques informations complémentaires.
Pas testé, mais ça devrait te faire avancer.

Dans le code je construis un tableau addZones avec quelques informations incluses.

id : le code id de la forme qui a été créée (à chaque forme, il y a un id différent)
type : type de la forme (polygon, linestring, point)
coord : suite des coordonnées de la forme (ces coordonnées sont en métriques - web Mercator - EPSG:3857)
mesure : taille de la forme
nom de la forme : affecté automatiquement dans mon code.
Tu pourrais demander une popup qui s'affiche pour demander le nom de ta forme
Dans ce cas, tu dois juste commenter cette ligne qui empêche l'affichage de la popup de saisie du libellé de la forme (mettre devant la ligne //).
Code : Sélectionner tout - Visualiser dans une fenêtre à part
```
//var container = document.createElement("div"); //Pour ne pas afficher le popup de libellé
```

J'espère t'avoir donné suffisamment de détails que tu puisses continuer.

Xav

**dom73** · 15/11/2022, 00h35

Merci pour ces nouveaux éléments qui me permettent, en effet, d'afficher les éléments de addZones dans mon champ de formulaire
J'ai fait la conversion en EPSG4326 au passage
Je nettoie ensuite la chaîne JSON au traitement du formulaire pour récupérer le texte brut des coordonnées du polygone
On peut sans doute faire plus propre mais ça fontionne bien
Encore merci !

**dom73** · 16/11/2022, 22h15

Bonsoir
Comme on pouvait s'y attendre, j'ai maintenant besoin de pouvoir modifier un polygone précédemment récupéré à partir du ol.control.Drawing !
Donc, je recharge le polygone à partir d'un fichier KML et j'utilise l'outil d'édition de tracé pour le modifier. Jusque là, tout va bien !
Pour récupérer les nouvelles coordonnées du polygone, j'ai essayé de m'inspirer de ce que tu proposes sur https://www.developpez.net/forums/d2...ression-forme/, c'est à dire sur l'événement on.change de la drawLayer
Mais je ne sais pas comment accéder aux propriétés du polygone modifié pour récupérer le contenu de addZones : le console.log renvoie bien le addZones mais il est vide

voici mon code

Code :

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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
window.onload = function go() {

// variables pour polygone
var dessinsFeatures = new ol.Collection();
var addZones = []; //Tableau des zones de croquis que j'ajoute à l'ajout
 
// couches de la carte
var ortho_layer = new ol.layer.Tile
			({
                source: new ol.source.GeoportalWMTS
				({
                    layer: "ORTHOIMAGERY.ORTHOPHOTOS"
                }),
                opacity: 0.7
            });
var maps_layer = new ol.layer.Tile
			({
                source: new ol.source.GeoportalWMTS
				({
                    layer: "GEOGRAPHICALGRIDSYSTEMS.MAPS"
                }),
                opacity: 0.7
            });
// couche pour afficher et modifier le tracé du polygone du territoire à modifier
var drawLayer = new ol.layer.Vector
			({
				source: new ol.source.Vector
				({
					//features: dessinsFeatures,
					format : new ol.format.KML
					({
						extractStyles:true,
						extractAttributes:true
					}),
					url : 'territoire.kml'
				})
			});	

// carte
var map = new ol.Map
	({
        target: 'map',
        layers: [ortho_layer,maps_layer,drawLayer],
        view: new ol.View
		({
            //center: ol.proj.transform([6.4, 45.5], 'EPSG:4326', 'EPSG:3857'),
            center: ol.proj.transform([<?php print $center; ?>], 'EPSG:4326', 'EPSG:3857'),
			zoom: 12,
        })
    });

// Création du Layer Switcher et ajout à la carte
var lsControl = new ol.control.LayerSwitcher({});
map.addControl(lsControl);

// récupération des coordonnées et de l'altitude au clic
map.on('singleclick',function (e) {
var clickCoord = e.coordinate;
var clickCoordLonLat = ol.proj.transform(clickCoord, map.getView().getProjection(), 'EPSG:4326');
	Gp.Services.getAltitude({
		apiKey : "calcul",
		positions : [ // positions pour le calcul alti
			{ lon: clickCoordLonLat[0], lat: clickCoordLonLat[1] },
		],
		onSuccess : function (result) {
            //renvoi dans le formulaire de lat et lon arrondies à 6 chiffres et altitude arrondi à l'entier
			document.monform.lon.value=Math.round(1000000*clickCoordLonLat[0])/1000000;
			document.monform.lat.value=Math.round(1000000*clickCoordLonLat[1])/1000000;
			document.monform.alt.value=Math.round(result.elevations[0].z);
		}
	});
}
);

// 
var drawArea = new ol.control.Drawing({
	collapsed : true, //widget non affichée au départ
	draggable : true, //widget déplaçable
	layer: drawLayer, //Type de layer utilisé
	defaultStyles : {},
	cursorStyle : {},
	tools : {
		points : true,
		lines : true,
		polygons :true,
		text : false,
		remove : true,
		edit : true, //Modifier un tracé
		display : false, //Modifier les couleurs
		tooltip : true, //Modifier une description associé à l'annotation
		export : false, //Export
		measure : true //Calcul la mesure
	},
	popup : {
		display : true,
		function : function (params) {
			console.log(params);
 
			var feature = params.feature;
			var geometry = feature.getGeometry();
 
			var id = params.feature.ol_uid;
			var coord = geometry.getCoordinates();
			//transformation de l'EPSG du polygone en WGS84 - précédé d'une duplication du polygone (sinon, le polygone s'efface en fin de tracé)
			geometry2=geometry.clone();
			polygone=geometry2.transform('EPSG:3857', 'EPSG:4326');			
			var coord_wgs84 = polygone.getCoordinates();
			var type = geometry.getType();
			var getProperties = feature.getProperties();
			var mesure = feature.get('measure');
 
			console.log(coord); //tableau des coordonnées de la forme
			console.log(coord_wgs84); //tableau des coordonnées de la forme
			console.log(type); //Type de forme
			console.log(getProperties); //Propriété complète de l'objet croquis
			mesure = mesure.replace("^2", "²");
			console.log(mesure);
 
			var container = document.createElement("div");
 
			var numZone = addZones.length + 1;
			addZones.push({id: id, type: type, coord: coord_wgs84, mesure: mesure, zone: "zone " + numZone });
			console.log(addZones)
/*
var zonesJson = JSON.stringify(addZones); //Converti le tableau en chaine de caractères -
console.log("JSON des formes", zonesJson);
var inputPolygon = document.querySelector("form input[name=polygon]");
inputPolygon.value = zonesJson;
*/ 
			params.saveFunc("zone " + numZone);
 
			return container;
		}
	}
});
map.addControl(drawArea);

// on change de la DrawLayer, renvoyer le contennu de addZones au champ "polygon" du formulaire
drawLayer.on("change", function(e) {
var zonesJson = JSON.stringify(addZones); //Converti le tableau en chaine de caractères -
console.log("JSON des formes 2", zonesJson);
var inputPolygon = document.querySelector("form input[name=polygon]");
inputPolygon.value = zonesJson;
});

// fin fonction go
}

**xavlight** · 17/11/2022, 17h15

Salut Dom,

voici ton test avec une intégration de la gestion des modifications et suppressions.
J'ai mis pas mal de commentaires pour que ça t'aide.

Ne sachant pas trop ce que tu souhaites faire, pas évident.
Il y a plusieurs possibilités.

si tu utilises 'drawLawer.on("change" ...', dans ce cas tu récupères toutes les features, dès qu'il y a un changement sur 1.

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
drawLayer.on("change", function(e) {
	//Ici tu récupères toutes les formes existantes
	console.log("this source", this.getSource().getFeatures());
});

Pour l'exemple, j'ai préféré mettre en place la détection de la source.
Car le fait de faire une modification, déplacer un point, tu passes dans le 'on("changefeature")', j'ai donc fait une tempo de 1,5 sec avant déclencher une opération.
Tu pourras facilement changer la durée du timer, voir le retirer si tu veux.
Peut-être d'autres méthodes, mais pas chercher plus.

Mais avec tout ça, tu devrais pouvoir faire un peu tout.

https://jsfiddle.net/xavlight/em7L8wq9/

Je te laisse expérimenter.

Xav

**saxrub** · 17/11/2022, 17h28

Salut à tous
J'avais commencé une page devant permettre des tracés de polygones avec besoin de récupérer les points pour le stockage dans une base MySQL.
Je me suis arrêté à ça, mais la récupération des points fonctionne

https://wnat.fr/ANDROID_CARTE_IGN_DE...=1&Latitude=45

**dom73** · 18/11/2022, 14h33

Bonjour

Merci beaucoup pour ce temps passé à travailler sur ce JSFiddle, complet et détaillé, qui donne tous les éléments pour mettre en place ajout/modif/suppression d'un polygone, en temps réel !

Un dernier point me bloque (j'ai vraiment l'impression d'être un boulet...)
J'utilise cet outil pour tracer et tenir à jour le territoire d'un rapace : j'ai donc à tracer une première version du territoire (mode "ajout") et l'enregistrer dans une base MySQL (ce que j'ai pu mettre en place grâce à tes conseils)

Puis, plus tard, je dois pouvoir revenir sur le polygone pour le modifier en cas de nouvelles infos sur les oiseaux
Je recharge donc mon polygone depuis la base, via un objet KML sur la couche puis je passe en édition de tracé : la modification fonctionne bien (déplacement et ajout de points) mais le contenu du addZones n'est pas renvoyé dans le formulaire
Il semble qu'il y ait un problème d'identification de l'objet importé alors que la modif des objets que je trace en direct fonctionne bien avec renvoi des infos dans le formulaire

La page avec le fichier KML importé est ICI

Voir ci-dessous la copie d'écran avec exemples et console.log
Nom : territoire_modif.jpg
Affichages : 53
Taille : 932,8 Ko

Nom : territoire_modif.jpg
Affichages : 53
Taille : 932,8 Ko

**dom73** · 18/11/2022, 14h39

Envoyé par saxrub

Salut à tous
J'avais commencé une page devant permettre des tracés de polygones avec besoin de récupérer les points pour le stockage dans une base MySQL.
Je me suis arrêté à ça, mais la récupération des points fonctionne
https://wnat.fr/ANDROID_CARTE_IGN_DE...=1&Latitude=45

Merci pour ta proposition qui semble aussi très fonctionnelle !
Malheureusement, vu mon niveau très faible en Javascript, le code est vraiment complexe pour moi et je n'arrive pas à extraire ce qu'il me faudrait pour répondre à mon besoin

**xavlight** · 22/11/2022, 19h35

Bonjour dom,

Comme prévu, je te fourni un exemple à expérimenter.
Il y aurait plusieurs façons de faire, voir surement mieux, mais voici un exemple, assez bien commenter et avec des console.log.

Je n'ai pas pu le mettre sur jsfiddle que je t'avais fait, car il n'accepte pas les ajax.
Voici le code complet.

Tu auras à récupérer une librairie ici : https://raw.githubusercontent.com/ma...r/togeojson.js
A mettre sur ton serveur.
Tu peux faire des tests en KML ou KML->geJSON.

Ligne 52 pour change le mode.

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
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test</title>
<style type="text/css">
body { 
  margin: 0; 
  padding: 0;
  font-family: Arial, Helvetica, FreeSans, sans-serif;
  font-size: 100%;
  color: #000000; 
  background: #FBFBFB;
  text-align:left;
  width:1000px;
  margin-left: auto; 
  margin-right: auto;  
}
 
#map {
    padding: 5px;
    width: 1000px;
    height: 800px;
    box-shadow: 0 0 10px #999;
}
</style>
 
<!-- Open Layers 6.15.1 (dernière version actuellement compatible IGN extension) + Plugin Geoportail pour Open Layers 3.2.17 (dernière à date)-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.15.1/css/ol.css" />
<link rel="stylesheet" href="https://ignf.github.io/geoportal-extensions/openlayers-latest/dist/GpPluginOpenLayers.css" />
 
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.15.1/build/ol.js"></script>
<script data-key="essentiels" src="https://ignf.github.io/geoportal-extensions/openlayers-latest/dist/GpPluginOpenLayers.js"></script>
 
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
 
<!-- TODO -->
<!-- librairie à télécharger sur ton serveur : https://raw.githubusercontent.com/mapbox/togeojson/master/togeojson.js -->
<!-- Si je met le lien dans script, ça marche pas, pas bien compris -->
<script src="togeojson.js"></script>
 
<script type="text/javascript">
//22/11/2022
window.onload = function go() {
 
        var timer;
        var memoDrawlayerFeature = {};
 
        // variables pour polygone
        var dessinsFeatures = new ol.Collection();
        var source = new ol.source.Vector();
        var drawLayer = new ol.layer.Vector({ source: source });
 
        var modeImport = 2; //0 : vide - 1 : import KML - 2 : convert KML -> geoJson et import
 
        if (modeImport == 1) {
                //Source utilisée dans drawLayer (données du kml)
                source = new ol.source.Vector({
                        features: dessinsFeatures,
                        format: new ol.format.KML({
                                extractStyles:true,
                                extractAttributes:true
                        }),
                        //url: 'https://domlibs.fr/territoire.kml',
                        url: 'territoire.kml'
                });
                console.log("source KML", source);
                drawLayer.setSource(source);
        } else if (modeImport == 2) {
                //On convertit le KML en geoJson
                //librairie JS utilisé : https://github.com/mapbox/togeojson
                var KMLtoGeoJson = "";
                
                $.ajax({
                        url: 'territoire.kml',
                        async: false //important sinon, KMLtoGeoJson n'est pas défini
                })
                .done(function(xml) {
                        KMLtoGeoJson = toGeoJSON.kml(xml);
                        console.log("KMLtoGeoJson", KMLtoGeoJson);
                });
                var format = new ol.format.GeoJSON({ featureProjection:"EPSG:3857" });//{ featureProjection:"EPSG:4326" }); //3857
                var features = format.readFeatures(KMLtoGeoJson);
                console.log("features KMLtoGeoJson", features);
 
                //Si je met pas ce timeout, il est ajouté mais pas détecté par addFeature, et il le faut pour pouvoir modifier les formes
                setTimeout(function() {
                        source.addFeatures(features);
                }, 0);
        } else {
                //Source utilisée dans drawLayer (vide)
                source = new ol.source.Vector({ features: dessinsFeatures });
                console.log("source vide", source);
                // couche vide
                drawLayer = new ol.layer.Vector({ source: source });
                console.log("drawLayer vide", drawLayer);
        }
 
        var addZones = {}; //Tableau d'objets des zones de croquis que j'ajoute à l'ajout
         
        // couches de la carte
        var layers = [];
        //OSM
        var osmLayer = new ol.layer.Tile({
                source: new ol.source.OSM(),
                //projection:'EPSG:4326',
                olParams: {
                        opacity: 1,
                        visible: true
                }
        });
        if (osmLayer.getSource().urls) layers.push(osmLayer);
        //Plan IGN
        var maps_layer = new ol.layer.Tile ({
                source: new ol.source.GeoportalWMTS ({
                        layer: "GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2"
                }),
                opacity: 0.7
        });
        if (maps_layer.getSource().urls) layers.push(maps_layer);
        //Photos aériennes
        var ortho_layer = new ol.layer.Tile ({
                source: new ol.source.GeoportalWMTS ({
                        layer: "ORTHOIMAGERY.ORTHOPHOTOS"
                }),
                opacity: 0.7
        });
        if (ortho_layer.getSource().urls) layers.push(ortho_layer);
 
        // carte
        var map = new ol.Map ({
                target: 'map',
                layers: layers,
                view: new ol.View ({
                        center: ol.proj.transform([6.4, 45.5], 'EPSG:4326', 'EPSG:3857'),
                        zoom: 9,
                })
        });
        
        // gestion du dessin du polygone => popup
        var drawArea = new ol.control.Drawing({
                collapsed : true, //widget non affichée au départ
                draggable : true, //widget déplaçable
                layer: drawLayer, //Type de layer utilisé
                defaultStyles : {},
                cursorStyle : {},
                tools : {
                        points : true,
                        lines : true,
                        polygons :true,
                        holes : true,
                        text : false,
                        remove : true,
                        display : false, //Modifier les couleurs
                        tooltip : true, //Modifier une description associé à l'annotation
                        export : false, //Export
                        measure : true //Calcul la mesure
                },
                popup : {
                        display : true,
                        function : function (params) {
                                //console.log(params);
         
                                var askDescription = 0; //Demande la description à la création d'une nouvelle forme - 0 : non - 1 : oui
                                
                                var feature = params.feature;
                                var geometry = feature.getGeometry();
         
                                var id = params.feature.ol_uid;
                                var coord = geometry.getCoordinates();
                                //transformation de l'EPSG du polygone en WGS84 - précédé d'une duplication du polygone (sinon, le polygone s'efface en fin de tracé)
                                geometry2=geometry.clone();
                                polygone=geometry2.transform('EPSG:3857', 'EPSG:4326');                 
                                var coord_wgs84 = polygone.getCoordinates();
                                var type = geometry.getType();
                                var getProperties = feature.getProperties();
                                var mesure = feature.get('measure').replace("^2", "²");
         
                                var libelleZone = "";
                                
                                //Si pas de demande de libellé, affectation automatique d'un libellé
                                if (!askDescription) {
                                        var numZone = Object.keys(addZones).length + 1;
                                        libelleZone = "zone " + numZone; //Nom de la zone par défaut si non attribuée à la création
                                }
                                addZones[id] = {type: type, coord: coord_wgs84, mesure: mesure, zone: libelleZone };
                                console.log("addZones création", addZones);
                                var zonesJson = JSON.stringify(addZones); //Converti le tableau en chaine de caractères -
                                //console.log("JSON des formes", zonesJson);
                                var inputPolygon = document.querySelector("form input[name=polygon]");
                                inputPolygon.value = zonesJson;
                                
                                //Cas de l'extension OpenLayers IGN actuelle sinon pas affecté
                                params.feature.setProperties({'description': libelleZone });
                                                                
                                params.saveFunc(libelleZone);
                                
                                //Affiche ou non la demande du libellé
                                if (!askDescription) {
                                        var container = document.createElement("div"); //Mettre en commentaire pour ne pas demander de libellé pour la nouvelle forme
                                        return container;
                                }
                        }
                }
        });
        map.addControl(drawArea);
        //if (drawLayer.getSource()) { drawArea.setLayer(drawLayer); }
        
        //Définition des intitulés dans le LayerSwitcher
        var lsControl = new ol.control.LayerSwitcher({
                layers : [
                        {
                                layer: osmLayer,
                                config: {
                                        title: "Plan OpenStreet Map",
                                        description: "Plan OpenStreet Map"
                                }
                        },
                        {
                                layer: drawLayer,
                                config: {
                                        title: "Tracé",
                                        description: "Tracé"
                                }
                        }
                ],
                options : {
                        collapsed: true
                }
        });     
        map.addControl(lsControl);
 
        // récupération des coordonnées et de l'altitude au clic
        map.on('singleclick',function (e) {
                var clickCoord = e.coordinate;
                var clickCoordLonLat = ol.proj.transform(clickCoord, map.getView().getProjection(), 'EPSG:4326');
                        Gp.Services.getAltitude({
                                apiKey : "calcul",
                                positions : [ // positions pour le calcul alti
                                        { lon: clickCoordLonLat[0], lat: clickCoordLonLat[1] },
                                ],
                                onSuccess : function (result) {
                                        //renvoi dans le formulaire de lat et lon arrondies à 6 chiffres et altitude arrondi à l'entier
                                        document.monform.lon.value=Math.round(1000000*clickCoordLonLat[0])/1000000;
                                        document.monform.lat.value=Math.round(1000000*clickCoordLonLat[1])/1000000;
                                        document.monform.alt.value=Math.round(result.elevations[0].z);
                                }
                        });
                }
        );
 
        //Mode ajout
        source.on("addfeature", function(e) {
                var feature = e.feature;
                if (modeImport) {
                        console.log("on complète les informations");
                        feature.setProperties({'description': 'import' });
                        feature.setProperties({'type': 'Polygon' }); //A voir, car type fixe, et il peut y avoir peut-être des lignes ou points
                        feature.setProperties({'measure': "NC" }); //Non communiqué au départ
                        modeImport = 0;
                }
                console.log("add feature", feature);
        });
 
        //Mode modification
        source.on("changefeature", function(e) {
                if (modeImport) return;
 
                var feature = e.feature; //feature
                var geometry = feature.getGeometry(); //partie geometry
                var featureId = feature.ol_uid; //id feature
                var prop = feature.getProperties(); //Propriétés du feature
                
                if (featureId && !memoDrawlayerFeature[featureId]) memoDrawlayerFeature[featureId] = JSON.stringify(prop);
                
                //1er cas : Permet de détecter la 1ère fois que l'on fait un select, pas utile de faire un traitement, rien n'a encore bougé
                //2ème cas : si on est en cours de déplacement d'un point, j'attend 1,5 sec que ça ne bouge plus pour lancer mon traitement
                //           Sinon la fonction s'exécute dès que l'on bouge un point
                if (featureId !== undefined && JSON.stringify(memoDrawlayerFeature[featureId]) != JSON.stringify(prop)) {
                        var checkMove = 1500; //Lancement du traitement 1,5 sec après le déplacement du point
                        clearTimeout(timer);
                        timer = setTimeout(
                                function() {
                                        console.log("change feature", feature);
                                        var geometry2 = geometry.clone(); //clone
                                        var form = geometry2.transform('EPSG:3857', 'EPSG:4326'); //transform projection
                                        var coord_wgs84 = form.getCoordinates(); //tableau des coordonnées de la forme en proj EPSG:4326
                                        var type = geometry.getType(); //Type de forme
                                        console.log(prop); //Propriété complète de l'objet croquis
                                        var mesure = (feature.get('measure'))?feature.get('measure').replace("^2", "²"):0;
                                        
                                        addZones[featureId] = {type: type, coord: coord_wgs84, mesure: mesure, zone: prop.description };
                                        console.log("addZones", addZones);
                                        
                                        var zonesJson = JSON.stringify(addZones); //Converti le tableau en chaine de caractères -
                                        var inputPolygon = document.querySelector("form input[name=polygon]");
                                        inputPolygon.value = zonesJson;
                                        
                                }
                        ,checkMove);
                }
        });
        
        //Mode Suppression
        source.on("removefeature", function(e) {
                var feature = e.feature; //feature
                var featureId = feature.ol_uid; //id feature
                
                console.log("featureId", featureId);
                
                delete addZones[featureId];
                console.log("addZones after remove", addZones);
        });
 
        /*
drawLayer.on("change", function(e) {
        //Ici tu récupères toutes les formes existantes
        console.log("this source", this.getSource().getFeatures());
});
        */
 
        // fin fonction go
}
</script>
</style>
</head>
 
<body>
	<div align="center">
		<div id="map" align="center"></div>
	</div>
	<form name="monform" action="" method="post" enctype="multipart/form-data">
		<div align="center">
			<p><font size="2" face="Comic Sans MS">polygone : <input name="polygon" type="text" size="100"></font></p>
		</div>
		<div align="center">
			<font size="2" face="Comic Sans MS">Longitude : 
				<input name="lon" type="text" value="">&nbsp;Latitude :
			  <input name="lat" type="text" value="">&nbsp;Altitude : 
			  <input name="alt" type="text" value="">&nbsp;m 
			</font>
		</div>
	</form>
</body>
</html>

Je te laisse jouer.

Xav

**dom73** · 22/11/2022, 22h49

Merci beaucoup pour ce code clair et bien commenté.
J'ai juste testé l'option KML, ça fonctionne très bien !

J'ai déjà beaucoup appris lors de cet échange, je vais prendre le temps de regarder toutes les possibilités...

Encore merci !

récupérer les coordonnées d'un polygone tracé avec Drawing

IGN API Géoportail

Discussions similaires

Partager

Partager