Nous utilisons des cookies pour vous garantir la meilleure expérience sur notre site. Si vous continuez à utiliser ce dernier, nous considèrerons que vous acceptez l'utilisation des cookies. J'ai compris ! ou En savoir plus !.
banniere

Le portail francophone de la géomatique


Toujours pas inscrit ? Mot de passe oublié ?
Nom d'utilisateur    Mot de passe              Toujours pas inscrit ?   Mot de passe oublié ?

#1 Wed 29 January 2014 12:22

aGlumLieu
Juste Inscrit !
Date d'inscription: 24 Sep 2013
Messages: 5

[OpenLayers] Définir la couleur d'un polygone

Bonjour à toutes/tous,

Je suis en train d'apprendre à me servir de la librairie OpenLayers depuis un ou deux jours, et me voilà confronté à un soucis que je n'arrive pas à solutionner !

Contexte:

En partant d'une carte OpenStreetMap, je souhaite pouvoir distinguer les différentes régions espagnoles en les représentant par des polygones de différentes couleurs.

Pour éviter de charger mon code inutilement, j'essaye pour commencer de représenter la région de Madrid ainsi que la région d'Extremadura.

Jusqu'ici le code est fonctionnel (voir ci dessous): je vous épargne les nombreuses lignes de coordonnées, je mets à disposition le code complet au format .html en pièce jointe.

Ma question est: Comment afficher chaque Polygone avec une couleur différentes ?
(J'essaye différentes méthodes depuis un moment sans succès...)

Je vous remercie d'avance pour votre aide, et passez une bonne journée ! smile
aGlumLieu

Code:

   <body>
        <h1>Hello GeoRezo</h1>
        <div id="map-id"></div>
        <div id="output-id"></div>
        <script>
        
            /* Partie création de la map + centrer à l'affichage */
            var center = new OpenLayers.LonLat(-4, 40).transform(
                'EPSG:4326', 'EPSG:3857');

            var map = new OpenLayers.Map("map-id", {projection: 'EPSG:3857'});

            var osm = new OpenLayers.Layer.OSM();
            map.addLayer(osm);
            map.setCenter(center, 5);
            
            /* Partie création du layer*/

            var geojson_format = new OpenLayers.Format.GeoJSON({
            'internalProjection': new OpenLayers.Projection("EPSG:900913"),
            'externalProjection': new OpenLayers.Projection("EPSG:4326")
            });
                
            var vector_layer = new OpenLayers.Layer.Vector(); 
            map.addLayer(vector_layer);
            
            var featurecollection ={
                "type": "FeatureCollection",
                "features": [{
                    "type": "Feature",
                    "id": "stateMadrid",
                    "geometry": {
                        "type": "MultiPolygon",
                        "coordinates": [[[[-7.5403752 [...] ]]]]
                    }
                },{
                    "type": "Feature",
                    "id": "stateExtremadura",
                    "geometry": {
                        "type": "MultiPolygon",
                        "coordinates": [[[[-4.57900, [...] 40.629804200000002]]]]
                    },
                    
                } ]
            }

            vector_layer.addFeatures(geojson_format.read(featurecollection));

            
        </script>

[EDIT]: La pièce jointe ne passe pas hmm (435Kb pourtant)

Dernière modification par aGlumLieu (Wed 29 January 2014 12:24)


"Dans chaque église, il y a toujours quelque chose qui cloche." J.Prevert

Hors ligne

 

#2 Wed 29 January 2014 16:36

aGlumLieu
Juste Inscrit !
Date d'inscription: 24 Sep 2013
Messages: 5

Re: [OpenLayers] Définir la couleur d'un polygone

J'ai trouvé ma solution tout seul, après plusieurs heures à écumer le web anglophone ! big_smile

Au cas où quelqu'un se poserait la même question que moi, voici comment que j'ai fais grâce à la magie des StyleMap !

Code:

var style = new OpenLayers.Style(
 // C'est la manière de représenter les polygones par défaut
        {
            fillColor: "grey",
        },

// Chaque règles décrit la manière de représenter un polygones en fonction de l'attribut "name" renseigner lors de la création des polygones
// du genre ==> "properties": {"name":"Paulo"} 

        {
            rules: [
                new OpenLayers.Rule({
                    // a rule contains an optional filter
                    filter: new OpenLayers.Filter.Comparison({
                        type: OpenLayers.Filter.Comparison.EQUAL_TO,
                        property: "name"
                        value: "Paulo"
                    }),
                    // Si le nom du polygone est Paulo, alors j'applique la règle suivante
                        fillColor: "blue",

                    }
                }),
                new OpenLayers.Rule({
                    filter: new OpenLayers.Filter.Comparison({
                        type: OpenLayers.Filter.Comparison.EQUAL_TO,
                        property: "name",
                        value: "Georges"
                    }),
                    symbolizer: {
                        fillColor: "green",

                    }
                }), // Si aucune des règles n'est validée, j'applique la valeur par défaut
                new OpenLayers.Rule({elseFilter: true})
            ]
        }
    );

Ciao smile


"Dans chaque église, il y a toujours quelque chose qui cloche." J.Prevert

Hors ligne

 

Pied de page des forums

Powered by FluxBB