Discussion :

[lecrycry]

Bonjour,

J'ai besoin d'afficher plusieurs marqueurs sur ma carte Geoportail et d'associer un évènement différent pour chacun de ces points. Au clic sur un point, cela affiche un message différent.

En cherchant sur Internet, voici où j'en suis arrivé, tous les points s'affichent bien, le seul problème c'est qu'uniquement mon dernier point d'intérêt dispose de l'event, les autres points n'affichent rien lorsque je clic dessus.

Voici mon code simplifié :

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
var i=1;
function add_poi(long,lat, msg) {

		var point =  new OpenLayers.Geometry.Point(parseFloat(long),parseFloat(lat));
		  
		// Passage en projection Géoportail
		var sourceproj = OpenLayers.Projection.CRS84; // WGS84
			
		var destproj = viewer.projection; // projection Geoportail
		point.transform(sourceproj, destproj);
		
		// Création du POI  à partir du point
		stylepoi = {externalGraphic:'myIcon.png',  graphicWidth:29, graphicHeight:37 };
			
		var mon_poi = new OpenLayers.Feature.Vector(point, {id: i}, stylepoi);

	
		
		  
		var vector_layer = new OpenLayers.Layer.Vector("POI");

var selectFeature = new OpenLayers.Control.SelectFeature(vector_layer);
		viewer.getMap().addControl(selectFeature);
		selectFeature.activate();
		
		vector_layer.events.on({
  'featureselected': function(feature) {
       //display your message here
       alert(msg);
  },
  'featureunselected': function(feature) {
       //hide message
  }
  		
});
		
		i++;
  		
		// Ajout du POI à la couche créée et affichage de la couche
		vector_layer.addFeatures([mon_poi]);
		
		// Ajout de la couche à la carte
		viewer.getMap().addLayer(vector_layer);
		
		
}

add_poi(7.479801177978515, 48.5752371237077, "Message 1");
add_poi(7.428013086318969, 48.38241033091097, "Message 2");
add_poi(7.420846223831177, 48.32273752938259, "Message 3");

Merci d'avance de vos éclaircissements,

Cordialement,

[betechsud]

Bonjour,

dans un cas similaire je gère les événements dans le SelectFeature :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
var selectFeature = new OpenLayers.Control.SelectFeature(vector_layer,
{
clickout: true,
toggle: false,
multiple: false,
hover: false,
onSelect: function(feature) {
   //display your message here
   alert(msg);
},
onUnselect: function(feature) {}
});

[gcebelieu]

Bonjour,

dans le code transmis, vous créez une couche OpenLayers.Layer.Vector par point. Or, avec OpenLayers, par défaut, seule une couche est active au clic.
Pour palier à cela, deux alternatives :

* soit vous créez une seule couche vecteur dans laquelle vous mettez tous vos POI ;

soit vous continuez à créer une couche par POI et vous créez un controle selectFeature sur toutes les couches, comme dans l'exemple suivant :

http://api.ign.fr/tech-docs-js/examp...ltiLayers.html

Gilles

[lecrycry]

Bonjour,

Merci de vos éléments, mais en essayant de nombreuses choses dont ce que vous m'avez indiqué, je n'arrive toujours pas à ce que je souhaite.

J'aimerais afficher 3 icônes sur la carte et qui chacune doit ouvrir un lien différent selon les icônes.

Actuellement je créé une icône de la sorte :

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
function add_poi(long,lat,url)
{
               var point =  new OpenLayers.Geometry.Point(parseFloat(long),parseFloat(lat));
		  
		// Passage en projection Géoportail
		var sourceproj = OpenLayers.Projection.CRS84; // WGS84
			
		var destproj = viewer.projection; // projection Geoportail
		point.transform(sourceproj, destproj);
		
		// Création du POI  à partir du point
		stylepoi = {externalGraphic:'monIcon.png',  graphicWidth:29, graphicHeight:37 };
			
		var mon_poi = new OpenLayers.Feature.Vector(point, {id: i}, stylepoi);

                var vector_layer = new OpenLayers.Layer.Vector("PANO");

                // Ajout du POI à la couche créée et affichage de la couche
		vector_layer.addFeatures([mon_poi]);
		
		// Ajout de la couche à la carte
		viewer.getMap().addLayer(vector_layer);

}

J'aimerais ensuite que lorsque je clique dessus en fonction de mon icône (ie, mon_poi, mon_poi2 et mon_poi3), j'ouvre un lien différent avec window.location par exemple.

Pouvez-vous m'indiquer un code unitaire de cette fonctionnalité afin de bien comprendre comment fonctionne la sélection multiple et comment associer plusieurs actions à plusieurs layers ?

Merci beaucoup.

Cordialement,

[gcebelieu]

Je pense que l'idée serait plutôt :

1. de rajouter l'URL à ouvrir comme un attribut du feature créé.
2. créer un fonction qui traite la sélection d'un feature en déclenchant l'ouverture de l'URL attachée au feature sélectionné
3. rattacher cette fonction à l'événement featureselected (cf. http://dev.openlayers.org/releases/O....Vector.events) pour qu'elle soit appelée lorsqu'on clique dessus.

ça donnerait un truc dans ce genre (en reprenant votre code) :

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

// ne créer qu'une seule Couche vecteur pour tous les POI :
var vector_layer = new OpenLayers.Layer.Vector("PANO");

vector_layer.events.register("featureselected", undefined, function (feature) {
  window.location= feature.attributes.url ;
}) ;



function add_poi(long,lat,url)
{
               var point =  new OpenLayers.Geometry.Point(parseFloat(long),parseFloat(lat));
		  
		// Passage en projection Géoportail
		var sourceproj = OpenLayers.Projection.CRS84; // WGS84
			
		var destproj = viewer.projection; // projection Geoportail
		point.transform(sourceproj, destproj);
		
		// Création du POI  à partir du point
		stylepoi = {externalGraphic:'monIcon.png',  graphicWidth:29, graphicHeight:37 };
			
		var mon_poi = new OpenLayers.Feature.Vector(point, {id: i, url: "url_a_ouvrir"}, stylepoi);

                // ne créer qu'une seule Couche vecteur pour tous les POI :

                // Ajout du POI à la couche créée et affichage de la couche
		vector_layer.addFeatures([mon_poi]);
		
		// Ajout de la couche à la carte
		viewer.getMap().addLayer(vector_layer);

}

[lecrycry]

Bonjour,

J'ai essayé vos solutions, les icônes s'affichent bien mais impossible d'associer un évènement au clic sur ces derniers, rien ne se passe... J'ai essayé vos différentes méthodes, plus d'autres sur Internet mais rien n'y fait...

Voici mon code dans son ensemble, je ne comprends pas pourquoi cela ne fonctionne pas...

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
 /**
 * Property: key
 *
 * The API key to use
 */
var APIkey= "XXXX";

/**
 * Property: viewer
 * {<Geoportal.Viewer>} the viewer global instance.
 */
viewer = null;

var i =1;

// ne créer qu'une seule Couche vecteur pour tous les POI :
var vector_layer = new OpenLayers.Layer.Vector("PANO");

vector_layer.events.on({
                'featureselected': function(feature) {
                    window.location= feature.attributes.url ;
                },
                'featureunselected': function(feature) {

                }
            });


function add_poi(long,lat,url)
{
               var point =  new OpenLayers.Geometry.Point(parseFloat(long),parseFloat(lat));
		  
		// Passage en projection Géoportail
		var sourceproj = OpenLayers.Projection.CRS84; // WGS84
			
		var destproj = viewer.projection; // projection Geoportail
		point.transform(sourceproj, destproj);
		
		// Création du POI  à partir du point
		stylepoi = {externalGraphic:'360Icon.png',  graphicWidth:29, graphicHeight:37 };
			
		var mon_poi = new OpenLayers.Feature.Vector(point, {id: i, url: "http://google.com"}, stylepoi);

                // ne créer qu'une seule Couche vecteur pour tous les POI :

                // Ajout du POI à la couche créée et affichage de la couche
		vector_layer.addFeatures([mon_poi]);
		
		// Ajout de la couche à la carte
		viewer.getMap().addLayer(vector_layer);

}


/**
 * Function: initMap
 * Load the application. Called when all information have been loaded by
 * <loadAPI>().
 */
function initMap() {
    // ----- Traduction
    var options= {
        mode:'normal',
		territory:'FXX',
		proxy:'assets/proxy.php?url=',
		projection:''
    };

    viewer = new Geoportal.Viewer.Default('viewerDiv', OpenLayers.Util.extend(
        options,
        // API keys configuration variable set by <Geoportal.GeoRMHandler.getConfig>
        // variable contenant la configuration des clefs API remplie par <Geoportal.GeoRMHandler.getConfig>
        window.gGEOPORTALRIGHTSMANAGEMENT===undefined? {'apiKey':APIkey} : gGEOPORTALRIGHTSMANAGEMENT)
    );
    if (!viewer) {
        // problem ...
        OpenLayers.Console.error(OpenLayers.i18n('new.instance.failed'));
        return;
    }
   
    // ----- Layers
    viewer.addGeoportalLayers(['ORTHOIMAGERY.ORTHOPHOTOS','GEOGRAPHICALGRIDSYSTEMS.PLANIGN']);

    
    // ----- Autres
    viewer.getMap().setCenterAtLonLat(7.477501,48.307287,8);
	var viewerDiv = document.getElementById("viewerDiv");
	viewerDiv.style.height = "100%";
	$(".gpControlToolBox").attr("style", "display:none");
	$(".gpControlLayerSwitcher").attr("style", "display:none");
	$(".gpControlInformation").attr("style", "display:none");



	
	//Adding 360°
	add_poi(7.479801177978515, 48.5752371237077);
	add_poi(7.428013086318969, 48.38241033091097);
	add_poi(7.420846223831177, 48.32273752938259);
	add_poi(7.325713634490968, 48.15469203968349);
	add_poi(7.287282943725586, 48.12360516952221);
	add_poi(7.295737266540528, 48.03960042854258);
	add_poi(7.241363525390626, 47.953619191663535);


	//Bring the "vignerons" layer to front
	viewer.getMap().raiseLayer(layerMarkers, viewer.getMap().layers.length);

}


/**
 * Function: loadAPI
 * Load the configuration related with the API keys.
 * Called on "onload" event.
 * Call <initMap>() function to load the interface.
 */
function loadAPI() {
    // wait for all classes to be loaded
    // on attend que les classes soient chargées
    if (checkApiLoading('loadAPI();',['OpenLayers','Geoportal','Geoportal.Viewer','Geoportal.Viewer.Default'])===false) {
        return;
    }
    
    Geoportal.GeoRMHandler.getConfig([APIkey], null,null, {
        onContractsComplete: initMap
    });
}

Merci beaucoup de votre aide.

[gcebelieu]

Bonjour,

dans votre code, je vois deux anomalies :

1. vous ajoutez la couche vector_layer à la carte à chaque fois que vous ajoutez un point (dans add_poi) alors qu'il faut l'ajouter une seule fois à la création

2. vous faites un raiseLayer d'une variable "layerMarkers" qui n'est pas déclarée (ça ne serait pas plutôt vector_layer ?)

ça donnerait donc plutôt quelque chose comme ça :

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
/**
 * Property: key
 *
 * The API key to use
 */
var APIkey= "XXXX";

/**
 * Property: viewer
 * {<Geoportal.Viewer>} the viewer global instance.
 */
viewer = null;

// la couche vecteur qui héberge les poi
var vector_layer= null ;

var i =1;


function add_poi(long,lat,url)
{
               var point =  new OpenLayers.Geometry.Point(parseFloat(long),parseFloat(lat));
		  
		// Passage en projection Géoportail
		var sourceproj = OpenLayers.Projection.CRS84; // WGS84
			
		var destproj = viewer.projection; // projection Geoportail
		point.transform(sourceproj, destproj);
		
		// Création du POI  à partir du point
		stylepoi = {externalGraphic:'360Icon.png',  graphicWidth:29, graphicHeight:37 };
			
		var mon_poi = new OpenLayers.Feature.Vector(point, {id: i, url: "http://google.com"}, stylepoi);

                // Ajout du POI à la couche créée et affichage de la couche
		vector_layer.addFeatures([mon_poi]);
		

}


/**
 * Function: initMap
 * Load the application. Called when all information have been loaded by
 * <loadAPI>().
 */
function initMap() {
    // ----- Traduction
    var options= {
        mode:'normal',
		territory:'FXX',
		proxy:'assets/proxy.php?url=',
		projection:''
    };

    viewer = new Geoportal.Viewer.Default('viewerDiv', OpenLayers.Util.extend(
        options,
        // API keys configuration variable set by <Geoportal.GeoRMHandler.getConfig>
        // variable contenant la configuration des clefs API remplie par <Geoportal.GeoRMHandler.getConfig>
        window.gGEOPORTALRIGHTSMANAGEMENT===undefined? {'apiKey':APIkey} : gGEOPORTALRIGHTSMANAGEMENT)
    );
    if (!viewer) {
        // problem ...
        OpenLayers.Console.error(OpenLayers.i18n('new.instance.failed'));
        return;
    }
   
    // ----- Layers
    viewer.addGeoportalLayers(['ORTHOIMAGERY.ORTHOPHOTOS','GEOGRAPHICALGRIDSYSTEMS.PLANIGN']);

    
    // ----- Autres
    viewer.getMap().setCenterAtLonLat(7.477501,48.307287,8);
	var viewerDiv = document.getElementById("viewerDiv");
	viewerDiv.style.height = "100%";
	$(".gpControlToolBox").attr("style", "display:none");
	$(".gpControlLayerSwitcher").attr("style", "display:none");
	$(".gpControlInformation").attr("style", "display:none");


    // ne créer qu'une seule Couche vecteur pour tous les POI :
    vector_layer = new OpenLayers.Layer.Vector("PANO");

    // Ajout de la couche à la carte
    viewer.getMap().addLayer(vector_layer);

    vector_layer.events.on({
                'featureselected': function(feature) {
                    window.location= feature.attributes.url ;
                },
                'featureunselected': function(feature) {

                }
      });


	
	//Adding 360°
	add_poi(7.479801177978515, 48.5752371237077);
	add_poi(7.428013086318969, 48.38241033091097);
	add_poi(7.420846223831177, 48.32273752938259);
	add_poi(7.325713634490968, 48.15469203968349);
	add_poi(7.287282943725586, 48.12360516952221);
	add_poi(7.295737266540528, 48.03960042854258);
	add_poi(7.241363525390626, 47.953619191663535);


	//Bring the "vignerons" layer to front
        // layersMarkers ? ça ne serait pas plutôt vector_layer ?
	viewer.getMap().raiseLayer(layerMarkers, viewer.getMap().layers.length);

}


/**
 * Function: loadAPI
 * Load the configuration related with the API keys.
 * Called on "onload" event.
 * Call <initMap>() function to load the interface.
 */
function loadAPI() {
    // wait for all classes to be loaded
    // on attend que les classes soient chargées
    if (checkApiLoading('loadAPI();',['OpenLayers','Geoportal','Geoportal.Viewer','Geoportal.Viewer.Default'])===false) {
        return;
    }
    
    Geoportal.GeoRMHandler.getConfig([APIkey], null,null, {
        onContractsComplete: initMap
    });
}

[lecrycry]

Bonjour,

Merci beaucoup de votre aide mais même avec vos remarques, cela ne change absolument rien.

J'ai réalisé un test unitaire à l'adresse suivante : http://carto.vinsalsace.com/index2.html

J'ai repris votre dernier code, aucun évènement n'est actif.

Je n'ai aucun message d'erreur dans la console et j'ai rajouté un alert afin de vérifier si l'évènement était pris en compte mais même cela ne fonctionne pas.

Voyez-vous d'où peut provenir le problème ?

Merci d'avance de votre temps et de votre aide.

[gcebelieu]

Il manque la dernière étape : rajouter un controle de sélection sur la couche des POI après avoir créé la couche

Code :

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

1
2
3
4
5
6
    // Ajout de la couche à la carte
    viewer.getMap().addLayer(vector_layer);
    var select= new OpenLayers.Control.SelectFeature(vector_layer);
    viewer.getMap().addControl(select);
    select.activate() ;

[lecrycry]

Bonjour,

Merci cela permet en effet d'obtenir l'évènement lors de la sélection. En revanche, j'ai un message d'erreur :

"feature.attributes is undefined" dans ma console javascript lors de cet appel : "window.location= feature.attributes.url ;"

Comment puis-je récupérer l'attribut url ? Visiblement attributes n'existent pas...

Merci.

[lboulanger]

En regardant rapidement votre exemple, il semblerait qu'il faille plutôt utiliser d'abord passer par l'attribut feature pour récupérer l'url, ce qui donnerait plutôt :

Code :

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

1
2
3
4
'featureselected': function(feature) {
    window.location= feature.feature.attributes.url ;
},

Laurane

[lecrycry]

Cela fonctionne, merci beaucoup !

[elias couppe]

Bonjour,

si cela fonctionne, le sujet peut-il être marqué comme ?

Merci d'avance,

Elias Couppé