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 :

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


Sujet :

IGN API Géoportail

  1. #1
    Nouveau membre du Club
    Homme Profil pro
    Enseignant
    Inscrit en
    octobre 2018
    Messages
    60
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Enseignant

    Informations forums :
    Inscription : octobre 2018
    Messages : 60
    Points : 29
    Points
    29
    Par défaut récupérer les coordonnées d'un polygone tracé avec Drawing
    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

  2. #2
    Membre habitué
    Homme Profil pro
    Architecte progiciel et développeur informatique
    Inscrit en
    février 2011
    Messages
    175
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Architecte progiciel et développeur informatique

    Informations forums :
    Inscription : février 2011
    Messages : 175
    Points : 190
    Points
    190
    Par défaut
    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

  3. #3
    Nouveau membre du Club
    Homme Profil pro
    Enseignant
    Inscrit en
    octobre 2018
    Messages
    60
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Enseignant

    Informations forums :
    Inscription : octobre 2018
    Messages : 60
    Points : 29
    Points
    29
    Par défaut
    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

  4. #4
    Membre habitué
    Homme Profil pro
    Architecte progiciel et développeur informatique
    Inscrit en
    février 2011
    Messages
    175
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Architecte progiciel et développeur informatique

    Informations forums :
    Inscription : février 2011
    Messages : 175
    Points : 190
    Points
    190
    Par défaut
    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

  5. #5
    Nouveau membre du Club
    Homme Profil pro
    Enseignant
    Inscrit en
    octobre 2018
    Messages
    60
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Enseignant

    Informations forums :
    Inscription : octobre 2018
    Messages : 60
    Points : 29
    Points
    29
    Par défaut
    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 !

  6. #6
    Nouveau membre du Club
    Homme Profil pro
    Enseignant
    Inscrit en
    octobre 2018
    Messages
    60
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Enseignant

    Informations forums :
    Inscription : octobre 2018
    Messages : 60
    Points : 29
    Points
    29
    Par défaut
    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
    }

  7. #7
    Membre habitué
    Homme Profil pro
    Architecte progiciel et développeur informatique
    Inscrit en
    février 2011
    Messages
    175
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Architecte progiciel et développeur informatique

    Informations forums :
    Inscription : février 2011
    Messages : 175
    Points : 190
    Points
    190
    Par défaut Drawing (add, change, remove feature)
    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

  8. #8
    Membre actif
    Homme Profil pro
    Inscrit en
    avril 2009
    Messages
    783
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Vienne (Limousin)

    Informations forums :
    Inscription : avril 2009
    Messages : 783
    Points : 290
    Points
    290
    Par défaut
    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

  9. #9
    Nouveau membre du Club
    Homme Profil pro
    Enseignant
    Inscrit en
    octobre 2018
    Messages
    60
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Enseignant

    Informations forums :
    Inscription : octobre 2018
    Messages : 60
    Points : 29
    Points
    29
    Par défaut
    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

  10. #10
    Nouveau membre du Club
    Homme Profil pro
    Enseignant
    Inscrit en
    octobre 2018
    Messages
    60
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Enseignant

    Informations forums :
    Inscription : octobre 2018
    Messages : 60
    Points : 29
    Points
    29
    Par défaut
    Citation Envoyé par saxrub Voir le message
    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

  11. #11
    Membre habitué
    Homme Profil pro
    Architecte progiciel et développeur informatique
    Inscrit en
    février 2011
    Messages
    175
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Architecte progiciel et développeur informatique

    Informations forums :
    Inscription : février 2011
    Messages : 175
    Points : 190
    Points
    190
    Par défaut Exemple assez complet
    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

  12. #12
    Nouveau membre du Club
    Homme Profil pro
    Enseignant
    Inscrit en
    octobre 2018
    Messages
    60
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Enseignant

    Informations forums :
    Inscription : octobre 2018
    Messages : 60
    Points : 29
    Points
    29
    Par défaut
    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épondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Récupérer les coordonnées de points d'une surface avec la souris
    Par ijnuhbygv dans le forum Interfaces Graphiques
    Réponses: 2
    Dernier message: 06/08/2011, 02h57
  2. Réponses: 0
    Dernier message: 12/11/2009, 12h56
  3. Récupérer les coordonnées du pointeur avec coin3D.
    Par XavierHWT dans le forum API graphiques
    Réponses: 0
    Dernier message: 24/04/2009, 12h14
  4. récupérer les coordonnées d'un rectangle
    Par robocop2776 dans le forum MFC
    Réponses: 3
    Dernier message: 01/11/2005, 20h31
  5. [GRAPHIQUE] Récupérer les coordonnées d'un point
    Par freud dans le forum Composants VCL
    Réponses: 6
    Dernier message: 29/09/2005, 13h31

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