Czy istnieje sposób zmiany obrazu ikony w zależności od poziomu powiększenia? (leaflet.js)

Question

Wykonuję narzędzie do rysowania regionu dla aplikacji internetowej i używam znaczników jako kotwic, które użytkownik może użyć do zmiany kształtu wielokąta.

To jest to, co do tej pory miałem. http://demos.nodeline.com/leaflet_development/

repo jest 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); 
    });  



}); 







}); 

chcę tylko znaczniki być normalny rozmiar, gdy użytkownik jest powiększony do poziomu ulicy. Po pomniejszeniu znaczniki o normalnym rozmiarze całkowicie zagłuszają wielokąt. Przejrzałem dokumentację, ale nie mogłem nic na ten temat znaleźć.

Głównie szukam sugestii/burzy mózgów. Zastanawiam się, czy jest jakiś sposób na wykrycie, który stan powiększenia jesteś w tej chwili? Jeśli tak, mógłbym użyć instrukcji if, aby zmienić ikonę.

Answer 1

Ok więc znalazłem kilka metod i podszedł z tym:

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

Sposób setIcon() nie był w docs, znalazłem go na forum i google to worked.I wykonana mniejszą ikoną, a ja po prostu zastępuję oryginalną ikonę, gdy poziom powiększenia jest mniejszy niż 13. Zamierzam wprowadzić różne znaczniki dla różnych poziomów powiększenia, aby nadać efekt markerów "dalej".

Oto poprawiony kod.

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

}); 

oto demo: http://demos.nodeline.com/leaflet_development/

Answer 2

Można również zmienić ogólny klasę na zoom i dokonać zmiany z CSS.

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

wówczas CSS byłoby:

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

Używam go, aby ukryć imię mojego markera aż powiększyć przeszłości poziomie 10.