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

Bibliothèques & Frameworks Discussion :

Colorer des polygones


Sujet :

Bibliothèques & Frameworks

  1. #1
    Futur Membre du Club
    Colorer des polygones
    Je crée une carte des communes du Vaucluse.
    Pour les contours de chaque commune, je récupère les coordonnées dans data.gouv.fr basé sur chaque code INSEE
    https://geo.api.gouv.fr/communes/841...fields=contour

    Je n'arrive pas à intégrer une couleur spécifique pour chaque commune.

    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
     
    <script>
     
    ...
     
            var tableau = [
              ...
    	  [84149,"Violès",44.0660605145,5.25707803023,"https://geo.api.gouv.fr/communes/84149/?&fields=contour","rgb(255,125,64)"],
    	  [84150,"Visan",44.1767100202,4.95138229619,"https://geo.api.gouv.fr/communes/84150/?&fields=contour","rgb(123,104,238)"],
    	  [84151,"Vitrolles-en-Luberon",44.3268006533,4.94430178075,"https://geo.api.gouv.fr/communes/84151/?&fields=contour","rgb(152,251,152)"]
    	];
                /* On boucle sur le tableau pour y placer les communes */
                for (i = 0; i < tableau.length; i++) {
                    /*
                     * On va créer les contours de chaque commune avec sa couleur selon la province
                     */
     
                     /*     Affichage de la couleur de chaque commune    */
    				var couleur = tableau[i][5];
                     /*     Sans ce alert(couleur);, les couleurs ne sont pas prises en compte    */
    				alert(couleur);
     
                                    var url = tableau[i][4];
    				   ajaxGet(url, function (reponse) {
    				   var contour = JSON.parse(reponse).contour;
    				for (var j = 0 ; j < contour.length ; j++) {
    				   contour[j].reverse();
    				}
    				L.geoJson(contour).addTo(map);
    				function style() {
    				   return {
    				   fillColor: couleur,
    				   weight: 0.5,
    				   opacity: 1,
    				   color: 'white',
    				   dashArray: 3,
    				   fillOpacity: 0.5,};
    				}
    				L.geoJson(contour, {style: style}).addTo(map);
    				})
                }
    			window.onload = initMap;
    </script>


    Pour obtenir les couleurs, je suis obligé de placer un
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
     
    alert(couleur);

    sous mon
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    var couleur = tableau[i][5];

    Sinon elles ne s'affichent pas ...
    C'est très long à valider commune par commune et totalement impraticable en production.

    Merci de vos conseils

  2. #2
    Modérateur

    Bonjour,
    tu as un souci avec les variables de boucle, que vaut couleur, lorsque la fonction qui l'utilise s’exécute ?

    Bien des façons de résoudre cela mais tu peux faire cela facilement en utilisant un forEach de bon aloi sur ton tableau :
    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
    tableau.forEach(function (tab) {
        var couleur = tab[5];
        var url = tab[4];
        ajaxGet(url, function (reponse) {
            const contour = JSON.parse(reponse).contour;
            for (let j = 0; j < contour.length; j++) {
                contour[j].reverse();
            }
    // à supprimer        L.geoJson(contour).addTo(map);
            function style() {
                return {
                    fillColor: couleur,
    // à supprimer                weight: 0.5,
                    opacity: 1,
    // à supprimer                color: 'white',
                    dashArray: 3,
                    fillOpacity: 0.5,
                };
            }
            L.geoJson(contour, {
                style: style
            }).addTo(map);
        })
    });

  3. #3
    Futur Membre du Club
    [LeafLet] Colorer des polygones
    Merci,

    C'est exactement la boucle qui me manquait.

    Ne me reste plus qu'à compresser mon fichier leaflet.js pour que l'affichage soit plus rapide.
    https://spipfactory.fr/sites/essaillon-sederon.net/squelettes/cgv/carte_complete/cgv.html

  4. #4
    Modérateur

    Ne me reste plus qu'à compresser mon fichier leaflet.js
    Attention :
    dans ton script, tu as une boucle dans une boucle
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    /* On boucle sur le tableau pour y placer les communes */
    for (i = 0; i < tableau.length; i++) {
        /*
         * On va créer les contours de chaque commune avec sa couleur selon la province
         */
        /*   var couleur = tableau[i][5];
    			//	alert(couleur);
    				var url = tableau[i][4];*/
        tableau.forEach(function (tab) {
            var couleur = tab[5];
            var url = tab[4];
            ajaxGet(url, function (reponse) {

    il te faut supprimer ta boucle for qui est remplacée par la boucle forEach.

  5. #5
    Futur Membre du Club
    [LeafLet] Colorer des polygones
    Ah merci,

    Je me demandais pourquoi l'affichage était si long => boucle infinie...

    Corrigé.
    https://spipfactory.fr/sites/essaillon-sederon.net/squelettes/cgv/carte_complete/cgv.html