4E e 4I Sia: utilizzo libreria Leaflet - Gestori e controlli
Gestori e controlli
Questo tutorial presuppone che tu abbia letto la teoria dell'ereditarietà della classe Leaflet .
In Leaflet, un "livello" è tutto ciò che si muove con la mappa. In contrapposizione a ciò, un "controllo" è un elemento HTML che rimane statico rispetto al contenitore della mappa e un "gestore" è un pezzo di codice invisibile che cambia il comportamento della mappa.
Gestori
I gestori di mappe sono un nuovo concetto in Leaflet 1.0 e la loro funzione è elaborare gli eventi DOM dal browser (come click, dblclicko mousewheel) e modificare lo stato della mappa.
I gestori sono relativamente semplici: hanno solo bisogno di un addHooks()metodo (che viene eseguito quando il gestore è abilitato in una mappa) e di un removeHooks(), che viene eseguito quando il gestore è disabilitato. Uno scheletro per i gestori è:
L.CustomHandler = L.Handler.extend({
addHooks: function() {
L.DomEvent.on(document, 'eventname', this._doSomething, this);
},
removeHooks: function() {
L.DomEvent.off(document, 'eventname', this._doSomething, this);
},
_doSomething: function(event) { … }
});
Questo può essere illustrato con un semplice gestore per eseguire una panoramica della mappa quando un dispositivo mobile è inclinato, attraverso deviceorientationeventi :
L.TiltHandler = L.Handler.extend({
addHooks: function() {
L.DomEvent.on(window, 'deviceorientation', this._tilt, this);
},
removeHooks: function() {
L.DomEvent.off(window, 'deviceorientation', this._tilt, this);
},
_tilt: function(ev) {
// Treat Gamma angle as horizontal pan (1 degree = 1 pixel) and Beta angle as vertical pan
this._map.panBy( L.point( ev.gamma, ev.beta ) );
}
});
Il gestore può essere collegato alla mappa usando map.addHandler('tilt', L.TiltHandler)- questo memorizzerà un'istanza di L.TiltHandlercome map.tilt. Tuttavia, è più comune allegare gestori a tutte le mappe con la addInitHooksintassi:
L.Map.addInitHook('addHandler', 'tilt', L.TiltHandler);
Il nostro gestore ora può essere abilitato eseguendo map.tilt.enable()e disabilitato damap.tilt.disable()
Inoltre, se la mappa ha una proprietà denominata uguale al gestore, allora quel gestore sarà abilitato per impostazione predefinita se tale opzione è true, quindi questo abiliterà il nostro gestore per impostazione predefinita:
var map = L.map('mapDiv', { tilt: true });
Per vedere questo esempio, avrai bisogno di un browser mobile che supporti l' deviceorientationevento - e anche così, questo evento è particolarmente traballante e non specificato, quindi fai attenzione.
| Vedi questo esempio autonomo. |
A seconda del tipo di evento, un gestore della mappa può allegare listener di eventi al document, al windowo al contenitore a L.Mapcui è collegato.
Controlli
Conosci già i controlli: il controllo dello zoom nell'angolo in alto a sinistra, la scala in basso a sinistra, il selettore dei livelli in alto a destra. Al loro interno, an L.Controlè un elemento HTML che si trova in una posizione statica nel contenitore della mappa.
Per eseguire un controllo, è sufficiente ereditare da L.Controle implementare onAdd()e onRemove(). Questi metodi funzionano in modo simile alle loro L.Layercontroparti (vengono eseguiti ogni volta che il controllo viene aggiunto o rimosso dalla mappa), tranne per il fatto che onAdd()devono restituire un'istanza di HTMLElementrappresentazione del controllo. L'aggiunta dell'elemento alla mappa viene eseguita automaticamente, così come la sua rimozione.
L'esempio più semplice di un controllo personalizzato sarebbe una filigrana, che è solo un'immagine:
L.Control.Watermark = L.Control.extend({
onAdd: function(map) {
var img = L.DomUtil.create('img');
img.src = '../../docs/images/logo.png';
img.style.width = '200px';
return img;
},
onRemove: function(map) {
// Nothing to do here
}
});
L.control.watermark = function(opts) {
return new L.Control.Watermark(opts);
}
L.control.watermark({ position: 'bottomleft' }).addTo(map);
| Vedi questo esempio autonomo. |
Se il tuo controllo personalizzato ha elementi interattivi come pulsanti cliccabili, ricorda di utilizzare L.DomEvent.on()inside onAdd()e L.DomEvent.off()inside onRemove().
Se il tuo controllo personalizzato è costituito da più di un elemento HTML (come L.Control.Zoom, che ha due pulsanti), dovrai creare l'intera gerarchia di elementi e restituire il contenitore più in alto.
Pubblicazione del tuo plugin
Se hai capito tutto fino ad ora, sei pronto per creare alcuni plugin di Leaflet! Ma assicurati di leggere il PLUGIN-GUIDE.mdfile , poiché contiene alcuni suggerimenti e buone pratiche sulla denominazione e la pubblicazione del tuo plug-in.
Commenti
Posta un commento