Meer

Knopinfo voor aangepaste bediening

Knopinfo voor aangepaste bediening


Na de OpenLayers-zelfstudie heb ik een werkend aangepast besturingselement met werkende tooltips voor de standaardbesturingselementen, zoals weergegeven in deze zelfstudie. Is het mogelijk om op een eenvoudige manier een tooltip toe te voegen aan een of meer custom controls of dat gedrag over te nemen? Wat betreft de API, het aangepaste besturingselement lijkt helemaal geen tooltip-gedrag te erven, maar de subklassen hebben allemaal standaard Tooltip-teksten. Als ik echter dezelfde parameter voor de tooltip invul als in een standaardbesturingselement, gebeurt er niets.

// namespace window.app = {}; var app = venster.app; app.customControl = functie (opt_options) { var options = opt_options || {}; var button = document.createElement("button"); knop.innerHTML = ""; var custCtrlFct = function (e) { // Function logic }; 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. Controle);

Het aangepaste besturingselement wordt bij het maken aan de kaart toegevoegd.

var map = new ol.Map({ controls: ol.control.defaults({ attributionOptions: /** @type {olx.control.AttributionOptions} */ ({ collapsible: false }) }).extend([nieuwe app. customControl({tipLabel: "Tooltip"})]), //[… ] });

Moet ik het hele Tooltip-gedrag zelf opnieuw implementeren of is er een manier om OpenLayers het Tooltip-gedrag van de ingebouwde besturingselementen te laten gebruiken?


Na wat graven in de ol-source en een weekend niet nadenken over deze, vond ik de volgende oplossing / tijdelijke oplossing:

// namespace window.app = {}; var app = venster.app; app.customControl = functie (opt_options) { var options = opt_options || {}; var button = document.createElement("button"); // Dit is de Tooltip-tekst of een lege tekenreeks als deze niet is ingesteld var buttonTipLabel = options.buttonTipLabel ? options.buttonTipLabel : ""; knop.innerHTML = ""; var custCtrlFct = function (e) { // Function logic }; button.addEventListener('click', cstCtrlFct, false); var element = document.createElement('div'); element.className = "custom-button ol -unselectable ol-control"; //Stel de titel van de knop in om de tooltip weer te geven button.title = buttonTipLabel; button.className = "custom-control"; element.appendChild(button); ol.control.Control.call(this , {element: element, doel: options.target }) };ol.inherits(app.customControl, ol.control.Control);

Stel de tooltip-tekst in bij het maken van de kaart:

var map = new ol.Map({ controls: ol.control.defaults({ attributionOptions: /** @type {olx.control.AttributionOptions} */ ({ collapsible: false }) }).extend([nieuwe app. customControl({buttonTipLabel: "Tooltip-tekst"})]), //[… ] });

voeg na het maken van de kaart de volgende code toe:

$(".custom-control").tooltip({ plaatsing: "rechts" // aanpassen indien nodig });

hierdoor krijgt u een tooltip met hetzelfde uiterlijk als de standaard tooltip.