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

SIG : Système d'information Géographique Discussion :

OpenLayers - Teinter polygones


Sujet :

SIG : Système d'information Géographique

  1. #1
    Membre du Club
    Homme Profil pro
    Retraité
    Inscrit en
    Janvier 2007
    Messages
    172
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Service public

    Informations forums :
    Inscription : Janvier 2007
    Messages : 172
    Points : 55
    Points
    55
    Par défaut OpenLayers - Teinter polygones
    Bonjour à tous,
    Je bute sur une question qui va paraître toute simple aux spécialistes.
    Avec le code suivant, je fabrique 2 polygones (dont un à trou):
    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
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link rel="stylesheet" href="style.css" type="text/css">
        <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
        <script type="text/javascript">
          var map;
          function init() {
            map = new OpenLayers.Map('map', {allOverlays: true, center: [91, 15], zoom: 4, layers: [new OpenLayers.Layer.Vector()]});
            var featurecollection = {
              "type": "FeatureCollection", "features": [{"geometry": { "type": "GeometryCollection", "geometries": [
                {"type": "Polygon","coordinates": 
                  [[[110, 20],[120, 20],[120, 10],[110, 10],[110, 20]],[[112, 17],[118, 18],[118, 16],[112, 15],[112, 17]]]},
                {"type": "Polygon","coordinates": 
                  [[[60, 20],[70, 20],[70, 10],[60, 10],[60, 20]],[[112, 17]]]}]},}]};
               var geojson_format = new OpenLayers.Format.GeoJSON();
               var vector_layer = new OpenLayers.Layer.Vector();
               map.addLayer(vector_layer);
               vector_layer.addFeatures(geojson_format.read(featurecollection));}
        </script>
      </head>
      <body onload="init()">
        <div id="map" class="bigmap"></div>
      </body>
    </html>
    Ces polygones sont remplis de la couleur par défaut mais j'aimerais dessiner l'un en rouge et l'autre en bleu.
    J'ai essayé un tas de méthodes mais en vain.
    Un petit coup de pouce?
    Merci.

  2. #2
    Membre habitué
    Profil pro
    Inscrit en
    Avril 2012
    Messages
    265
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2012
    Messages : 265
    Points : 179
    Points
    179
    Par défaut
    Bonsoir,

    apparemment il faut rajouter une propriété "fillColor" dans la géométrie et utiliser les styles.

    Si cela peut vous aider.

    Bonnes fêtes de fin d'année.

    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
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link rel="stylesheet" href="style.css" type="text/css">
        <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
        <script type="text/javascript">
          var map;
          function init() {
       	map = new OpenLayers.Map('map',
    				{allOverlays: true,
    				center: [91, 15],
    				zoom: 4,
    				layers: [new OpenLayers.Layer.Vector()]
    				});
    			
                var featurecollection = {
                  "type": "FeatureCollection", 
                  "features": [
                    {
                        "type": "Feature", 
                        "geometry":
    						{
    							type: "Polygon",
    							coordinates:
    							[[
    								[110, 20],
    								[120, 20],
    								[120, 10],
    								[110, 10],
    								[110, 20]],
    								[[112, 17],
    								[118, 18],
    								[118, 16],
    								[112, 15],
    								[112, 17]
    							]]
    						},
    					"properties": {"fillColor": "red"}
    				},
    				{                    
    					"type": "Feature", 
                        "geometry":
    						{
    							type: "Polygon",
    							coordinates:
    							[[
    								[60, 20],
    								[70, 20],
    								[70, 10],
    								[60, 10],
    								[60, 20]],
    								[[112, 17]
    							]]
    						},
    					"properties": {"fillColor": "blue"}
    				}
                  ]
               };
    
    		   var myStyles = new OpenLayers.StyleMap({
    			"default": new OpenLayers.Style({
    					fillColor: "${fillColor}",
    					strokeColor: "black",
    
    				}),                
    		   });
    		   
               var geojson_format = new OpenLayers.Format.GeoJSON();
               var vector_layer = new OpenLayers.Layer.Vector("",{
    				styleMap: myStyles,
    				rendererOptions: {zIndexing: true},
    		   }); 
               vector_layer.addFeatures(geojson_format.read(featurecollection));
               map.addLayer(vector_layer);
    		   
            }
        </script>
      </head>
      <body onload="init()">
     <div id="map" class="bigmap"></div>
      </body>
    </html>

  3. #3
    Membre du Club
    Homme Profil pro
    Retraité
    Inscrit en
    Janvier 2007
    Messages
    172
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Service public

    Informations forums :
    Inscription : Janvier 2007
    Messages : 172
    Points : 55
    Points
    55
    Par défaut
    Bonsoir Tarzip,
    Merci pour ta réponse.
    N'ayant pas reçu de réponse à mon message posté il y a plus d'une semaine, je me suis réorienté vers Leaflet que je trouve finalement plus simple et qui gère très facilement les couleurs.
    Néanmoins je te renouvelle mes remerciements pour ton aide.
    ...et bonnes fêtes à toi!

Discussions similaires

  1. openlayers - icônes, imagettes pour dessins polygones, nagivation qui disparaissent en cliquant dessus
    Par pierrick76 dans le forum SIG : Système d'information Géographique
    Réponses: 1
    Dernier message: 26/01/2013, 21h21
  2. OpenLayer - Faire suivre un marqueur le long d'un polygone
    Par dawadam dans le forum SIG : Système d'information Géographique
    Réponses: 0
    Dernier message: 26/03/2012, 21h38
  3. [OpenLayers] Ne dessiner qu'un seul polygone avec le control
    Par MasterOfChakhaL dans le forum SIG : Système d'information Géographique
    Réponses: 2
    Dernier message: 27/07/2010, 18h08
  4. [Algo] Point à l'intérieur d'un polygone ?
    Par kebby dans le forum C++Builder
    Réponses: 5
    Dernier message: 23/05/2003, 14h22
  5. une ligne et un polygone convexe
    Par rekam dans le forum Algorithmes et structures de données
    Réponses: 10
    Dernier message: 20/12/2002, 11h39

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