有沒有辦法根據縮放級別更改圖標圖像？ （leaflet.js）

Question

我正在爲Web應用程序製作區域繪圖工具，並將標記用作用戶可用於更改多邊形形狀的錨點。

這是我到目前爲止。 http://demos.nodeline.com/leaflet_development/

回購爲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); 
    });  



}); 







}); 

我只想標記爲當用戶在到街道級別的放大正常大小。當你縮小正常大小的標記完全淹沒多邊形。我瀏覽了文檔，但找不到任何關於此的內容。

我主要是在尋找建議/頭腦風暴。我想也許有一種方法來檢測你當前在哪個縮放狀態？如果是這樣，我可以使用if語句來更改圖標。

Answer 1

行，所以我找到了一些方法，並用此來了：

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

的setIcon（）來法並沒有在該文檔中，我發現它在一個谷歌論壇，它worked.I做一個較小的圖標，我基本上只是在縮放級別小於13時替換原始圖標。我現在要爲不同的縮放級別實現不同的標記，以使標記「遠離」效果。

這裏是修改後的代碼。

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

}); 

這裏是演示： http://demos.nodeline.com/leaflet_development/

Answer 2

你也可以改變變焦泛型類，並與CSS的變化。

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

那麼你的CSS是：

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

我使用它，直到你在過去的10級

放大隱藏我的標記名稱