Discussion :

[betechsud]

Sur d'autres exemples j'en vois beaucoup avec .html, mais vous c'est de cette façon : onclick="setNoDossier(&quot;' + cent.dossier + '&quot; ); return false;"><b>' + cent.dossier + '

Comment cela fonctionne ici ? Est ce que je peux lier à partir du répertoire assets ou dois je procéder d'une autre façon ?

Je ne sais pas ce que vous voulez faire ; moi je voulais rendre un n° de dossier cliquable à l'intérieur du popup; lorsqu'on clique sur le dossier un élément "input" de ma page est renseigné de la façon suivante :

Code :

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

1
2
3
4
5
function setNoDossier(nodossier)
{
   document.getElementById("no_dossier").value = nodossier;
}

[gcebelieu]

J'ai tenté de mettre : a href="OpenLayers.Layer.Vector" ou encore a href="kml" voir a href="API/assets"

Sur d'autres exemples j'en vois beaucoup avec .html, mais vous c'est de cette façon : onclick="setNoDossier(&quot;' + cent.dossier + '&quot; ); return false;"><b>' + cent.dossier + '

Comment cela fonctionne ici ? Est ce que je peux lier à partir du répertoire assets ou dois je procéder d'une autre façon ?

Le code html à mettre est en fait une chaîne de caractères qui sera affichée dans la popup. Si cette chaîne contient des balise html alors celles-ci seront interprétées comme telles :
si vous mettez '<b>Toto</b>' comme valeur alors vous aurez une popup avec Toto en gras qui va s'afficher.

Quant au contenu proprement dit que vous souhaitez y mettre, cela dépend de vos données. J'imagine que vous voulez y mettre les propriétés de l'objet sur lequel on cliqué. Dans ce cas, vous pouvez récupérer ces dernières à l'aide de la propriété f.attributes où f est la variable qui correspond à l'objet sélectionné et f.attributes est le tableau des propriétés de l'objet. Pour consulter ces dernières, je vous invite à rajouter la ligne suivante dans la fonction "selection()" :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function selection(f) {
  console.log(f.attributes);
  f.popup= new OpenLayers.Popup.FramedCloud(
		  "id",
		  f.geometry.getBounds().getCenterLonLat(),
		  new OpenLayers.Size(50,50),
		  "*** mettre ici le code html qui va s'afficher dans la popup et qui va contenir les propriétés de l'objet f ***"
		); 
  viewer.getMap().addPopup(f.popup);  
}

ensuite, au clic sur un objet, vous verrez dans la console apparaître le contenu du tableau f.attributes. cela vous aidera à trouver les différentes propriétés que vous pourrez utiliser.

[Scarab Aware]

Oui, ce que je cherche à avoir c'est un code HTML qui placé là permette de faire le lien entre la couche sélectionnée et ses propriétés contenue dans le KML. Je suis rendu à bien des tentatives infructueuses pour l'instant.

Donc j'ai bien vu avec le "console.log(f.attributes);" et j'obtiens ceci :



J'essaye de faire en reprenant ""<link type="text/css" href="MiniSheetDefault.css" rel="stylesheet" />" J'ai bien essayé de faire du API/assets avec href mais cela ne produit pas de résultat.
Dans tout ce que j'ai tenté, au mieux j'ai une info-bulle qui apparait avec ce que j'ai écris, voir n'apparaît plus. Et au pire c'est la disparition de la carte parce que les éléments ne sont pas correctement placés entre les guillemets.

Ainsi, attributes montre bien les propriétés de l'objet dans la console, maintenant comment faire pour que ces propriétés apparaissent dans l'info-bulle ? Je chercher toujours le moyen de faire le lien.

D'ailleurs, la dessus :

Je ne sais pas ce que vous voulez faire ; moi je voulais rendre un n° de dossier cliquable à l'intérieur du popup; lorsqu'on clique sur le dossier un élément "input" de ma page est renseigné de la façon suivante :

Code :

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

1
2
3
4
5
function setNoDossier(nodossier)
{
   document.getElementById("no_dossier").value = nodossier;
}

Il y a donc bien un répertoire no_dossier sur l'ordi avec tous les dossiers devant être cliquable dans la popup c'est ça ? Parce que avec le répertoire assets j'ai aussi tenté du setassets sans plus de succès.

[gcebelieu]

Ainsi, attributes montre bien les propriétés de l'objet dans la console, maintenant comment faire pour que ces propriétés apparaissent dans l'info-bulle ? Je chercher toujours le moyen de faire le lien.

d'après ce que vous montrez, l'info semble être portée par la propriété f.attributes.description. Du coup, il ne vous reste plus qu'à écrire :

Code :

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

1
2
3
4
5
6
7
8
9
10
function selection(f) {
    f.popup= new OpenLayers.Popup.FramedCloud(
		  "id",
		  f.geometry.getBounds().getCenterLonLat(),
		  new OpenLayers.Size(50,50),
		  f.attributes.description
		); 
  viewer.getMap().addPopup(f.popup);  
}

Il y a donc bien un répertoire no_dossier sur l'ordi avec tous les dossiers devant être cliquable dans la popup c'est ça ? Parce que avec le répertoire assets j'ai aussi tenté du setassets sans plus de succès.

Non, le "no_dossier" est spécifique à l'application de betchesud.

[Scarab Aware]

Ah merci, encore merci beaucoup de votre aide et là c'est le cas de le dire :



Le problème est maintenant résolu, et donc pour résumer la situation :

Sur le cas d'une API où l'on utilise l'arborescence avec des couches en KML (soit du vector) cela donne :

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
var queryableLayers=viewer.getMap().getLayersByClass("OpenLayers.Layer.WMS");
    for (var i=(queryableLayers.length-1);i>=0;i--){
        if (queryableLayers[i].queryable!=true){
            queryableLayers.splice(i);
        }
    }

var wiCntrl= new OpenLayers.Control.WMSGetFeatureInfo({
        uiOptions:{title:'olControlWMSGetFeatureInfo.title'},
        queryVisible: true,
        layers: queryableLayers,
        maxFeatures: 10,
        infoFormat:'text/plain',
        eventListeners: {
            getfeatureinfo: function(evt) {
                //this===control
                var txt= '';
                if (typeof(evt.features)!='undefined') {
                    for (var i= 0, l= evt.features.length; i<l; i++) {
                        var T= Geoportal.Control.renderFeatureAttributes(evt.features[i]);
                        txt+= '<div class="gpPopupHead">' + T[0] + '</div>' +
                              '<div class="gpPopupBody">' + T[1] + '</div>';
                    }
                } else {
                    if (evt.text) {
                        var txt=
                            evt.object.infoFormat=='text/plain'?
                                '<div class="gpPopupBody">' +
                                    evt.text.replace(/[\r\n]/g,'<br/>').replace(/ /g,'&nbsp;') +
                                '</div>'
                            :   evt.text;
                    }
                }
                if (txt) {
                    this.map.addPopup(new OpenLayers.Popup.FramedCloud(
                        "chicken",
                        this.map.getLonLatFromPixel(evt.xy),
                        null,
                        Geoportal.Util.cleanContent(txt),
                        null,
                        true));
                }
            }
        }
    });
	
//ce qui nous intéresse commence ici	
        var clickCtrlOpts= {  
	onSelect: selection,
	onUnselect: deselection,
	autoActivate: true
};
var vectorLayers= viewer.getMap().getLayersByClass('OpenLayers.Layer.Vector') ;
var hoverCtrl= new OpenLayers.Control.SelectFeature(vectorLayers, clickCtrlOpts);
viewer.getMap().addControl(hoverCtrl);

/**
* fonction appelée lors du click sur un objet vecteur
* f - objet sélectionné lors du click
*/
function selection(f) {
console.log(f.attributes);
  f.popup= new OpenLayers.Popup.FramedCloud(
		  "id",
		  f.geometry.getBounds().getCenterLonLat(),
		  new OpenLayers.Size(50,50),
		  f.attributes.description
	  );
  viewer.getMap().addPopup(f.popup);  
};

function deselection(f) {
  if (f.popup) {
    f.popup.destroy() ;
  }
};