C'è un modo per cambiare l'immagine dell'icona a seconda del livello di zoom? (leaflet.js)

Question

Sto creando uno strumento di disegno di area per un'applicazione Web e sto utilizzando i marcatori come ancore che l'utente può utilizzare per modificare la forma di un poligono.

Questo è quello che ho finora. http://demos.nodeline.com/leaflet_development/

repo è a https://github.com/SpencerCooley/Leaflet_development

$(document).ready(function(){ 

var map, cloudmade, sanAntonio, polygonPoints 


map = new L.Map('map'); 

cloudmade = new L.TileLayer('http://{s}.tile.cloudmade.com/d4334cd6077140e3b92ccfae2b363070/997/256/{z}/{x}/{y}.png', { 
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>', 
    maxZoom: 18 
}); 


sanAntonio = new L.LatLng(29.4238889, -98.4933333); // geographical point (longitude and latitude) 


map.setView(sanAntonio, 13).addLayer(cloudmade); 




polygonPoints = []; 

var polygon = new L.Polygon(polygonPoints); 
map.addLayer(polygon); 

map.on('click', function(e) { 


    var marker = new L.Marker(e.latlng, {draggable:true}); 
    polygonPoints.push(e.latlng); 
    var markerId = polygonPoints.length -1 
    map.addLayer(marker); 
    polygon.setLatLngs(polygonPoints); 



    marker.on('drag', function(){ 
    var locationWhileDrag = marker.getLatLng(); 
    $('#first_marker').val(locationWhileDrag); 
    polygonPoints.splice(markerId,1,locationWhileDrag); 
    polygon.setLatLngs(polygonPoints); 
    });  



}); 







}); 

voglio solo i marcatori siano dimensioni normali quando l'utente è ingrandita al livello della strada. Quando riduci gli indicatori di dimensioni normali, annulli completamente il poligono. Ho esaminato i documenti ma non ho trovato nulla al riguardo.

Sono principalmente alla ricerca di suggerimenti/brainstorming. Sto pensando forse c'è un modo per rilevare quale stato di zoom si è attualmente in? Se è così, potrei usare un'istruzione if per cambiare l'icona.

Answer 1

Ok così ho trovato alcuni metodi e arrivato fino a questo:

//this sets up an icon to be replaced on redraw. 
var MyIcon = L.Icon.extend({ 
    iconUrl: 'marker.png', 
    iconSize: new L.Point(10, 16), 
    shadowSize: new L.Point(10, 16), 
    iconAnchor: new L.Point(10, 16) 
}); 

var icon = new MyIcon(); 

//When view resets use the smaller icon if zoom level is less than 13 
map.on('viewreset', function(){ 
    if(map.getZoom() < 13){ 
     marker.setIcon(icon); 
    } 
}); 

Il metodo setIcon() non era nella documentazione, l'ho trovato in un forum google ed è fatta worked.I un'icona più piccola e in pratica sto solo sostituendo l'icona originale quando il livello di zoom è inferiore a 13. Ora ho intenzione di implementare diversi marcatori per diversi livelli di zoom ora per dare l'effetto "più lontano" dei marcatori.

Ecco il codice modificato.

$(document).ready(function(){ 

var map, cloudmade, sanAntonio, polygonPoints 

map = new L.Map('map'); 

cloudmade = new L.TileLayer('http://{s}.tile.cloudmade.com/d4334cd6077140e3b92ccfae2b363070/997/256/{z}/{x}/{y}.png', { 
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>', 
    maxZoom: 18 
}); 

sanAntonio = new L.LatLng(29.4238889, -98.4933333); // geographical point (longitude and latitude) 

map.setView(sanAntonio, 13).addLayer(cloudmade); 

polygonPoints = []; 

var polygon = new L.Polygon(polygonPoints); 
map.addLayer(polygon); 

map.on('click', function(e) { 
    //this sets up an icon to be replaced when redraw. 
    var MyIcon = L.Icon.extend({ 
     iconUrl: 'marker.png', 
     iconSize: new L.Point(10, 16), 
     shadowSize: new L.Point(10, 16), 
     iconAnchor: new L.Point(10, 16) 
    }); 

    var icon = new MyIcon(); 
    //this sets up an icon to be replaced when redraw. 

    var marker = new L.Marker(e.latlng, {draggable:true}); 
    polygonPoints.push(e.latlng); 
    var markerId = polygonPoints.length -1 
    map.addLayer(marker); 
    polygon.setLatLngs(polygonPoints); 

    marker.on('drag', function(){ 
     var locationWhileDrag = marker.getLatLng(); 
     $('#first_marker').val(locationWhileDrag); 
     polygonPoints.splice(markerId,1,locationWhileDrag); 
     polygon.setLatLngs(polygonPoints); 
    });  

    //When view resets use the small icon if zoom level is less than 13 
    map.on('viewreset', function(){ 
     if(map.getZoom() < 13){ 
      marker.setIcon(icon); 
     } 
    }); 
}); 

}); 

Ecco la demo: http://demos.nodeline.com/leaflet_development/

Answer 2

Si potrebbe anche cambiare una classe generica su zoom e apportare la modifica con i CSS.

map.on('zoomend', function(event) { 
    document.body.className = "zoom"+map.getZoom(); 
}); 

allora il vostro CSS sarebbe:

.myIcon{background:red;} 
.zoom4 .myIcon{background:pint;} 

Io lo uso per nascondere il nome del mio marcatore fino a quando si ingrandisce oltre il livello 10.