2013-08-29 2 views
11

Ho un programma geoJson di base in javascript utilizzando l'opuscolo dell'opuscolo.javascript map in leaflet come aggiornare

<html> 
<head> 

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" /> 
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script> 
<script src="india.js" type="text/javascript"></script> 

</head> 


<body> 
<div id = "map1" style="width: 1100px; height: 400px"> </div> 

<script> 

var area = L.map('map1', {center: [27.8800,78.0800], zoom: 4 }); 

L.tileLayer('http://a.tiles.mapbox.com/v3/raj333.map-gugr5h08/{z}/{x}/{y}.png').addTo(area); 

var indiaLayer= L.geoJson(india, {style: {weight: 2, 
     opacity: 1, 
     color: 'white', 
     dashArray: '3', 
     fillOpacity: 0.1}}); 

     area.addLayer(indiaLayer); 

     function clicked(){ 

     this.options.style.fillOpacity = 0.8; 
      //how to refresh layer in the given map 

     } 

     indiaLayer.on('click', clicked);     
</script> 
</body> 
</html> 

il problema è come aggiornarei automaticamente il contenuto di Livello sulla mappa.

esempio qui

   function clicked(){ 

     indiaLayer.style.fillOpacity = 0.8; 
      //how to refresh layer in the given map 

     } 

     indiaLayer.on('click', clicked); 

quando l'utente clicca sul indiaLayer, i fillOpacity variabile cambia, ma non riflette indietro sulla mappa che si comprende Dato che non sono rinfrescanti mappa. Non so come farlo

contribuiscono prego

P/s: queste sono le funzioni disponibili sul oggetto indiaLayer (vale a dire l'oggetto all'interno funzione cliccato ... quale usare a tale scopo o non esiste nessuno)

Puoi controllare l'elenco dei metodi disponibili di GEOJson nel numero Leaflef documentation Questo è il collegamento a v.0.7.7, che è il più vicino disponibile per questo esempio.

risposta

17

L'ultima volta che ho usato

map._onResize(); 

e che mi aiuta a rinfrescare mappa. Forse un piccolo trucco, ma funziona.

Nel codice sarà area._onResize()

PS: Forse si dovrebbe provare a cambiare il modo di impostare il nuovo valore di opacità - tenta cambiare

function clicked(){ 
    this.options.style.fillOpacity = 0.8; 
} 

a quella

function clicked(){ 
    this.setStyle({fillOpacity: 0.2}); 
} 
+1

esso non work..nothing accade per mappare da questo codice :( – user609306

+0

appena modificato la mia risposta Spero che aiuta – Elephant

+0

Hey @elephant ..yes this.setStyle ({fillOpacity: 0,2}) funziona ... Spacibo – user609306

15
map.invalidateSize(); 

map._onResize() - è un hack e non è possibile garantire che non verrà rimosso nelle versioni future. .

+3

In realtà invalidateSize non funzionerà se la dimensione della mappa non cambia.Dalla documentazione: "Verifica se la dimensione del contenitore della mappa è cambiata e aggiorna la mappa in caso affermativo" – a1an

+0

Il mio problema era in questa sitaution: La mia mappa era inizialmente nascosta e, quando l'ho visualizzata, non è stata inizializzata (non tutte le tessere erano caricato). Dopo aver aggiunto questo metodo, questo problema è stato risolto. Quindi penso che faccia un po 'di aggiornamento comunque. –

0

area.fitBounds(area.getBounds());

+0

Op ha chiesto "il problema è come vorrei aggiornare automaticamente il contenuto di Layer sulla mappa esempio qui – justDev7a3

+3

@ImportanceOfBeingErnest Si prega di leggere la domanda e la risposta prima di rivedere. –