Có cách nào để thay đổi hình ảnh biểu tượng tùy thuộc vào mức thu phóng không? (leaflet.js)

Question

Tôi đang tạo một công cụ vẽ vùng cho một ứng dụng web và tôi đang sử dụng các điểm đánh dấu làm các neo mà người dùng có thể sử dụng để thay đổi hình dạng của đa giác.

Đây là những gì tôi có cho đến nay. http://demos.nodeline.com/leaflet_development/

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



}); 







}); 

tôi chỉ muốn đánh dấu để có kích thước bình thường khi người dùng phóng to đến cấp phố. Khi bạn thu nhỏ các điểm đánh dấu có kích thước bình thường, hãy hoàn toàn làm mất đa giác. Tôi nhìn qua các tài liệu nhưng không thể tìm thấy bất cứ điều gì về điều này.

Tôi chủ yếu tìm kiếm đề xuất/động não. Tôi nghĩ có lẽ có một cách để phát hiện trạng thái zoom nào bạn hiện đang ở? Nếu vậy, tôi có thể sử dụng câu lệnh if để thay đổi biểu tượng.

Answer 1

Ok vì vậy tôi tìm thấy một vài phương pháp và đến với điều này:

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

Phương pháp setIcon() đã không có trong tài liệu, tôi tìm thấy nó trong một diễn đàn google và nó worked.I làm một biểu tượng nhỏ hơn và về cơ bản tôi chỉ thay thế biểu tượng ban đầu khi mức thu phóng nhỏ hơn 13. Tôi sẽ triển khai các điểm đánh dấu khác nhau cho các mức thu phóng khác nhau ngay bây giờ để tạo hiệu ứng 'đánh dấu' xa hơn.

Đây là mã được sửa đổi.

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

}); 

đây là demo: http://demos.nodeline.com/leaflet_development/

Answer 2

Bạn cũng có thể thay đổi một lớp chung trên zoom và thực hiện thay đổi với CSS.

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

sau đó CSS ​​của bạn sẽ là:

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

tôi sử dụng nó để che giấu tên của điểm đánh dấu của tôi cho đến khi bạn phóng to ở mức quá khứ 10