Discussion :

[cmail]

Connaissez-vous un exemple ou la sélection d'une entité dans une liste sélectionnable (hors API de type <select> d'un formulaire html) affichant les noms (repris depuis <SimpleData name="NOM">XXX</SimpleData> par exemple) de polygones d'un kml, "sélectionne" le polygone en question dans l'API?

Ou alors ce serait bien de me donner quelques pistes pour me diriger...
En fait je n'arrive pas à faire le lien entre les valeurs sélectionnées dans ma liste et la "sélection" du polygon kml

[mga_geo]

Je fabrique ma liste de points à partir des features d'un gpx en donnant l'action à réaliser sur un clic:

Code :

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

<div onclick="oJSON.mapCentreAtLonLat('E10a',-1.415882,48.112710,14)" style="display:inline;text-decoration: underline;background-color: Orange">E10a</div>

C'est en action sur http://atlasnw.free.fr/geoportail/gp...105748&zoom=14

[cmail]

Merci marc, mais mon souci est bien ciblé.
A partir de cette page, j'aimerais que quand on clique sur le nom d'une commune dans la liste ("cherchez une commune") en haut de l'écran on affiche par exemple en blanc la commune en question dans l'API.

J'essaye en vain de me dépatouiller avec OpenLayers.Layer.Vector.getFeaturesByAttribute, mais rien de bien concluant...

[Zébulon-21]

Je cherche également ce genre de solution qui semble très similaire à ta demande (?) et qui permettrait, à partir d'une liste de sélection déroulante (comme la tienne), d'obtenir avec l'API un affichage d'itinéraire sur un fond de carte de l'IGN.

Par contre j'aurai une question "subsidiaire" : Comment se fait-il qu'à nouveau ta page de tests ne soit pas visible sous IE8 :

Code :

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

1
2
3
4
5
6
Détails de l’erreur de la page Web
Message*: 'console' est indéfini.
Ligne*: 72
Caractère*: 2
Code*: 0
URI*: http://43.nexgate.ch/js/CMessai3.js

Sans avoir de parti pris pour Internet Explorer, faut-il pour autant le négliger alors qu'il se positionne encore en tête des navigateurs (chiffres 2012) ?

[cmail]

Bon, on est deux sur une même voix...
On va y arriver avec l'aide des gars (et des filles) de l'IGN
Car je viens de passer quelques heures sur le sujet, et le résultat est nul.


Sinon pour IE8, je suis en phase d'essai sur des points précis. Je ne cherche pas pour l'instant à rendre mes pages d'essai visibles sur tous les navigateurs (en controlant ma console de firebug). Je concentre mes faibles ressources intellectuelles à ma question. L'ouverture à IE8 viendra en son temps... Quand ma liste interagira avec mes kml, via les "attributes" ....

[mga_geo]

Et cela convient plus ?
http://atlasnw.free.fr/geoportail/ex...kml_choix.html

[momo8508]

J'ai réalisé une application qui permet d'afficher une exploitation en passant son numéro pacage dans l'url et de zoomer sur un ilot en passant son numéro de la même façon.
url du genre = http://xxxxxxxxxxx.php?pacage=85000003.kml&ilot=4

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
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
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- coding: utf-8 -->
  <head>
    <title>affichage pour img</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="cache-control" content="no-cache">
  <style type="text/css">

        body {
        background: #E9E8B7;
        margin: 0;
        padding: 0;
        }
        #titre {    
        background-color:#FFFFFF;
        border:1px solid black;
        padding:5px;
        }
        #legende {
        background-color:#FFFFFF;
        border:1px solid black;
        padding:5px;
        }
        #viewerDiv{
        float: left;
        marging: 2px;
        width:1138px;
        height:752px;
        background-color:white;
         background-image:url(http://api.ign.fr/geoportail/api/js/.../loading.gif);
         background-position:center center;
         background-repeat:no-repeat;
        }

        
  </style>
     
 </head>
<body>

<div id="viewerDiv" >
</div>
 <script type="text/javascript"><!--//--><![CDATA[//><!--  
   var viewer = null;
   <?php
    if (isset($_GET['ilot']))
      {
      $ilot = $_GET['ilot'];
      }
    ?>
   var numero_ilot = '<?=$ilot;?>';
   
   
   
   function initGeoportalMap()
  {       
    var options = {};  
    options.mode = 'normal';
    options.territory = 'FXX';    
  
    options.nameInstance = 'viewer';
    OpenLayers.Util.extend(options, gGEOPORTALRIGHTSMANAGEMENT || {});
    viewer = new Geoportal.Viewer.Default('viewerDiv', options);  
    affiche();
    
  // On affiche la  couche IGN
  
    var layerOption = {};
    //layerOption.opacity = 0.4;
    //layerOption.visibility = true;    
    // viewer.addGeoportalLayer('GEOGRAPHICALGRIDSYSTEMS.MAPS', layerOption);
    
    layerOption.opacity = 0.8;
    layerOption.visibility = true;
    viewer.addGeoportalLayer('ORTHOIMAGERY.ORTHOPHOTOS', layerOption);
    
  // Choix sur les boites à outils et autre zoom
       
    viewer.setLayersPanelVisibility(false);    // Boite info couches
    viewer.openLayersPanel(false);        // Ouverte ou fermée
    viewer.setToolsPanelVisibility(false);    // Boite à outils zoom
    viewer.openToolsPanel(false);        // Fermée ou ouverte
    viewer.setInformationPanelVisibility(false); // Coordonnées bas de carte   
    
  //  Centrage de la carte

    // viewer.getMap().setCenterAtLonLat(-1.35,46.91,14,false,false);
  }
   function affiche() {
  
  var symb1= {
   'PT'   :{fillColor:'#0DF20D',    strokeWidth:2},                 
   'PP'   :{fillColor:'#008000',    strokeWidth:2},           
   'MAIS' :{fillColor:'#D99226',    strokeWidth:2},      
   'CER'  :{fillColor:'#FFFF00',    strokeWidth:2},          
   'AC'   :{fillColor:'#800000',    strokeWidth:2},   
   'OLEA' :{fillColor:'#800080',    strokeWidth:2},  
   'AU'   :{fillColor:'#C0C0C0',    strokeWidth:2},  
   'PROT' :{fillColor:'#00FFFF',    strokeWidth:2},
   'GEL'  :{fillColor:'#0000FF',    strokeWidth:2}  
        };
  var contextMAJ = function(feature) {
    return { 'code_MAJ': feature.attributes['code_MAJ'].value };
  }
  var styles = new OpenLayers.StyleMap({
    "default": new OpenLayers.Style({
      strokeColor:'#000000',
      strokeWidth:2,
      fillColor:'#ff0000',
      fillOpacity:0.5,
      label: "${getNOM}",
       labelAlign: "rb",
       labelXOffset: '-10',
       labelBackgroundColor:'white',
       //labelBackgroundOpacity:0.3,
       labelBorderColor:'black',
       labelBorderSize:'1px',
       labelPadding: '3.5px',
       fontColor: "red",
       fontWeight: "bold",
       fontSize: "10px",
       fontFamily: "Arial"
             },{
               context:{
                  getNOM: function(f) {
          return f.attributes['NUM_ILOT'].value;
                     }
                     }
    }),
    "temporary": new OpenLayers.Style({
      strokeColor:'#00ff00',
      strokeWidth:2,
      fillColor:'#00ff00',
      fillOpacity:0.5
    }),
    "select": new OpenLayers.Style({
      strokeColor:'#00ff00',
      strokeWidth:2,
      fillColor:'#0000ff',
      fillOpacity:0.5
    })
  });
  styles.addUniqueValueRules('default','code_MAJ',symb1,contextMAJ);
  
  
  //recuperation du pacage et transformation en nom fichier
  <?php
     if (isset($_GET['pacage']))
     {
     $valeur = $_GET['pacage'];
     }
   // if (isset($_GET['ilot']))
   //   {
   // $ilot = $_GET['ilot'];
   // }
    ?>
   var valeur = '<?=$valeur;?>';
   // mise en forme de l'adresse du fichier kml
   var fichier = 'http://*************/'+valeur;
   
     
  kmlLayer = viewer.getMap().addLayer(
    "KML",
    valeur, //nom couche
    fichier, //nom fichier
    {
      styleMap:styles,
      visibility: true,
      panMapIfOutOfView:false,
      originators: [
            {
                logo:'ISIS',
                pictureUrl: 'sourceisis2012.jpg',
             }],
      eventListeners:{
        "loadend":kmlLoadend
      },
      //minZoomLevel: 8,
      //maxZoomLevel: 20
      },
    {
      formatOptions:{
        extractStyles:false // d財ctivation des styles
      },
    }
  );
   

}
function kmlLoadend() {
  
  var liste_ilots='';
  var exploitation='';
  var titre='';
  var legende='';
  var PT=0;
  var PP=0;
  var CER=0;
  var AC=0;
  var AU=0;
  var PROT=0;
  var OLEA=0;
  var MAIS=0;
  var GEL=0;
  var surftotale=0;
  var surfaceculture="";
   
  //affiche l'ensemble de parcelles
   //     viewer.getMap().zoomToExtent(kmlLayer.maxExtent);
  
   
  for (var i= 0, nbF = kmlLayer.features.length; i<nbF; i++) {
    if ( ! kmlLayer.features[i].attributes ) {
      continue;
    }

 //pr诡ration affichage entete
         if (i==0) {
        titre+='Pacage : 0'+kmlLayer.features[0].attributes['PACAGE'].value+'<br />';
      }
     if (kmlLayer.features[0].attributes['nom']) {
      titre+=kmlLayer.features[i].attributes['nom'].value+'<br />';
      }
    if (kmlLayer.features[0].attributes['lieu_dit']) {
       titre += kmlLayer.features[0].attributes['lieu_dit'].value+'<br />';
     }
     if (kmlLayer.features[0].attributes['commune_2']) {
            titre += kmlLayer.features[0].attributes['commune_2'].value+'<br />';
               }

// les cl�© ` conserver
    var cles = /(NUM_ILOT|SURF_ILOT|PT|PP|CER|MAIS|OLEA|PROT|AU|AC|GEL|code_MAJ)/;
    for ( var k in kmlLayer.features[i].attributes ) {
      if ( ! cles.test(k) ) {
        delete kmlLayer.features[i].attributes[k];
        continue;
      }
      if ( kmlLayer.features[i].attributes[k].value == 0 ) {
        delete kmlLayer.features[i].attributes[k];
      }
     
    }
    //zoom sur ilot de url
    
     if ( kmlLayer.features[i].attributes['NUM_ILOT'].value == numero_ilot ) {
       var feature = kmlLayer.features[i];
       viewer.getMap().zoomToExtent(feature.geometry.getBounds(), closest=true);
     
       // baisse le niveau de zoom de 1 pour meilleur affichage
      var zoom=viewer.getMap().getZoom();
       zoom=zoom-2;
       viewer.getMap().zoomTo(zoom);
      
       }
  }// fin for i
     legende+='<font color="#FFFFFF">Culture majoritaire dans l ilot</font><br/><br/>';
     legende+='<font color="#0DF20D">Prairie Temporaire : PT</font><br/>';
     legende+='<font color="#008000">Prairie Permanente : PP</font><br/>';
     legende+='<font color="#FFFF00">Cèréales : CER</font><br/>';
     legende+='<font color="#D99226">Mais : MAIS</font><br/>';
     legende+='<font color="#00FFFF">Protèagineux : PROT</font><br/>';
     legende+='<font color="#800080">Olèagineux : OLEA</font><br/>';
     legende+='<font color="#800000">Autres cultures : AC</font><br/>';
     legende+='<font color="#C0C0C0">Autres utilisations : AU</font><br/>';
    legende+='<font color="##0000FF">Gel</font><br/>';
  
  //document.getElementById('entete').innerHTML = exploitation;
  document.getElementById('titre').innerHTML = titre;
  
  
}//fin fonction
      -->
      
    
    
    
    
    
    
   //--><!]]></script>
  


   <script type="text/javascript" charset="utf-8" src="http://api.ign.fr/geoportail/api/js/latest/Geoportal.js">
  <!-- -->
  </script>
<script type="text/javascript"><!--//--><![CDATA[//><!--
        if (window.__Geoportal$timer===undefined)
    {
            var __Geoportal$timer= null;
        }

        function checkApiLoading(retryClbk,clss)
    {
            if (__Geoportal$timer!=null)
      {
                //clearTimeout: annule le minuteur "__Geoportal$timer" avant sa fin
                window.clearTimeout(__Geoportal$timer);
                __Geoportal$timer= null;
            }
    
            /**
             * Il se peut que l'init soit exécuté avant que l'API ne soit chargée
             * Ajout d'un code temporisateur qui attend 300 ms avant de relancer l'init
             */
            var f;
            for (var i=0, l= clss.length; i<l; i++)
      {
                try
        {
                    f= eval(clss[i]);
                } catch (e)
        {
                    f= undefined;
                }
                if (typeof(f)==='undefined')
        {
                    __Geoportal$timer= window.setTimeout(retryClbk, 300);
                    return false;
                }
            }
            return true;
        }

        function loadAPI()
    {
            // on attend que les classes soient chargées
            if (checkApiLoading(loadAPI,['OpenLayers','Geoportal','Geoportal.Viewer','Geoportal.Viewer.Default'])===false)
      {
                return;
            }

    // on charge la configuration de la clef
    
            Geoportal.GeoRMHandler.getConfig(['ldskk3wsum4necbitct2tas5'], null, null, {onContractsComplete: initGeoportalMap});
        }        

  //chargement de l'application API

        window.onload= loadAPI;
        //--><!]]></script>

  
  
  
  <div id='titre' style='display:true; position:absolute; left:5px; top:5px'></div>
  <div id='legende' style='display:true; position:absolute; left:5px; top:518px'>
    <font color="#000000">Cultures majoritaires</font><br/><br/>
    <font color="#0DF20D">█ Prairie Temporaire</font><br/>
    <font color="#008000">█ Prairie Permanente</font><br/>
    <font color="#FFFF00">█ Céréales</font><br/>
    <font color="#D99226">█ Mais</font><br/>
    <font color="#00FFFF">█ Protéagineux</font><br/>
    <font color="#800080">█ Oléagineux</font><br/>
    <font color="#800000">█ Autres cultures</font><br/>
    <font color="#C0C0C0">█ Autres utilisations</font><br/>
    <font color="#0000FF">█ Gel</font><br/>
  </div>
  </body>
</html>

Le code en rouge est le zoom sur le numéro d'ilot choisi
Le passage des variables est en php mais on doit pouvoir faire de même en html via une liste déroulante

cordialement

Olivier

[Viglino]

Bonjour,

Et en utilisant les fonctions dans le style de la couche ?

Code :

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

1
2
3
4
5
6
7
8
9
10
var style = new OpenLayers.Style({
    fillColor: "${fcolor}"
  } , {
    context: {
      fcolor: function(feature) {
        return (feature.attributes.CODE_COMM == sel_com)? "#F00" : "#000";
      }
    }
  });

Il suffit alors de modifier la variable globale sel_com avec le numéro de la commune pour celle-ci s'affiche en rouge (#F00)...
en faisant un layer.redraw() bien sûr

@+

[cmail]

Merci à Marc, Olivier et Jean-Marc. Si avec tout cela, je n'arrive pas à résoudre mon problème!
J'y travaille cet après-midi et vous tiens au courant...

[mga_geo]

J'ai ajouté le tri sur le nom des communes et rectifié l'index.

[cmail]

@Marc, je vois les différences, mais je ne comprends pas quand tu dis : "le tri sur le nom"
A cette heure: la liste ne me semble pas triée. A moins que je ne comprenne pas ce que tu veux dire.

Sinon, ta page répond bien à ce que je veux. Seulement je crée ma liste en php avec une base dont les noms sont bien triés par sql par ordre alphabétique et en minuscule. Cet après-midi, j'ai essayé d'adapter ton code, avec ma liste mais le résultat n'est pas encore probant... Mais je m'y remets demain.

@Jean-Marc. Avant de poster ce fil, j'essayais ta proposition (travailler sur les stylemap), car elle me semble astucieuse, dans l'esprit de OL et qu'elle me faciliterait la gestion des style par le survol avec la souris. Mais sans aboutir car je m'entêtais avec getFeaturesByAttribute et autres balivernes que je ne maitrise pas... Tu m'as redirigé vers des trucs plus simples mais malgré tout je n'arrive pas à lancer "layer.redraw()" que je ne sais où placer et comment activer???? A partir de onchange() du select (html) ou dans la fonction lancée par onview, ou ailleurs?????

@Olivier. J'ai aussi décortiquer ton code. Quelques idées d'adaptation me sont venus, mais je suis pas encore assez à l'aise pour concrétiser....

Demain est un autre jour....

[mga_geo]

J'ai essayé la solution de Jean-Marc (cf http://atlasnw.free.fr/geoportail/ex...ml_choix2.html ) mais il y a des effets de bord :
- le style
- l'attribut "NOM_COMM" reste à ""

Corrigé : cela était juste des effets de bord d'un copier/coller sans réfléchir !

[cmail]

@Marc:
Tu es beaucoup plus efficace que moi!
Sinon, je reviens sur le tri et la constitution de la liste...
Sur ma page exemple initiale, je reconstitue ma liste select (en php) avec le nom des communes et en "value" un code qui correspond au CODE_COMM des polygons du kml...
Mon souci maintenant sera de garder ma liste (triée et présentable au niveau graphie) et de lier cette liste aux polygones du kml.

Le doute m'assaille car si tu n'as pas pris ma liste, c'est surement que tu as vu une impossibilité de liaison. Je ne sais pas.
Mais d'ores et déjà, un grand grand merci pour ta contribution solide, tenace et efficace

[Viglino]

je n'arrive pas à lancer "layer.redraw()" que je ne sais où placer et comment activer????

Il faut le placer dans la fonction qui gère le changement de commune dans la liste.
Pour le lancer, dans ton cas, c'est :

Code :

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

iv.getViewer().getMap().getLayersByName("Commune43")[0].redraw()

@+

[mga_geo]

Je construis la liste du formulaire à partir d'un champ des placemarks du kml.
Pour avoir une autre graphie, il suffit que dans le kml ce champ soit présent !

Pour l'ordre d'affichage, je trie les "features" sur ce champ. Cela fonctionne bien pour des champs encodés en latin1, en utf8, les signes diacritiques posent problème : le É ne se retrouve pas avec les E par exemple.

Si l'ordre des placemarks est le bon, on peut oublier de faire le tri pour résoudre ce problème. Dans les autres contournements :
- ajouter un autre champ dans le kml, juste pour faire le tri
- avoir une fonction de conversion utf8->latin1

[cmail]

Je construis la liste du formulaire à partir d'un champ des placemarks du kml.
Pour avoir une autre graphie, il suffit que dans le kml ce champ soit présent !

J'avais bien compris ta procédure. Mais mon kml fait déjà 200 ko et je ne souhaite pas y ajouter des champs. D'ailleurs, dans mes perspectives le champ NOM_COMM devra être supprimé du kml: je gagnerais 30 à 50 ko. Il ne restera que le champ CODE_COMM pour faire le lien avec la liste déroulante...(Mes noms de communes et autres infos sur la commune seront gérés via ma base Mysql) Si j'y arrive. En fait, je n'aurais pas du mettre ce champ quand j'ai soumis cette question, pour t'éviter de partir sur une fausse piste. Actuellement NOM_COMM me sert uniquement à repérer facilement dans le texte du kml les polygons (c'est plus facile que de me référer à des chiffres)...

Cela fonctionne bien pour des champs encodés en latin1, en utf8, les signes diacritiques posent problème : le É ne se retrouve pas avec les E par exemple.

OK, j'avais oublié ce fait...

@Jean-Marc, je me remets sur l'ouvrage avec tes renseignements cet après-midi....

[cmail]

@Jean-Marc,
Sur cette nouvelle page d'essai
J'essaye de bien transcrire tes propos

dans la fonction qui gère le changement de commune

....

Ma liste select fait appel en "onchange" à la fonction choixListeKml() dans laquelle se trouve bien (d'après tes propos, à moins de mal les comprendre)

Code :

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

  iv.getViewer().getMap().getLayersByName("commune")[0].redraw();

Mais cette fonction est "undefined"...
Différents bidouillages ont été faits pour la mettre ailleurs, etc. sans résultats probants, car je manque de connaissance....

Dans l'attente de ta réponse, je reprends l'étude de la dernière proposition de Marc....

[cmail]

@ Marc:
Si je n'exagère pas?
Sur cette page, j'ai repris ton code, en essayant de supprimer la création de la liste (pour garder la mienne: j'y tiens vraiment) dans le loadend_kml().
Aussi j'essaye de remplacer ton objet idListeKml par un tableau idListeKmlBIS qui contient les CODE_COMM de mes polygones KML...

Evidemment, vu mes compétences, je n'arrive pas à gérer cette approche. La fonction onchange du select : choixListeKml() n'identifie pas idListeKmlBIS[idx]...

Pour toi, cela doit être normal. Pour moi, un peu moins...

Si je n'abuse pas de trop

[mga_geo]

La version kml_choix4 doit mieux te convenir.

[cmail]

@Marc:
C'était si simple! Je suis très confus. Merci. Je vais maintenant y adapter le survol de la souris avec un retour ici, si c'est positif...
Sinon je lis dans tes balises meta:

name="licence" content="http://creativecommons.org/licenses/by-nc-sa/2.0/fr/ licence Creative Commons Paternité - Pas d'Utilisation Commerciale - Partage des Conditions Initiales à l'Identique 2.0 France" />

Que sous-entends-tu par-là? Faut-il mentionner cette balise en précisant ton nom? Ou autre? Je ne voudrais pas te blesser par un oubli du à mon ignorance...

Je ne mets pas encore "résolu" car j'attends la réponse de Jean-Marc pour voir mon erreur dans mon adaptation de son idée...