Comment éditer le popup à l'aide de la couche de texte Openlayers

Je crée une carte avec environ 1000 points en utilisant Openlayers. Actuellement, lorsque je clique sur l'icône d'un point, la description du point s'affiche dans une fenêtre contextuelle, et pour quitter la fenêtre contextuelle, j'ai besoin de cliquer à nouveau sur l'icône du même point. Existe-t-il un moyen de modifier le code pour que je puisse appuyer sur un bouton de fermeture ou je peux cliquer n'importe où sur la carte afin que cette fenêtre se ferme de nouveau? Je sais qu'il y a un moyen d'utiliser simplement une fenêtre contextuelle régulière, mais j'utilise une couche Openlayers.layer.text.

var pois = new OpenLayers.Layer.Text( "Frequencies", { location:"./frequencyrange.txt", projection: map.displayProjection }); map.addLayer(pois);

J'utilise ce code pour ajouter la couche de texte. Dans le fichier texte seraient les colonnes suivantes: lon lat titre description icon iconSize iconOffset. Existe-t-il une autre colonne que je devrais ajouter pour le popup? J'ai essayé une colonne qui devait modifier la taille du popup, mais cela ne fonctionnait pas pour moi. Donc, jusqu'à présent, je n'ai pas été en mesure de modifier la fenêtre contextuelle, à l'exception de ce qui s'y trouve.

Si vous réglez une carte qui a des contrôles, veillez à ne pas avoir plusieurs contrôles et gestionnaires d'événements (voir LAST NOTE à la fin de cette publication).

Deux événements distincts peuvent fermer votre fenêtre contextuelle: une case CLOSE ('X') à l'intérieur de la fenêtre contextuelle ET une procédure automatique qui ferme la fenêtre contextuelle lorsque la fenêtre disparaît.

Ce pseudo-code a été pris d'une carte fonctionnelle avec des fenêtres contextuelles qui apparaissent lorsque l'utilisateur clique sur un MARQUEUR.

Je crée une couche sur la carte (dans ce cas, à partir d'un fichier KML dynamique, analysé par php):

 var urlKML = 'parseKMLTrack07d.php'; var layerKML = new OpenLayers.Layer.Vector("KML1", { strategies: [new OpenLayers.Strategy.Fixed()], protocol: new OpenLayers.Protocol.HTTP({ url: urlKML, format: new OpenLayers.Format.KML({ extractStyles: true, extractAttributes: true, maxDepth: 2 }) }) });

Puis je crée un contrôle de sélection que j'appelle 'selectStop' et j'associe 2 fonctions à EVENTS (lorsque le MARKER est sélectionné et non sélectionné):

 var selectStop = new OpenLayers.Control.SelectFeature(layerKML,{onSelect: onFeatureSelect, onUnselect: onFeatureUnselect}); layerKML.events.on({ "featureselected": onFeatureSelect, "featureunselected": onFeatureUnselect }); map.addControl(selectStop); selectStop.activate();

Ce sont les deux fonctions pour lesquelles le MARQUEUR est sélectionné ou NON SÉLECTÉ

 function onFeatureSelect(event) { var feature = event.feature; var content = feature.attributes.name + '<br/>'+feature.attributes.description; popup = new OpenLayers.Popup.FramedCloud("chicken", feature.geometry.getBounds().getCenterLonLat(), new OpenLayers.Size(100,100), content, null, true, onFeatureUnselect); feature.popup = popup; map.addPopup(popup); // GLOBAL variable, in case popup is destroyed by clicking CLOSE box lastfeature = feature; } function onFeatureUnselect(event) { var feature = lastfeature; if(feature.popup) { map.removePopup(feature.popup); feature.popup.destroy(); delete feature.popup; } }

Notez que dans la fonction OnFeatureSelect, je crée une variable GLOBAL appelée 'lastfeature'. La raison pour laquelle je fais ceci est que mon onFeatureUnselect sera utilisé pour détruire le popup dans le cas où il n'est pas asservi ou la BOÎTE CLOSE EST CLIQUÉE.

Si je ne sauvegardais pas la fonctionnalité en tant que variable globale, je devrais traiter la désélection et fermer la case en cliquant séparément, car les EVENEMENTS QUI CAISSENT CHAQUE sont différents.

Pour créer la CLOSE BOX à l'intérieur de la fenêtre contextuelle, je définis le deuxième dernier argument (dans la déclaration contextuelle dans la fonction onFeatureSelect) à TRUE et nommez onFeatureUnselect comme fonction de rappel pour la zone de fermeture:

 popup = new OpenLayers.Popup.FramedCloud("chicken", feature.geometry.getBounds().getCenterLonLat(), new OpenLayers.Size(100,100), content, null, true, onFeatureUnselect);

DERNIERE NOTE: si vous utilisez un rafraîchissement sur un calque, veillez à ne pas doubler vos manipulateurs. Dans ce cas, lorsque votre javascript démarre, créez une variable 'id1' qui contiendra votre identifiant de contrôle selectStop. Vérifiez s'il existe avant de créer un nouveau contrôleur et gestionnaire. comme ça:

 if (id1 == '') { var selectStop = new OpenLayers.Control.SelectFeature(layerKML,{onSelect: onFeatureSelect, onUnselect: onFeatureUnselect}); layerKML.events.on({ "featureselected": onFeatureSelect, "featureunselected": onFeatureUnselect }); map.addControl(selectStop); selectStop.activate(); id1 = selectStop.id; } else { selectStop = OpenLayers.Control.SelectFeature(layerKML,{onSelect: onFeatureSelect, onUnselect: onFeatureUnselect}); }

Vous pouvez vérifier si vous doublez vos gestionnaires d'événements, en mettant une alerte dans votre OnFeatureSelect. Si vous cliquez sur un marqueur et que vous obtenez plusieurs fenêtres d'alerte, vous avez des gestionnaires en double. Vous avez l'impression que vous ne pouvez pas détruire un popup, ce qui est faux. Vous avez détruit ONE popup, mais vous avez N popups identiques (avec le même identifiant, d'ailleurs).

Dans l'appel du constructeur au menu déroulant, vous pouvez spécifier qu'une boîte de fermeture devrait être présente.

À partir de la documentation OpenLayers: http://dev.openlayers.org/apidocs/files/OpenLayers/Popup-js.html

 Parameters ... closeBox {Boolean} Whether to display a close box inside the popup. closeBoxCallback {Function} Function to be called on closeBox click.

Et si vous utilisez les featureselected événement de calque sélectionnées pour afficher la fenêtre contextuelle, vous pouvez utiliser l'événement fonctionnalité non sélectionné pour fermer la fenêtre contextuelle.