2015-10-15 2 views
7

Ho scritto un controllo Opuscolo personalizzato. È una sorta di leggenda che può essere aggiunta per ogni livello. Il controllo stesso ha un pulsante di chiusura per rimuoverlo dalla mappa (come un popup). Il controllo può essere aggiunto facendo clic su un pulsante. Il mio problema è che l'utente può aggiungere lo stesso controllo alla mappa più volte. Quindi, quello di cui ho bisogno è di verificare se questo controllo specifico è già stato aggiunto alla mappa e, in tal caso, non aggiungerlo di nuovo.Scoprire se nella mappa è già stato aggiunto un controllo degli opuscoli

ho creare un controllo per ogni strato, passando alcune opzioni

var control = L.control.customControl(mylayer); 

e aggiungerlo alla mia mappa sul pulsante cliccare

control.addTo(map); 

Ora immaginate il controllo ha un pulsante di chiusura e possono essere chiuse . Ora, se l'utente fa clic di nuovo il pulsante, voglio solo aggiungere il controllo se non è già sulla mappa - qualcosa di simile (hasControl è pseudocodice, non c'è per quanto ne so non tale funzione)

if(!(map.hasControl(control))) { 
    control.addTo(map); 
} 

Per semplicità ho fatto un esempio in cui creo un controllo zoom e lo aggiungo due volte allo here.

risposta

10

Il modo più semplice è quello di verificare l'esistenza della proprietà _map sull'istanza di controllo:

var customControl = new L.Control.Custom(); 

console.log(customControl._map); // undefined 

map.addControl(customControl); 

console.log(customControl._map); // returns map instance 

Ma si prega di tenere a mente, quando si utilizza la proprietà _map, che la _ prefisso della proprietà implica che si tratta di una proprietà privata, che normalmente non dovresti usare. Potrebbe essere cambiato o rimosso nelle versioni future di Leaflet. Non hai intenzione di incontrare che se si utilizza l'approccio seguito:

Collegamento di un riferimento del controllo personalizzato al vostro L.Map esempio:

L.Control.Custom = L.Control.extend({ 
    options: { 
     position: 'bottomleft' 
    }, 
    onAdd: function (map) { 
     // Add reference to map 
     map.customControl = this; 
     return L.DomUtil.create('div', 'my-custom-control'); 
    }, 
    onRemove: function (map) { 
     // Remove reference from map 
     delete map.customControl; 
    } 
}); 

Ora è possibile controllare per il riferimento sulla propria istanza come mappa così:

if (map.customControl) { ... } 

O creare un metodo e includerlo nel L.Map:

L.Map.include({ 
    hasCustomControl: function() { 
     return (this.customControl) ? true : false; 
    } 
}); 

che avrebbe funzionato in questo modo:

var customControl = new L.Control.Custom(); 

map.addControl(customControl); 

map.hasCustomControl(); // returns true 

map.removeControl(customControl); 

map.hasCustomControl(); // returns false 

Ecco una demo del concetto su Plunker: http://plnkr.co/edit/nH8pZzkB1TzuTk1rnrF0?p=preview

+0

Grazie, ho usato la proprietà '_map' - funziona bene! – Krxldfx

+0

Qualunque cosa galleggia la tua barca :) Ma tieni presente, quando usi la proprietà '_map', che il prefisso' _' della proprietà implica che si tratta di una proprietà privata, che normalmente non si suppone utilizzi. Potrebbe essere cambiato o rimosso nelle versioni future di Leaflet. Non incontrerai questo problema con il secondo metodo. Aggiunto questo alla mia risposta, solo per essere completo :) – iH8

+0

Bene, ora ho dato un'occhiata più da vicino alla seconda versione. Penso che potrebbe essere un problema se ho più di un controllo personalizzato, non è vero? Qualcosa come 'var customControl1 = new L.Control.Custom (someOptions); var customControl2 = new L.Control.Custom (otherOptions); '- se ora aggiungo entrambi e rimuovo il primo,' hasCustomControl' restituirebbe false .. – Krxldfx