¿Hay alguna manera de cambiar la imagen del icono dependiendo del nivel de zoom? (leaflet.js)

Question

Estoy creando una herramienta de dibujo de región para una aplicación web y estoy usando marcadores como anclajes que el usuario puede usar para cambiar la forma de un polígono.

Esto es lo que tengo hasta ahora. http://demos.nodeline.com/leaflet_development/

el repositorio está en 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); 
    });  



}); 







}); 

sólo quiero los marcadores sean tamaño normal cuando el usuario hace zoom con nivel de la calle. Cuando alejas los marcadores de tamaño normal, se ahogan completamente el polígono. Miré a través de los documentos pero no pude encontrar nada sobre esto.

Principalmente estoy buscando sugerencias/intercambio de ideas. ¿Estoy pensando que tal vez haya una manera de detectar en qué estado de zoom se encuentra actualmente? Si es así, podría usar una instrucción if para cambiar el ícono.

Answer 1

Ok, así que encontrar algunos métodos y se le ocurrió esto:

//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); 
    } 
}); 

El método setIcon() no estaba en la documentación, lo encontré en un foro de Google y se hizo worked.I un ícono más pequeño y básicamente estoy simplemente reemplazando el ícono original cuando el nivel de zoom es menor que 13. Voy a implementar marcadores diferentes para diferentes niveles de zoom ahora para dar a los marcadores el efecto de "más lejos".

Aquí está el código revisado.

$(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); 
     } 
    }); 
}); 

}); 

aquí es la demostración: http://demos.nodeline.com/leaflet_development/

Answer 2

También puede cambiar una clase genérica de zoom y hacer el cambio con CSS.

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

entonces su CSS sería:

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

lo uso para ocultar el nombre de mi marcador hasta que se acerca más allá del nivel 10.