Suite

Info-bulles de contrôle personnalisé


En suivant le didacticiel OpenLayers, j'ai un contrôle personnalisé fonctionnel avec des info-bulles fonctionnelles pour les contrôles par défaut, comme indiqué dans ce didacticiel. Est-il possible d'ajouter une infobulle à un ou plusieurs contrôles personnalisés de manière simple ou d'hériter de ce comportement ? En ce qui concerne l'API, le contrôle personnalisé ne semble hériter d'aucun comportement d'info-bulle, mais les sous-classes ont toutes des textes d'info-bulle par défaut. Si, cependant, je mets le même paramètre pour l'info-bulle que celui utilisé dans un contrôle par défaut, rien ne se passe.

// espace de noms window.app = {}; var app = window.app; app.customControl = function (opt_options) { var options = opt_options || {} ; var bouton = document.createElement("bouton"); bouton.innerHTML = ""; var custCtrlFct = function (e) { // Logique de la fonction }; button.addEventListener('click', cstCtrlFct, false); var element = document.createElement('div'); element.className = "custom-button ol -unselectable ol-control"; element.appendChild(button); ol.control.Control.call(this, { element: element, target: options.target }) }; ol.inherits(app.customControl, ol.control. Contrôler);

Le contrôle personnalisé est ajouté à la carte lors de sa création.

var map = new ol.Map({ contrôles : ol.control.defaults({ attributionOptions : /** @type {olx.control.AttributionOptions} */ ({ repliable : false }) }).extend([nouvelle application. customControl({tipLabel: "Tooltip"})]), //[… ] });

Dois-je réimplémenter tout le comportement de l'info-bulle par moi-même ou existe-t-il un moyen d'amener OpenLayers à utiliser le comportement de l'info-bulle des contrôles intégrés ?


Après quelques recherches dans l'ol-source et un week-end sans réfléchir à celui-ci, j'ai trouvé la solution/solution de contournement suivante :

// espace de noms window.app = {}; var app = window.app; app.customControl = function (opt_options) { var options = opt_options || {} ; var bouton = document.createElement("bouton"); // Ce sera le texte de l'info-bulle ou une chaîne vide si elle n'est pas définie var buttonTipLabel = options.buttonTipLabel ? options.buttonTipLabel : ""; bouton.innerHTML = ""; var custCtrlFct = function (e) { // Logique de la fonction }; button.addEventListener('click', cstCtrlFct, false); var element = document.createElement('div'); element.className = "custom-button ol -unselectable ol-control"; //Définir le titre du bouton pour afficher l'info-bulle button.title = buttonTipLabel; button.className = "custom-control"; element.appendChild(button); ol.control.Control.call(this , { élément : élément, cible : options.target }) } ; ol.inherits(app.customControl, ol.control.Control);

Définissez le texte de l'info-bulle lors de la création de la carte :

var map = new ol.Map({ contrôles : ol.control.defaults({ attributionOptions : /** @type {olx.control.AttributionOptions} */ ({ repliable : false }) }).extend([nouvelle application. customControl({buttonTipLabel: "Tooltip Text"})]), //[… ] });

après avoir créé la carte, ajoutez le code suivant :

$(".custom-control").tooltip({ placement: "right" // personnaliser selon les besoins });

cela vous donnera une info-bulle avec le même aspect que l'info-bulle par défaut.